<!-- 安监室/实验室安全分布表 + 考试成绩统计 -->
<template>
  <div class="exam-stats-wrap">

    <!-- 安监室安全分布表 -->
    <div class="section-card">
      <div class="section-header">
        <span class="section-title">安监室安全分布表</span>
        <div class="header-right">
          <el-radio-group v-model="tableFilter.safetyPeriod" size="mini">
            <el-radio-button label="年">年</el-radio-button>
            <el-radio-button label="季度">季度</el-radio-button>
            <el-radio-button label="月">月</el-radio-button>
          </el-radio-group>
          <el-button size="mini" type="primary" icon="el-icon-download">下载</el-button>
        </div>
      </div>
      <el-table :data="tableData.safetyTable" border size="small" stripe>
        <el-table-column prop="name" label="姓名" width="70" />
        <el-table-column prop="dept" label="部门单位" min-width="100" show-overflow-tooltip />
        <el-table-column prop="userId" label="用户编号" width="100" />
        <el-table-column prop="eduTitle" label="安全教育名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="subject" label="科目" width="60" />
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '完成' ? 'success' : 'warning'" size="mini" effect="plain">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="负责人" width="70" />
        <el-table-column prop="startDate" label="开始时间" width="140" />
        <el-table-column prop="endDate" label="截止时间" width="140" />
        <el-table-column prop="score" label="成绩" width="60" align="center" />
        <el-table-column label="操作" width="170" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain>查看</el-button>
            <el-button size="mini" :type="scope.row.status === '完成' ? 'success' : 'warning'" plain>
              {{ scope.row.status === '完成' ? '重考' : '考试' }}
            </el-button>
            <el-button size="mini" type="danger" plain>提醒</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 实验室安全分布表 -->
    <div class="section-card">
      <div class="section-header">
        <span class="section-title">实验室安全分布表</span>
        <div class="header-right">
          <el-radio-group v-model="tableFilter.labPeriod" size="mini">
            <el-radio-button label="年">年</el-radio-button>
            <el-radio-button label="季度">季度</el-radio-button>
            <el-radio-button label="月">月</el-radio-button>
          </el-radio-group>
          <el-button size="mini" type="primary" icon="el-icon-download">下载</el-button>
        </div>
      </div>
      <el-table :data="tableData.labTable" border size="small" stripe>
        <el-table-column prop="name" label="姓名" width="70" />
        <el-table-column prop="dept" label="部门单位" min-width="100" show-overflow-tooltip />
        <el-table-column prop="userId" label="用户编号" width="100" />
        <el-table-column prop="eduTitle" label="安全教育名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="subject" label="科目" width="60" />
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '完成' ? 'success' : 'warning'" size="mini" effect="plain">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="person" label="负责人" width="70" />
        <el-table-column prop="startDate" label="开始时间" width="140" />
        <el-table-column prop="endDate" label="截止时间" width="140" />
        <el-table-column prop="score" label="成绩" width="60" align="center" />
        <el-table-column label="操作" width="170" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain>查看</el-button>
            <el-button size="mini" :type="scope.row.status === '完成' ? 'success' : 'warning'" plain>
              {{ scope.row.status === '完成' ? '重考' : '考试' }}
            </el-button>
            <el-button size="mini" type="danger" plain>提醒</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 考试成绩统计 -->
    <div class="section-card">
      <div class="section-header">
        <span class="section-title">考试成绩统计</span>
        <div class="header-right">
          <el-select v-model="tableFilter.statsYear" size="mini" style="width:150px">
            <el-option label="2025-2026 学年" value="2025-2026" />
            <el-option label="2024-2025 学年" value="2024-2025" />
          </el-select>
          <el-radio-group v-model="tableFilter.statsPeriod" size="mini">
            <el-radio-button label="季度">季度</el-radio-button>
            <el-radio-button label="月">月</el-radio-button>
          </el-radio-group>
          <el-button size="mini" type="primary" icon="el-icon-download">下载</el-button>
        </div>
      </div>

      <div class="chart-row">
        <!-- 柱状图 -->
        <div class="bar-chart-area">
          <div class="chart-legend">
            <span class="legend-item"><i class="dot green"></i>优秀 ≥90</span>
            <span class="legend-item"><i class="dot blue"></i>良好 60-89</span>
            <span class="legend-item"><i class="dot red"></i>不及格 &lt;60</span>
            <span class="legend-item"><i class="dot gray"></i>未考</span>
          </div>
          <div class="bar-chart">
            <div class="y-labels">
              <span v-for="y in [100, 80, 60, 40, 20, 0]" :key="y">{{ y }}</span>
            </div>
            <div class="bars-container">
              <div v-for="(g, i) in chartData.barGroups" :key="i" class="bar-group">
                <div class="bar-stack">
                  <div class="seg green" :style="{height: g.excellent + 'px'}"></div>
                  <div class="seg blue" :style="{height: g.good + 'px'}"></div>
                  <div class="seg red" :style="{height: g.fail + 'px'}"></div>
                </div>
                <div class="bar-label">{{ g.label }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 饼图 -->
        <div class="pie-chart-area">
          <div class="pie-wrap">
            <svg viewBox="0 0 100 100" width="130" height="130">
              <circle cx="50" cy="50" r="35" fill="none" stroke="#67c23a" stroke-width="30" stroke-dasharray="132 220" stroke-dashoffset="0" transform="rotate(-90 50 50)" />
              <circle cx="50" cy="50" r="35" fill="none" stroke="#409eff" stroke-width="30" stroke-dasharray="66 220" stroke-dashoffset="-132" transform="rotate(-90 50 50)" />
              <circle cx="50" cy="50" r="35" fill="none" stroke="#f56c6c" stroke-width="30" stroke-dasharray="22 220" stroke-dashoffset="-198" transform="rotate(-90 50 50)" />
              <circle cx="50" cy="50" r="20" fill="#fff" />
            </svg>
          </div>
          <div class="pie-legend">
            <div class="p-item"><i class="dot green"></i><span>优秀 ≥90</span></div>
            <div class="p-item"><i class="dot blue"></i><span>良好 60-89</span></div>
            <div class="p-item"><i class="dot red"></i><span>不及格 &lt;60</span></div>
          </div>
        </div>
      </div>

      <!-- 统计表格 -->
      <el-table :data="chartData.statsTable" border size="small" stripe>
        <el-table-column prop="category" label="分类" min-width="120" />
        <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
        <el-table-column prop="total" label="参加人数" width="90" align="center" />
        <el-table-column prop="excellent" label="优秀" width="70" align="center" />
        <el-table-column prop="good" label="良好" width="70" align="center" />
        <el-table-column prop="fail" label="不及格" width="80" align="center" />
        <el-table-column prop="rate" label="通过率" width="80" align="center" />
      </el-table>
    </div>

  </div>
</template>

<script>
const mockTableRow = (n) => ({
  name: '姓名',
  dept: `部门单位名称${n}`,
  userId: `2025000${String(n).padStart(2, '0')}`,
  eduTitle: '高校宝安全教育培训与考核内容',
  subject: '无',
  status: n % 3 !== 0 ? '完成' : '待完成',
  person: '负责人',
  startDate: '2026-04-28 16:30',
  endDate: '2026-05-28 16:30',
  score: n % 3 !== 0 ? String(70 + n * 3) : '--'
})

export default {
  name: 'ExamStatsCard',
  data() {
    return {
      tableFilter: {
        safetyPeriod: '年',
        labPeriod: '年',
        statsYear: '2025-2026',
        statsPeriod: '季度',
      },
      tableData: {
        safetyTable: Array.from({ length: 6 }, (_, i) => mockTableRow(i + 1)),
        labTable: Array.from({ length: 6 }, (_, i) => mockTableRow(i + 1)),
      },
      chartData: {
        barGroups: [
          { label: '生物类', excellent: 60, good: 40, fail: 15 },
          { label: '辐射类', excellent: 80, good: 30, fail: 10 },
          { label: '化学', excellent: 50, good: 50, fail: 20 },
          { label: '总览', excellent: 90, good: 35, fail: 8 },
          { label: '科目', excellent: 40, good: 60, fail: 25 },
          { label: '生物类', excellent: 70, good: 45, fail: 12 },
          { label: '辐射类', excellent: 55, good: 55, fail: 18 },
          { label: '化学', excellent: 65, good: 38, fail: 14 },
        ],
        statsTable: [
          { category: '安全教育', name: '安全教育名称一', total: 25, excellent: 10, good: 12, fail: 3, rate: '88%' },
          { category: '安全教育', name: '安全教育名称二', total: 30, excellent: 15, good: 12, fail: 3, rate: '90%' },
          { category: '实验室安全', name: '实验室安全名称', total: 20, excellent: 8, good: 9, fail: 3, rate: '85%' },
          { category: '化学实验', name: '化学实验名称', total: 18, excellent: 7, good: 8, fail: 3, rate: '83%' },
          { category: '辐射安全', name: '辐射安全名称', total: 22, excellent: 9, good: 10, fail: 3, rate: '86%' },
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.exam-stats-wrap {
  .section-card {
    background: #fff;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;

      .section-title { font-size: 14px; font-weight: 600; color: #333; }
      .header-right { display: flex; align-items: center; gap: 10px; }
    }

    .chart-row {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
      align-items: flex-start;

      .bar-chart-area {
        flex: 1;

        .chart-legend {
          display: flex;
          gap: 16px;
          margin-bottom: 10px;
          font-size: 12px;
          color: #555;
          .legend-item { display: flex; align-items: center; gap: 4px; }
        }

        .bar-chart {
          display: flex;
          gap: 8px;
          align-items: flex-end;
          height: 160px;

          .y-labels {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 11px;
            color: #aaa;
            height: 100%;
            padding-bottom: 20px;
            text-align: right;
            min-width: 28px;
          }

          .bars-container {
            flex: 1;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 100%;
            border-left: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 0 8px 20px;

            .bar-group {
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;

              .bar-stack {
                display: flex;
                flex-direction: column-reverse;
                width: 20px;
                gap: 1px;

                .seg {
                  width: 100%;
                  border-radius: 1px;
                  &.green { background: #67c23a; }
                  &.blue { background: #409eff; }
                  &.red { background: #f56c6c; }
                }
              }

              .bar-label {
                font-size: 10px;
                color: #666;
                margin-top: 4px;
                white-space: nowrap;
              }
            }
          }
        }
      }

      .pie-chart-area {
        width: 220px;
        display: flex;
        align-items: center;
        gap: 16px;
        padding-top: 28px;

        .pie-legend {
          .p-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #555;
            margin-bottom: 8px;
          }
        }
      }
    }
  }

  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    &.green { background: #67c23a; }
    &.blue { background: #409eff; }
    &.red { background: #f56c6c; }
    &.gray { background: #c0c4cc; }
  }
}
</style>
