<template>
  <div class="home-guide">
    <div class="guide-container">
      <!-- 第一行 -->
      <div class="guide-row">
        <div class="guide-card">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-system-init-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">系统初始化</h3>
          </div>
          <div class="card-content">
            <div class="menu-item" @click="toPage('ExamManage')">
              <span>考试设置</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-box">
              <div class="menu-item" @click="toPage('StudentManage')">
                <span>考生导入</span>
                <div class="arrow-right"></div>
              </div>
              <div class="menu-body">
                <span>考生：</span>
                <span class="number orange" style="margin-right: 15px"
                  >124490</span
                >
                <span>科目：</span>
                <span class="number orange">98</span>
              </div>
            </div>
            <div class="menu-item" @click="toPage('SubjectManage')">
              <span>试卷结构设置</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('UserManage')">
              <span>用户账号设置</span>
              <div class="arrow-right"></div>
            </div>
          </div>
        </div>
        <div class="connection-arrow right"></div>

        <div class="guide-card guide-mark">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-mark-manage-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">评卷管理</h3>
          </div>
          <div class="card-content">
            <div class="guide-branch"></div>
            <div class="guide-line"></div>

            <div class="mark-step">
              <div class="step-title">评卷过程管理</div>
              <div class="step-content">
                <div class="menu-item" @click="toPage('MarkProgress')">
                  <span>评卷进度</span>
                  <div class="arrow-right"></div>
                </div>
                <div class="menu-item" @click="toPage('GroupManage')">
                  <span>分组设置修改</span>
                  <div class="arrow-right"></div>
                </div>
                <div class="menu-item" @click="toPage('TaskManage')">
                  <span>已评任务查看</span>
                  <div class="arrow-right"></div>
                </div>
              </div>
            </div>

            <div class="mark-step">
              <div class="step-title">数据分析</div>
              <div class="step-content">
                <div class="menu-item" @click="toPage('AnalysisManage')">
                  <span>科目分析</span>
                  <div class="arrow-right"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="connection-arrow right"></div>

        <div class="guide-card">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-warning-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">异常卷处理</h3>
          </div>
          <div class="card-content">
            <div class="menu-item" @click="toPage('RejectManage')">
              <span>打回卷处理</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('IssuePaper')">
              <span>问题卷处理</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('ArbitrationManage')">
              <span>仲裁卷处理</span>
              <div class="arrow-right"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="connection-arrow bottom row-arrow"></div>

      <!-- 第二行 -->
      <div class="guide-row">
        <div class="guide-card">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-score-view-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">成绩复查</h3>
          </div>
          <div class="card-content">
            <div class="menu-item" @click="toPage('ExamManage')">
              <span>关闭考试</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('AllReview')">
              <span>导入待复查考生</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('AllReview')">
              <span>进入复核</span>
              <div class="arrow-right"></div>
            </div>
          </div>
        </div>

        <div class="connection-arrow left"></div>

        <div class="guide-card guide-score">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-score-export-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">成绩导出</h3>
          </div>
          <div class="card-content">
            <div class="process-step">
              <div class="step-number">1</div>
              <div class="menu-item" @click="toPage('ManualConfirm')">
                <span>数据检查 - 人工确认</span>
                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
                <div class="arrow-right"></div>
              </div>
            </div>
            <div class="process-step">
              <div class="step-number">2</div>
              <div class="menu-item" @click="toPage('MarkProgress')">
                <span>检查科目进度100%且关闭</span>
                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
                <div class="arrow-right"></div>
              </div>
            </div>
            <div class="process-step">
              <div class="step-number">3</div>
              <div class="menu-item" @click="toPage('StudentManage')">
                <span>缺考考生导入</span>
                <el-icon class="status-icon success"><SuccessFilled /></el-icon>
                <div class="arrow-right"></div>
              </div>
            </div>
            <div class="menu-item" @click="toPage('ScoreQuery')">
              <span>成绩导出</span>
              <div class="arrow-right"></div>
            </div>
          </div>
        </div>
        <div class="connection-arrow left"></div>

        <div class="guide-card">
          <div class="card-header">
            <div class="card-icon">
              <svg-icon name="icon-review-s" :inherit-color="false" />
            </div>
            <h3 class="card-title">复核处理</h3>
          </div>
          <div class="card-content">
            <div class="menu-item" @click="toPage('TaskReview')">
              <span>任务复核</span>
              <div class="arrow-right"></div>
            </div>
            <div class="menu-item" @click="toPage('AllReview')">
              <span>全卷复核</span>
              <div class="arrow-right"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineOptions } from 'vue';
  import { SuccessFilled } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';

  defineOptions({
    name: 'HomeGuide',
  });

  const router = useRouter();

  function toPage(val: string) {
    router.push({
      name: val,
    });
  }
</script>
