<template>
  <div class="app-container">
    <div class="box">
      <div class="filter">
        <el-form :model="form" ref="formRef" :inline="true">
          <el-form-item label="班级" :prop="form.classId">
            <el-select
              v-model="form.classId"
              placeholder="请选择班级"
              style="width: 200px"
              @change="changeClass"
            >
              <el-option
                v-for="op in classOption"
                :key="op.id"
                :label="op.className"
                :value="op.id"
              /> </el-select
          ></el-form-item>
          <el-form-item v-if="form.classId">
            <el-button type="primary" @click="clickAddCheck"
              >添加检测</el-button
            >
            <el-button type="primary" @click="onLock(0)">锁定</el-button>
            <el-button type="primary" @click="onLock(1)">解锁</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格 -->
    <Table :xbTable="xbTable" @tablePageChange="handleTablePageChange">
      <template v-slot:score="scope">
        <span
          :style="{
            color: getScoreColor(scope.row.correctRate * 100),
          }"
        >
          {{ scope.row.correctNum }}&nbsp;/&nbsp;{{ scope.row.correctRate }}%
        </span>
      </template>
      <template v-slot:status="scope">
        <span
          :style="{ color: scope.row.status === 0 ? '#67c23a' : '#f56c6c' }"
        >
          {{ scope.row.status === 0 ? "进行中" : "已结束" }}</span
        >
      </template>
      <template v-slot:operation="scope">
        <el-button
          link
          type="primary"
          icon="View"
          @click="handleView(scope.row)"
          >查看</el-button
        >
      </template>
    </Table>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import {
  getClassList,
  addClassDetection,
  getClassDetectionList,
  lockDevice,
} from "@/api";
import { useRouter } from "vue-router";
import { getScoreColor } from "@/utils";
import { ElMessage } from "element-plus";

const router = useRouter();
const { proxy } = getCurrentInstance();
const form = ref({
  classId: "",
});
const classOption = ref([]);
const xbTable = ref({
  loading: false,
  columns: [
    { prop: "className", label: "班级" },
    { prop: "stuNum", label: "参与人数" },
    { prop: "errorNum", label: "正确人数", slot: "score" },
    { prop: "createTime", label: "时间" },
    { prop: "status", label: "状态", slot: "status" },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
function changeClass(val) {
  form.value.className = classOption.value.filter(
    (i) => i.id === val
  )[0].className;
}
// 添加
function clickAddCheck() {
  if (!form.value.classId) {
    proxy.$modal.msgError("请选择班级");
    return;
  }
  addClassDetection(form.value).then(async (res) => {
    await init();
    router.push(`/classCheck/checkDetail?id=${xbTable.value.tableData[0].id}`);
  });
}
// 查看
function handleView(row) {
  router.push(`/classCheck/checkDetail?id=${row.id}`);
}
async function init() {
  xbTable.value.loading = true;
  try {
    const res = await getClassDetectionList({ ...xbTable.value.pagination });
    xbTable.value.tableData = res.rows;
    xbTable.value.pagination.total = res.total;
    xbTable.value.loading = false;
  } catch (err) {
    console.log(err);
  }
}
// 表格分页
function handleTablePageChange(val) {
  xbTable.value.pagination.pageSize = val.limit;
  xbTable.value.pagination.pageNum = val.page;
  init();
}
async function initClass() {
  try {
    const res = await getClassList();
    classOption.value = res.data;
    form.value.classId = res.data.length > 0 ? res.data[0].id : "";
    await nextTick();
  } catch (err) {
    console.log(err);
  }
}

async function onLock(type) {
  await lockDevice({ classId: form.value.classId, type });
  ElMessage.success("操作成功");
  init();
}

onMounted(() => {
  initClass();
  init();
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 16px 0 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}
</style>
