<!-- 表格里的管理弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.qwjcxqShow" title="我的考试记录" width="1300px" draggable :before-close="handleClose">
      <template #default>
        <div class="tabBox">
          <el-table :data="tableData" border stripe>
            <el-table-column label="标题">
              <template #default="{ row }">
                第{{ row.examCount + 1 }}次考试
              </template>
            </el-table-column>
            <el-table-column property="startTime" label="考试开始时间" />
            <el-table-column property="endTime" label="考试结束时间" />
            <el-table-column property="examTime" label="考时（分）" />
            <el-table-column property="examErrorCount" label="错题数量" />
            <el-table-column property="examScore" label="得分" />
            <el-table-column label="操作">
              <template #default="{ row }">
                <span class="operedit" v-if="row.sfckct == '1' && row.examErrorCount > 0"
                  @click="errorExam(row)"><el-icon>
                    <Failed />
                  </el-icon>错题练习</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template #footer>
        <div @click="handleClose">
          <el-button type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--  在线考试 -->
    <ErrorExam v-if="errorExamShow" @changeVi3="changeVi3" :resultId="resultId" :examId="examId" :examObj="examObj" />
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import ErrorExam from "@/views/safety/components/errorExam.vue";
const errorExamShow = ref(false)
// 数据
const props = defineProps({
  qwjcxqShow: {
    type: Boolean,
    default: true
  },
  examObj: {
    type: Object,
    default: {}
  },
  listId: {
    type: String,
    default: ""
  },
});
const examObj = ref({})
const emits = defineEmits(["changeVi2"]);
const tableData = ref([]);
const resultId = ref('')
const examId = ref('')
// 初始化
onMounted(() => {

  // 获取考试详情列表
  getData(props.listId);
});
const changeVi3 = (val) => {
  errorExamShow.value = val;
}
// 错题练习
const errorExam = (row) => {
  examObj.value = row
  examObj.value.name = props.examObj.name
  resultId.value = row.id
  examId.value = row.examId
  errorExamShow.value = true
}
// 关闭
const handleClose = () => {
  emits("changeVi2", false);
};
// 获取考试详情列表
const getData = (id) => {
  getApi({ id: id }, "/mosty-jcgl/paper/getPersonInfo").then(
    (res) => {
      tableData.value = res;
    }
  );
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 550px !important;
}

.el-table {
  border-left: 1px solid green;
  border-right: 1px solid green;

  height: 85%;
}

.fenye {
  top: 87%;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>