<!-- 学时统计 -->
<template>
  <div class="study-hour-card">
    <div class="card-header">
      <span class="card-title">学时统计</span>
      <p class="export-btn" @click="() => {}">
        <i class="el-icon-download"></i> 导出数据
      </p>
    </div>

    <!-- 分组柱状图 -->
    <div class="chart-wrap">
      <div class="chart-legend">
        <span class="leg-item"><i class="dot blue"></i>研究生</span>
        <span class="leg-item"><i class="dot green"></i>本科生</span>
        <span class="leg-item"><i class="dot orange"></i>教职工</span>
      </div>
      <div class="bar-chart">
        <div class="y-axis-label">学时</div>
        <div class="y-axis">
          <span v-for="y in yLabels" :key="y">{{ y }}</span>
        </div>
        <div class="bars-container">
          <div v-for="(g, i) in chartData" :key="i" class="bar-group">
            <div class="bars-triple">
              <div class="single-bar">
                <div class="bar-val">{{ g.graduate }}</div>
                <div class="bar blue" :style="{height: scaleH(g.graduate) + 'px'}"></div>
              </div>
              <div class="single-bar">
                <div class="bar-val">{{ g.undergrad }}</div>
                <div class="bar green" :style="{height: scaleH(g.undergrad) + 'px'}"></div>
              </div>
              <div class="single-bar">
                <div class="bar-val">{{ g.staff }}</div>
                <div class="bar orange" :style="{height: scaleH(g.staff) + 'px'}"></div>
              </div>
            </div>
            <div class="group-label">{{ g.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选 -->
    <div class="filter-row">
      <el-select v-model="filterData.userType" placeholder="用户类型" size="small" clearable style="width:110px">
        <el-option label="研究生" value="graduate" />
        <el-option label="本科生" value="undergrad" />
        <el-option label="教职工" value="staff" />
      </el-select>
      <el-select v-model="filterData.college" placeholder="学院" size="small" clearable style="width:130px">
        <el-option v-for="c in filterData.colleges" :key="c" :label="c" :value="c" />
      </el-select>
      <el-select v-model="filterData.grade" placeholder="年级" size="small" clearable style="width:100px">
        <el-option v-for="g in filterData.grades" :key="g" :label="g" :value="g" />
      </el-select>
      <el-input v-model="filterData.keyword" placeholder="学号/姓名" size="small" prefix-icon="el-icon-search" style="width:130px" clearable />
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border size="small">
      <el-table-column prop="name" label="姓名" width="80" />
      <el-table-column prop="studentId" label="学号" width="120" />
      <el-table-column prop="grade" label="年级" width="80" />
      <el-table-column prop="college" label="所属学院" min-width="140" show-overflow-tooltip />
      <el-table-column prop="y1" label="第一年" width="80" align="center" />
      <el-table-column prop="y2" label="第二年" width="80" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.y2IsBlue ? 'link-blue' : ''">{{ scope.row.y2 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="y3" label="第三年" width="80" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.y3IsBlue ? 'link-blue' : ''">{{ scope.row.y3 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="y4" label="第四年" width="80" align="center" />
      <el-table-column prop="total" label="总时长" width="80" align="center" />
    </el-table>

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

<script>
export default {
  name: 'StudyHourStats',
  data() {
    return {
      filterData: {
        userType: '',
        college: '',
        grade: '',
        keyword: '',
        page: 1,
        colleges: ['化学与化工学院','生命科学学院','物理学院','电气工程学院','材料科学学院','机械工程学院','自动化学院','资源环境学院'],
        grades: ['2017级','2018级','2019级','2020级','2021级','2022级'],
      },
      yLabels: [350, 300, 250, 200, 150, 100, 50, 0],
      chartData: [
        { label: '化学与化工', graduate: 320, undergrad: 180, staff: 95 },
        { label: '生命科学',   graduate: 280, undergrad: 160, staff: 72 },
        { label: '物理',       graduate: 240, undergrad: 145, staff: 68 },
        { label: '电气工程',   graduate: 300, undergrad: 195, staff: 85 },
        { label: '材料科学',   graduate: 220, undergrad: 135, staff: 60 },
        { label: '机械工程',   graduate: 195, undergrad: 170, staff: 55 },
        { label: '自动化',     graduate: 180, undergrad: 120, staff: 48 },
        { label: '资源环境',   graduate: 165, undergrad: 110, staff: 52 },
      ],
      tableData: [
        { name: '赵丽华', studentId: 'T2018056',   grade: '2018级', college: '化学与化工学院', y1: 4,   y2: 2.5, y2IsBlue: false, y3: 1.8, y3IsBlue: true,  y4: 0,   total: 8.3 },
        { name: '刘佳琪', studentId: '2022200089',  grade: '2022级', college: '材料科学学院',   y1: 4,   y2: 1.2, y2IsBlue: false, y3: 0.8, y3IsBlue: false, y4: 0,   total: 6 },
        { name: '王建军', studentId: 'T2020012',   grade: '2020级', college: '物理学院',       y1: 4,   y2: 1.5, y2IsBlue: false, y3: 0,   y3IsBlue: false, y4: 0,   total: 5.5 },
        { name: '陈小红', studentId: '2021200134',  grade: '2021级', college: '生命科学学院',   y1: 4,   y2: 1.8, y2IsBlue: false, y3: 1.5, y3IsBlue: true,  y4: 0.8, total: 8.1 },
        { name: '张伟',   studentId: 'T2019033',   grade: '2019级', college: '电气工程学院',   y1: 4,   y2: 2,   y2IsBlue: false, y3: 1.2, y3IsBlue: true,  y4: 0,   total: 7.2 },
        { name: '李明',   studentId: '2022200201',  grade: '2022级', college: '机械工程学院',   y1: 4,   y2: 0.8, y2IsBlue: false, y3: 0,   y3IsBlue: false, y4: 0,   total: 4.8 },
        { name: '周芳',   studentId: 'T2017045',   grade: '2017级', college: '化学与化工学院', y1: 4,   y2: 2.2, y2IsBlue: false, y3: 1.8, y3IsBlue: false, y4: 1.5, total: 9.5 },
        { name: '吴强',   studentId: '2021200089',  grade: '2021级', college: '自动化学院',     y1: 4,   y2: 1.5, y2IsBlue: false, y3: 1.2, y3IsBlue: true,  y4: 0.5, total: 7.2 },
      ]
    }
  },
  methods: {
    scaleH(val) {
      return Math.round(val / 350 * 200)
    }
  }
}
</script>

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

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .card-title { font-size: 16px; font-weight: 700; color: #222; }
  }

  .export-btn {
    display: inline-block;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    background-color: #0183fa;
    color: #fff;
    border: 1px solid #0183fa;
  }

  .chart-wrap {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 16px 20px 30px;
    margin-bottom: 16px;

    .chart-legend {
      display: flex;
      gap: 20px;
      margin-bottom: 8px;
      font-size: 12px;
      color: #555;
      justify-content: center;
      .leg-item { display: flex; align-items: center; gap: 4px; }
    }

    .bar-chart {
      display: flex;
      gap: 4px;
      align-items: flex-end;
      position: relative;

      .y-axis-label {
        font-size: 11px;
        color: #aaa;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        position: absolute;
        left: -14px;
        top: 0;
        height: 220px;
        display: flex;
        align-items: center;
      }

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

      .bars-container {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 220px;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 8px 24px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0; right: 0; top: 0; bottom: 24px;
          background: repeating-linear-gradient(to bottom, #f5f5f5 0, #f5f5f5 1px, transparent 1px, transparent calc(100% / 7));
          pointer-events: none;
        }

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

          .bars-triple {
            display: flex;
            gap: 2px;
            align-items: flex-end;

            .single-bar {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2px;

              .bar-val {
                font-size: 9px;
                color: #333;
                font-weight: 600;
              }

              .bar {
                width: 14px;
                border-radius: 2px 2px 0 0;
                &.blue   { background: #5b9cf6; }
                &.green  { background: #4fbe7e; }
                &.orange { background: #f59e42; }
              }
            }
          }

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

  .filter-row {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .link-blue { color: #409eff; }

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

  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    &.blue   { background: #5b9cf6; }
    &.green  { background: #4fbe7e; }
    &.orange { background: #f59e42; }
  }
}
</style>
