<template>
  <div class="home audit">
    <div class="home-head">
      <div>
        <a-space v-if="userStore.curExam" :size="6">
          <span class="head-no">No.{{ userStore.curExam.id }}</span>
          <a-tag class="head-mode" color="blue"
            >{{ userStore.curExam.mode }}模式</a-tag
          >
          <h3 class="head-name">{{ userStore.curExam.name }}</h3>
        </a-space>
      </div>
      <div>
        <a-button @click="onSwitchExam">
          <template #icon><SwapOutlined /></template>切换考试
        </a-button>
      </div>
    </div>
    <div class="home-body">
      <div class="audit-box">
        <div class="audit-box-head">
          <h4>实时审核</h4>
        </div>
        <div class="audit-box-body">
          <div class="audit-card">
            <div class="audit-card-icon audit-wait"></div>
            <div class="audit-card-content">
              <p>待审核</p>
              <p>1</p>
            </div>
            <div class="audit-card-action">进入 <RightOutlined /></div>
          </div>
        </div>
      </div>

      <div class="audit-box">
        <div class="audit-box-head">
          <h4>人工绑定审核</h4>
        </div>
        <div class="audit-box-body">
          <div class="audit-card">
            <div class="audit-card-icon audit-wait"></div>
            <div class="audit-card-content">
              <p>待审核</p>
              <p>1</p>
            </div>
            <div class="audit-card-action">进入 <RightOutlined /></div>
          </div>
        </div>
      </div>

      <div class="audit-box img-check">
        <div class="audit-box-head">
          <h4>图片检查</h4>
        </div>
        <div class="audit-box-body">
          <div class="audit-card">
            <div class="audit-card-icon audit-done"></div>
            <div class="audit-card-content">
              <p>已审核</p>
              <p>1</p>
            </div>
          </div>

          <div class="audit-card">
            <div class="audit-card-icon audit-wait"></div>
            <div class="audit-card-content">
              <p>待审核</p>
              <p>1</p>
            </div>
            <div class="audit-card-action">进入 <RightOutlined /></div>
          </div>
        </div>
        <div class="audit-box-foot">
          <a-tag :bordered="false">
            <template #icon><PieChartFilled /></template>抽查比例：0%
          </a-tag>
          <a-space :size="8">
            <span>轮播时间配置:</span>
            <a-input></a-input>
            <span>秒/张</span>
            <a-button type="primary">设置</a-button>
          </a-space>
        </div>
      </div>
    </div>
  </div>

  <!-- SelectExamDialog -->
  <SelectExamDialog ref="selectExamDialogRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  SwapOutlined,
  RightOutlined,
  PieChartFilled,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import SelectExamDialog from "./SelectExamDialog.vue";

defineOptions({
  name: "Audit",
});

const router = useRouter();
const userStore = useUserStore();

function toPage(name: string) {
  router.push({ name });
}

const selectExamDialogRef = ref();
function onSwitchExam() {
  selectExamDialogRef.value?.open();
}
</script>
