<template>
  <MOSTY.PageTree :pageTitle="'考试情况列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section class="button">
        <el-button type="primary" class="ml12" @click="export2Excel" :disabled="!tableData || !tableData.length"
          v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出表格</span>
        </el-button>
      </section>
    </template>
    <template #table>

      <div class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" style="width: 100%;" actionsW="240px">
          <template #startTime="{ row }">
            <span class="operate">{{ row.startTime || '--' }}</span>
          </template>
          <template #endTime="{ row }">
            <span class="operate">{{ row.endTime || '--' }}</span>
          </template>
          <template #examinationStatus="{ row }">
            <span class="operate" v-if="row.examinationStatus == 0">未开始</span>
            <span class="operate" v-else-if="row.examinationStatus == 1">考试中</span>
            <span class="operate" v-else>已结束</span>
          </template>
          <template #percentOfPass="{ row }">
            <span class="operate">{{ Math.round((row.percentOfPass * 100 * 100)) / 100 }}%</span>
          </template>
          <template #actions="{ row }">
            <div class="flex just-center">
              <span class="operesee" @click="showDetail(row.id, row)"><el-icon>
                  <View />
                </el-icon>查看详情
              </span>
              <el-popconfirm v-if="isShowDel(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="确定要删除?" @confirm="onDelete(row)">
                <template #reference>
                  <span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>
              <el-popconfirm v-if="isShowCalcScore(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="确定要重新计分?" @confirm="changecear(row)">
                <template #reference>
                  <span class="operedit" size="small">
                    <el-icon>
                      <Odometer />
                    </el-icon>
                    重新计分
                  </span>
                </template>
              </el-popconfirm>

            </div>
          </template>
        </MOSTY.Table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 详情 -->
  <div v-if="detailShow" class="dialog-box">
    <Ksqkdetail @close="closeEven" :id="detailId" :sjRow="currRow" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, nextTick, reactive } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { getApi } from "@/api/tobAcco_api.js";
import Ksqkdetail from "./ksqkdetail.vue";
import { ElMessage } from "element-plus"
import { filterqx } from "@/utils/auth.js";// isSgs,isgs,isxgs,isaqbm,isldbz

import * as MOSTY from "@/components/MyComponents/index";
const searchArr = reactive([
  {
    showType: "select",
    prop: "type",
    width: '250px',
    options: [
      { label: "已结束", value: "2" },
      { label: "考试中", value: "1" },
      { label: "未开始", value: "0" }
    ],
    placeholder: '请选择考试情况'
  }
])
const tableColumn = reactive([
  {
    title: "考试名称",
    prop: "name"
  },
  {
    title: "开始时间",
    prop: "startTime",
    slot: true
  },
  {
    title: "结束时间",
    prop: "endTime",
    slot: true
  },
  {
    title: "考试情况",
    prop: "examinationStatus",
    slot: true
  },
  {
    title: "平均分",
    prop: "average"
  },
  {
    title: "最高分",
    prop: "max"
  },
  {
    title: "最低分",
    prop: "min"
  },
  {
    title: "合格率",
    prop: "percentOfPass",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const tableloading = ref(false);
const tableData = ref([]);
const loadingShow = ref(false);
/** 当前行 */
const currRow = ref({})
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const detailId = ref('');
const detailShow = ref(false)
onMounted(() => {
});
const closeEven = () => {
  detailShow.value = false;
  getTableData();
}
const showDetail = (val, row) => {
  detailId.value = val;
  currRow.value = row
  detailShow.value = true;
}
//查询
function onSearch(obj) {
  listQuery.value.type = obj.type
  listQuery.value.pageCurrent = 1;
  getTableData();
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.orgcode = val.id;
  listQuery.value.pageCurrent = 1;
  getTableData();
};

// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/paper/getScoreList").then((res) => {
    tableData.value = Array.isArray(res?.records) ? res.records : [];
    listQuery.value.total = res.total;
  }).finally(() => {
    tableloading.value = false
  })
};
function changecear(row) {
  getApi({ id: row.id }, '/mosty-jcgl/paper/againScore').then(res => {
  }).finally(() => {
    ElMessage.success("更新成绩成功");
    getTableData();
  })
}
const isShowDel = (row) => {
  return filterqx('isaqbm') == '1' && row.examinationStatus != 1;
};
const isShowCalcScore = (row) => {
  return filterqx('isaqbm') == '1' && row.examinationStatus == 2;
};
const onDelete = (row) => {
  getApi({ id: row.id }, "/mosty-jcgl/paper/delExamPaper").then(res => {
    if (res) {
      ElMessage.success("删除成功");
      getTableData()
    }
  })
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};

//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    name: "试卷名称",
    startTime: "考试时间",
    endTime: "结束时间",
    average: "平均分",
    type: "考试情况",
    max: "最高分",
    min: "最低分",
    percentOfPass: "合格率",
  };
  const params = {
    ...listQuery.value,
    pageCurrent: 1,
    pageSize: 30000,
  }
  getApi(params, "/mosty-jcgl/paper/getScoreList").then((res) => {
    const tableData = Array.isArray(res?.records) ? res.records : [];
    let data = []
    for (let i = 0; i < tableData.length; i++) {
      let item = tableData[i]
      console.log()
      let type = ''
      if (item.examinationStatus == 0) {
        type = '未开始'
      } else if (item.examinationStatus == 1) {
        type = '考试中'
      } else if (item.examinationStatus == 2) {
        type = '已结束'
      }
      let startTime = item.startTime ? item.startTime : '--'
      let endTime = item.endTime ? item.endTime : '--'
      let percentOfPass = Math.round((item.percentOfPass * 100 * 100)) / 100 + "%";
      data.push({ ...item, type, startTime, endTime, percentOfPass })
    }
    // console.log(data)
    let tableTitle = `考试情况列表`
    exportXlsx(title, data, tableTitle, tableTitle + '.xlsx');
  }).finally(() => {
    loadingShow.value = false
  })

};
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 0 0 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        margin-right: 10px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}




.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

.query-flex {
  display: flex;
  justify-content: space-between;

  .query-section {

    width: 68%;
  }

  .query-btn {
    width: 360px;
    display: flex;
    justify-content: end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
