<template>
  <!-- 全景课堂 -->
  <div class="ssysManage">
    <div class="searchDiv">
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="initData">
        <el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-form-item label="课程名称：" prop="keyword">
          <el-input size="default" v-model="ruleForm.keyword" placeholder="" />
        </el-form-item>
        <el-form-item label="创建人：" prop="ks_zjjsxm">
          <el-input size="default" v-model="ruleForm.ks_zjjsxm" placeholder="" />
        </el-form-item>
        <el-form-item label="年级：" prop="grade_id">
          <el-select v-model="ruleForm.grade_id" filterable placeholder="" size="default">
            <el-option v-for="(item, index) in gradeData" :key="index" :label="item.grade_name" :value="item.grade_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="学科：" prop="subject_id">
          <el-select v-model="ruleForm.subject_id" filterable placeholder="" size="default">
            <el-option v-for="(item, index) in subjectData" :key="index" :label="item.subject_name" :value="item.subject_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间：" prop="ks_start_datetime">
          <el-date-picker size="default" v-model="ruleForm.ks_start_datetime" type="date" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="学校：" prop="sm_id">
          <el-select v-model="ruleForm.sm_id" filterable placeholder=" " size="default">
            <el-option v-for="item in schoolData" :key="item.id" :label="item.sm_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="default" type="primary" @click="initData">搜索</el-button>
          <el-button size="default" type="warning" @click="resetForm(ruleFormRef)">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="searchContent">
      <div class="searchBtn flex">
        <div class="flex">
          <el-button size="default" type="success" @click="handleDownload">导出</el-button>
        </div>
        <div class="flex">
          <img src="/images/print.png" alt="" />
          <!-- <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> -->
        </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 prop="sm_name" width="200" label="学校" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ks_name" width="200" 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" width="" label="年级" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="jdbjname" width="200" label="班级" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="subject_name" width="" label="学科" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="sm_name" width="" label="学生数" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="ks_zjjsxm" width="" label="创建人" show-overflow-tooltip></el-table-column>
            <el-table-column width="180" label="时间" show-overflow-tooltip>
              <template #default="{row}">
                {{dealWithDateTime(row.create_dateline * 1000)}}
                <!-- {{row.ks_start_datetime}} - {{row.ks_end_datetime}} -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" v-if="activeTab==2">
              <template #default="scope">
                <el-button text size="default" type="primary" @click="handleAudit(scope.row.ks_id)">审核</el-button>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80" v-else>
              <template #default="scope">
                <span v-if="activeTab==1" style="color: #26D48A;">已通过</span>
                <span v-if="activeTab==3" style="color: #FF0000;">未通过</span>
              </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>
    </div>

    <el-dialog width="900px" v-model="dialogVisible" title="查看" custom-class="commonDialog" :show-close="false" :close-on-click-modal="false">
      <detail :current="currentId" :workData="workData" :classData="classData" @update="handleClose"></detail>
    </el-dialog>
  </div>
</template>

<script setup >
import { reactive, ref, onMounted } from "vue";
import { download } from "~/utils/request";
import { Search } from "@element-plus/icons-vue";
import { dealWithDateTime } from "~/utils/common-util.js"
import { gradeList, subjectList, ssyskcList, zy_ssysList, classList, schoolList } from "./api.js";
import detail from "./detail.vue";

const activeTab = ref("2");
const tabData = [
  {
    name: "2",
    label: "待审核列表",
  },
  {
    name: "1",
    label: "已通过",
  },
  {
    name: "3",
    label: "未通过",
  },
];

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

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

initSelectData();
const gradeData = ref([]);
const subjectData = ref([]);
const workData = ref([]);
const classData = ref([]);
const schoolData = ref([]);
async function initSelectData() {
  let data1 = await gradeList();
  gradeData.value = [{ grade_name: "全部", grade_id: "" }].concat(data1.page_data);

  let data2 = await subjectList();
  subjectData.value = [{ subject_name: "全部", subject_id: "" }].concat(data2.page_data);

  let data3 = await zy_ssysList();
  workData.value = data3.page_data;

  let data4 = await classList();
  classData.value = data4.page_data;

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

  initData();
}

