<template>
  <MOSTY.PageTree :pageTitle="'在线考试列表'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <section class="eltab7">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" style="width: 100%;">
          <template #examState="{ row }">
            <dict-tag :options="D_BZ_KSZT" :value="row.examState" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="handleShow(row)"><el-icon>
                <Compass />
              </el-icon>我的考试记录</span>
            <span class="operedit" @click="goExam(row)"
              v-if="row.examState == '0' && (row.kcjcs > row.examCount || row.examCount == 0)"><el-icon>
                <EditPen />
              </el-icon>参加考试</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="searchobj" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

  <!-- 我的考试记录 -->
  <MyExamRecord v-if="qwjcxqShow" @changeVi2="changeVi2" :examObj="examObj" :listId="listId" />
  <!--  在线考试 -->
  <exam v-if="examShow" @changeVi3="changeVi3" :examObj="examObj" :listId="listId" :id="id" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, onMounted, getCurrentInstance, nextTick, reactive } from "vue";
import MyExamRecord from "@/views/safety/components/myExamRecord.vue";
import exam from "@/views/safety/components/exam.vue";
import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_KSZT, D_TB_YWLX, D_BZ_ABCD } = proxy.$dict("D_BZ_KSZT", "D_TB_YWLX", "D_BZ_ABCD");
const total = ref(0);
const qwjcxqShow = ref(false);
const examObj = ref({})
const searchArr = reactive([
  {
    showType: "select",
    prop: "type",
    width: '250px',
    options: [
      { label: "已参加", value: "1" },
      { label: "未参加", value: "0" }
    ],
    placeholder: '请选择考试状态'
  }, {
    showType: "date",
    prop: "startTime",
    width: '250px',
    placeholder: '开始时间'
  }, {
    showType: "date",
    prop: "endTime",
    width: '250px',
    placeholder: '结束时间'
  }
])
const tableColumn = reactive([
  {
    title: "试卷名",
    prop: "name"
  },
  {
    title: "开始时间",
    prop: "startTime"
  },
  {
    title: "结束时间",
    prop: "endTime"
  },
  {
    title: "总考试时间",
    prop: "examTime"
  },
  {
    title: "试卷总分",
    prop: "examScore"
  },
  {
    title: "考试次数",
    prop: "examCount"
  },
  {
    title: "试卷状态",
    prop: "examState",
    slot: true
  }
  ,
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
// 考试弹窗
const examShow = ref(false);
// 表格数据
const tableData = ref([]);
const searchobj = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});

const totalHeights = ref(null)
const isOpen = ref(false);

const listId = ref(null)
const id = ref(null)
//查询
function onSearch(obj) {
  searchobj.value.type = obj.type;
  searchobj.value.startTime = obj.startTime;
  searchobj.value.endTime = obj.endTime;
  searchobj.value.pageCurrent = 1
  getTableData();
}
// 初始化
onMounted(() => {
  getTableData();
  nextTick(() => {
    totalHeights.value = `calc(100vh - 373px)`
  })
});
// 关闭考试详情
const changeVi2 = (val) => {
  qwjcxqShow.value = val;
  examShow.value = val;
};
// 关闭考试详情
const changeVi3 = (val) => {
  examShow.value = val;
  getTableData()
};
// 查看考试详情
function handleShow(row) {
  examObj.value = row
  listId.value = row.id;
  qwjcxqShow.value = true;
}
// 参加考试
function goExam(row) {
  examObj.value = row
  // 计算考试时间
  let flag = false
  if (!row.startTime || !row.endTime) {
    flag = true
  }
  if (new Date(row.endTime).getTime() > new Date().getTime()) {
    flag = true
  }
  if (flag) {
    examShow.value = true;
    listId.value = row.examId;
    id.value = row.paperId;
  } else {
    ElMessage.error('该试卷已结束考试！');
  }
}
//获取查询考题列表
function getTableData() {
  getApi(searchobj.value, "/mosty-jcgl/paper/getExamPaperPerson").then((res) => {
    if (res) {
      searchobj.value.total = res.total;
      tableData.value = res.records;
    }
  });
}
//页码发生变化
const handleCurrentChange = (val) => {
  searchobj.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  searchobj.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped></style>
