<!-- 学期统计 -->
<template>
  <div class="student-stats-card">
    <div class="section-header">
      <span class="section-title">学期统计</span>
      <el-button size="mini" type="primary" icon="el-icon-download">下载统计</el-button>
    </div>

    <!-- 柱状图 -->
    <div class="chart-area">
      <div class="chart-legend">
        <span class="legend-item"><i class="dot green"></i>完成</span>
        <span class="legend-item"><i class="dot blue"></i>进行中</span>
        <span class="legend-item"><i class="dot yellow"></i>未开始</span>
        <span class="legend-item"><i class="dot gray"></i>其他</span>
      </div>
      <div class="bar-chart">
        <div class="y-axis">
          <span v-for="y in [100, 80, 60, 40, 20, 0]" :key="y">{{ y }}</span>
        </div>
        <div class="bars-container">
          <div v-for="(col, i) in statsData.chartCols" :key="i" class="chart-col">
            <div class="stacked-bar">
              <div class="seg gray"   :style="{height: col.other * 1.2 + 'px'}"></div>
              <div class="seg yellow" :style="{height: col.notStart * 1.2 + 'px'}"></div>
              <div class="seg blue"   :style="{height: col.pending * 1.2 + 'px'}"></div>
              <div class="seg green"  :style="{height: col.done * 1.2 + 'px'}"></div>
            </div>
            <div class="col-label">{{ col.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计表格 -->
    <el-table :data="statsData.tableData" border size="small" stripe>
      <el-table-column prop="name" label="姓名" width="70" />
      <el-table-column prop="userId" label="用户编号" width="100" />
      <el-table-column prop="dept" label="部门" min-width="100" show-overflow-tooltip />
      <el-table-column prop="eduName" label="安全教育名称" min-width="150" show-overflow-tooltip />
      <el-table-column prop="term1" label="第1学期" width="80" align="center" />
      <el-table-column prop="term2" label="第2学期" width="80" align="center" />
      <el-table-column prop="term3" label="第3学期" width="80" align="center" />
      <el-table-column prop="term4" label="第4学期" width="80" align="center" />
      <el-table-column prop="total" label="总计" width="80" align="center">
        <template slot-scope="scope">
          <b>{{ scope.row.total }}</b>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrap">
      <el-pagination
        :current-page.sync="statsData.page"
        :page-size="10"
        :total="statsData.total"
        layout="prev, pager, next"
        background
        small
      />
    </div>
  </div>
</template>

<script>
const mockRow = (n) => ({
  name: '姓名',
  userId: `2025000${String(n).padStart(2, '0')}`,
  dept: '部门单位',
  eduName: '安全教育名称',
  term1: Math.floor(Math.random() * 15) + 5,
  term2: Math.floor(Math.random() * 15) + 5,
  term3: Math.floor(Math.random() * 10),
  term4: Math.floor(Math.random() * 10),
  get total() { return this.term1 + this.term2 + this.term3 + this.term4 }
})

export default {
  name: 'StudentStats',
  data() {
    return {
      statsData: {
        page: 1,
        total: 50,
        chartCols: [
          { label: '总览', done: 60, pending: 20, notStart: 10, other: 5 },
          { label: '生物类', done: 50, pending: 30, notStart: 12, other: 3 },
          { label: '辐射类', done: 70, pending: 15, notStart: 8, other: 2 },
          { label: '化学', done: 40, pending: 35, notStart: 15, other: 5 },
          { label: '科目类', done: 55, pending: 25, notStart: 10, other: 4 },
          { label: '电气类', done: 65, pending: 20, notStart: 8, other: 3 },
          { label: '物理类', done: 45, pending: 30, notStart: 14, other: 6 },
          { label: '材料类', done: 75, pending: 12, notStart: 6, other: 2 },
        ],
        tableData: Array.from({ length: 8 }, (_, i) => mockRow(i + 1))
      }
    }
  }
}
</script>

<style scoped lang="scss">
.student-stats-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; }
  }

  .chart-area {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;

    .chart-legend {
      display: flex;
      gap: 20px;
      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;

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

      .bars-container {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 160px;
        border-left: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 8px 22px;

        .chart-col {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;

          .stacked-bar {
            display: flex;
            flex-direction: column;
            width: 22px;
            gap: 1px;

            .seg {
              width: 100%;
              border-radius: 1px;
              &.green  { background: #67c23a; }
              &.blue   { background: #409eff; }
              &.yellow { background: #e6a23c; }
              &.gray   { background: #c0c4cc; }
            }
          }

          .col-label {
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #666;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
  }

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