const tableData = ref([]);
const total = ref(0);
const limit = ref(10);
const currentPage = ref(1);
function handleCurrentChange(val) {
  currentPage.value = val;
  initData();
}


async function initData() {
  let obj = {
    limit: limit.value,
    page: currentPage.value,
    keyword: ruleForm.keyword,
    ks_shzt: activeTab.value,
    ks_zjjsxm: ruleForm.ks_zjjsxm,
    grade_id: ruleForm.grade_id,
    subject_id: ruleForm.subject_id,
    sm_id: ruleForm.sm_id,
    ks_start_datetime: ruleForm.ks_start_datetime,
    admin: "1"
  };
  let data = await ssyskcList(obj);
  total.value = parseInt(data.total_rows);
  data.page_data.map((item) => {
    if (item.ks_jdbj_json != "") {
      let jdbjData = JSON.parse(item.ks_jdbj_json);
      let jdbjValue = [];
      jdbjData.map((item) => {
        jdbjValue.push(item.class_name);
      })
      item.jdbjname = jdbjValue.join(",");
    } else {
      item.jdbjname = "";
    }

    schoolData.value.map((val) => {
      if (item.sm_id == val.id) {
        item.sm_name = val.sm_name;
      }
    })
  })
  tableData.value = data.page_data;
}

const dialogVisible = ref(false);
const currentId = ref("");
const handleAudit = (id) => {
  dialogVisible.value = true;
  currentId.value = id;
};

const handleClose = (type) => {
  dialogVisible.value = false;
  currentId.value = "";
  if (type == 1) {
    initData();
  }
}

let multipleSelection = $ref([]);
const handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach(item => {
    multipleSelection.push(item.ks_id) ;
  })
}

const handleDownload = () => {
  
  let obj = {
    // limit: limit.value,
    // page: currentPage.value,
    site: 'tyyx',
    admin:'1',
    keyword: ruleForm.keyword,
    ks_shzt: activeTab.value,
    ks_zjjsxm: ruleForm.ks_zjjsxm,
    grade_id: ruleForm.grade_id,
    subject_id: ruleForm.subject_id,
    sm_id: ruleForm.sm_id,
    ks_start_datetime: ruleForm.ks_start_datetime,
    ks_id: multipleSelection,
  };

  download("/kzkt/ssyskc/index", obj);
};

onMounted(() => {
  setTimeout(() => {
    let searchContent = document.querySelector(".searchContent");
    let offset = document.querySelector(".searchDiv");
    let parentObj = document.querySelector(".ssysManage");
    searchContent.style.height = parentObj.clientHeight - offset.clientHeight + "px";
    window.onresize = function () {
      let searchContent = document.querySelector(".searchContent");
      let parentObj = document.querySelector(".ssysManage");
      searchContent.style.height = parentObj.clientHeight - offset.clientHeight + "px";
    }
  }, 0)
})
</script>

<style lang="scss" scoped>
@import "~/styles/dialog.scss";
.ssysManage {
  height: calc(100vh - 50px - 2rem);
  .flex {
    display: flex;
    align-items: center;
  }
  .searchDiv {
    // height: 62px;
    background: #fff;
    border-radius: 6px;
    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
    // padding: 0 20px;
    // .el-tabs::v-deep {
    //   .el-tabs__header {
    //     margin: 0;
    //   }
    // }
    .el-form-item::v-deep {
      margin-bottom: 0;
      .el-form-item__label {
        padding: 0;
      }
    }
  }
  .searchContent {
    margin-top: 12px;
    height: calc(100% - 62px - 12px);
    background: #fff;
    border-radius: 6px;
    // box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.1);
    // padding: 0 20px;
    .searchBtn {
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e3e3e3;
      ::v-deep .el-button {
        height: 32px;
      }
    }
    .tableList {
      height: calc(100% - 52px - 10px);
      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>