<template>
  <div class="ykkb-xxList">
    <div class="searchContent">
      <div class="searchTitle flex">
        <div>今天{{initCurrent()}}</div>
        <div>
          <import-button url="/kzkt/ssyskc" @success="initData"></import-button>
          <!-- <el-button size="default" type="success" @click="handleDownload(1)">导出</el-button> -->
        </div>
      </div>
      <el-calendar ref="calendar" v-model="month">
        <template #header="{ date }">
          <el-date-picker v-model="month" type="month" size="default" placeholder="" @change="initData" />
          <div class="flex">
            <!-- <el-input v-model="ruleForm.keyword" size="default" placeholder="请输入搜索的关键词" style="margin: 0 10px;" :suffix-icon="Search" />
            <el-button size="default" type="primary" @click="initData">搜索</el-button> -->
            <el-button type="info" size="default" :icon="ArrowLeft" plain @click="selectDate('prev-month')" />
            <el-button type="info" size="default" :icon="ArrowRight" plain @click="selectDate('next-month')" />
          </div>
        </template>
        <template #dateCell="{ data }">
          {{initCurrentDay(data.day, 1)}}
          <div class="box" v-if="initCurrentDay(data.day, 2)!=0">
            <div>{{initCurrentDay(data.day, 2)}}节课</div>
            <span style="border-bottom: 1px solid;cursor: pointer;" @click="lookDetail(data.day)">去看看</span>
            <!-- <el-link type="primary" @click="lookDetail(data)">去看看</el-link> -->
          </div>
        </template>
      </el-calendar>
    </div>

    <el-dialog width="80%" v-model="dialogVisible" title="查看" custom-class="commonDialog" :close-on-click-modal="false">
      <div class="searchBtn flex">
        <div class="flex">
          <el-button size="default" type="success" @click="handleDownload(2)">导出</el-button>
        </div>
        <div class="flex">
          <img src="/images/print.png" alt="" />
          <el-input v-model="searchKey" size="default" placeholder="请输入搜索的关键词" style="margin: 0 10px;" :suffix-icon="Search" />
          <el-button size="default" type="primary" @click="initTableData">搜索</el-button>
        </div>
      </div>
      <div class="tableList">
        <div class="tableDiv">
          <el-table ref="multipleTableRef" :data="tableData" height="100%" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="结对教师" show-overflow-tooltip>
              <template #default="{row}">
                <div v-html="row.ks_jdjs_string"></div>
              </template>
            </el-table-column>
            <el-table-column prop="ks_name" label="课程名称" show-overflow-tooltip>
              <template #default="{row}">
                <span style="color: #00A3FF;">{{row.ks_name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grade_name" label="年级" show-overflow-tooltip></el-table-column>
            <el-table-column prop="subject_name" label="学科" show-overflow-tooltip></el-table-column>
            <el-table-column label="时间" show-overflow-tooltip>
              <template #default="{row}">
                {{row.ks_start_datetime}}-{{row.ks_end_datetime}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationDiv">
          <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="limit" :currentPage="currentPage"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { ssyskcList, schoolList } from "./api";
import { download } from "~/utils/request";
import { dealWithMonth } from "~/utils/common-util.js";

const ruleFormRef = ref(null);
const ruleForm = reactive({
  sm_id: "",
  keyword: ""
});

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  initData();
};

// initSelectData();
const schoolData = ref([]);
async function initSelectData() {
  let data5 = await schoolList();
  schoolData.value = [{ sm_name: "全部", id: "" }].concat(data5.page_data);
}

const totalMonthData = ref([]);
const month = ref(new Date());
initData();
async function initData() {
  let obj = {
    limit: "9999",
    school_kb: "1",
    month: dealWithMonth(month.value),
    site: "tyyx"
  };
  let data = await ssyskcList(obj);
  totalMonthData.value = data.page_data;

  // let allData = [];
  // let dateData = [];
  // data.page_data.map(item => {
  //   item.ks_kss = Number(item.ks_kss) || 1;
  //   let dateArr = item.ks_start_datetime.split(" ");
  //   if (dateArr[0]) {
  //     let index = dateData.indexOf(dateArr[0]);
  //     if (index == -1) {
  //       dateData.push(dateArr[0]);

  //       let obj = {};
  //       obj[dateArr[0]] = item.ks_kss;
  //       allData.push(obj)
  //     } else {
  //       allData[index][dateArr[0]] += item.ks_kss;
  //     }
  //   }
  // })
  // totalMonthData.value = [...allData];
}

function initCurrent(param) {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth();
  month = month + 1;
  let day = date.getDate();
  return year + '年' + month + '月' + day + '日';
}

const calendar = ref()
const selectDate = (val) => {
  calendar.value.selectDate(val)
  initData();
}

function initCurrentDay(date, type) {
  let arr = date.split("-");
  if (type == 1) {
    return Number(arr[2]);
  } else {
    let res = 0;
    totalMonthData.value.map(item => {
      for (let key in item) {
        if (date == key) {
          res = item[key];
        }
      }
    })
    return res;
  }
}

const tableData = ref([]);
const total = ref(0);
const limit = ref(10);
const currentPage = ref(1);
const dialogVisible = ref(false);
const searchKey = ref("");
const currentDay = ref("");
function lookDetail(data) {
  currentDay.value = data;
  initTableData();
}

function handleCurrentChange(val) {
  currentPage.value = val;
  initTableData();
}

async function initTableData() {
  let obj = {
    limit: limit.value,
    page: currentPage.value,
    keyword: searchKey.value,
    ks_date: currentDay.value,
    admin: "1"
  };
  let data = await ssyskcList(obj);
  total.value = parseInt(data.total_rows);
  data.page_data.map(item => {
    if (item.ks_jdjs_json) {
      let ks_jdjs = JSON.parse(item.ks_jdjs_json);
      let arr = [];
      ks_jdjs.map(val => {
        if (val.user_name) {
          arr.push(val.user_realname + "(" + val.user_name + ")");
        } else {
          arr.push(val.user_realname);
        }
      })
      item.ks_jdjs_string = arr.join("<br />");
    } else {
      item.ks_jdjs_string = "";
    }
  })
  tableData.value = data.page_data;
  dialogVisible.value = true;
}

const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const handleDownload = (type) => {
  let obj = {};
  if (type == 1) {
    // obj = {
    //   sm_id: ruleForm.sm_id,
    //   keyword: ruleForm.keyword,
    //   month: dealWithMonth(month.value),
    //   school_kb: 1,
    //   site: "tyyx"
    // }
  } else if (type == 2) {
    let arr = [];
    multipleSelection.value.map(value => {
      arr.push(value.ks_id);
    })
    obj = {
      limit: limit.value,
      page: currentPage.value,
      keyword: searchKey.value,
      ks_date: currentDay.value,
      admin: "1",
      checkedidstring: arr.join(",")
    };
  }
  download("/kzkt/ssyskc/index", obj);
};
</script>

<style lang="scss" scoped>
@import "~/styles/dialog.scss";
.ykkb-xxList {
  height: 100%;
  .flex {
    display: flex;
    align-items: center;
  }
  .searchContent {
    // height: calc(100% - 62px - 12px);
    // background: #fff;
    .searchTitle {
      justify-content: space-between;
      border-bottom: 1px solid #e4e6e8;
      padding-bottom: 12px;
      ::v-deep .el-button {
        height: 32px;
      }
    }
    .el-calendar::v-deep {
      .el-calendar-day {
        height: 100px;
        font-size: 12px;
        text-align: right;
      }
      .box {
        margin-top: 8px;
        background: rgba($color: #3e7eff, $alpha: 0.1);
        border-radius: 6px;
        color: #3e7eff;
        font-size: 14px;
        padding: 8px;
        text-align: left;
      }
    }
  }

  ::v-deep .commonDialog {
    .el-dialog__body {
      padding: 5px 15px;
    }
    .searchBtn {
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e3e3e3;
      ::v-deep .el-button {
        height: 32px;
      }
    }
    .tableList {
      height: 600px;
      position: relative;
      .tableDiv {
        // background: #ddd;
        height: calc(100% - 42px);
        .el-button {
          padding: 0;
        }
        .split {
          color: #00a3ff;
          margin: 0 10px;
        }
      }
      .paginationDiv {
        position: absolute;
        bottom: -5px;
        padding: 3px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-pack: end;
      }
    }
  }
}
</style>