<!-- 实验室管与人员图 -->
<template>
  <div class="safety-person-card">
    <div class="section-header">
      <span class="section-title">实验室管与人员图</span>
      <div class="header-right">
        <el-button size="mini" type="primary">实验室管理下载</el-button>
        <el-button size="mini" type="success">实验室人员下载</el-button>
      </div>
    </div>

    <!-- 柱状图 -->
    <div class="chart-area">
      <div class="chart-legend">
        <span class="legend-item"><i class="dot orange"></i>实验室管理</span>
        <span class="legend-item"><i class="dot blue"></i>实验室人员</span>
      </div>
      <div class="bar-chart">
        <div class="y-axis">
          <span v-for="y in [500, 400, 300, 200, 100, 0]" :key="y">{{ y }}</span>
        </div>
        <div class="bars-wrap">
          <div v-for="(g, i) in chartData.groups" :key="i" class="bar-group">
            <div class="bars-pair">
              <div class="bar orange" :style="{height: (g.v1 / 500 * 160) + 'px'}" :title="g.v1"></div>
              <div class="bar blue" :style="{height: (g.v2 / 500 * 160) + 'px'}" :title="g.v2"></div>
            </div>
            <div class="group-label">{{ g.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 汇总表格 -->
    <el-table :data="chartData.tableData" border size="small" stripe>
      <el-table-column prop="category" label="分类" min-width="140" show-overflow-tooltip />
      <el-table-column prop="y1" label="第1学年" width="80" align="center" />
      <el-table-column prop="y2" label="第2学年" width="80" align="center" />
      <el-table-column prop="y3" label="第3学年" width="80" align="center" />
      <el-table-column prop="y4" label="第4学年" width="80" align="center" />
      <el-table-column prop="y5" label="第5学年" width="80" align="center" />
      <el-table-column prop="y6" label="第6学年" width="80" align="center" />
      <el-table-column prop="sum" label="合计" width="80" align="center">
        <template slot-scope="scope">
          <b>{{ scope.row.sum }}</b>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SafetyPersonChart',
  data() {
    return {
      chartData: {
        groups: [
          { label: '博（一年级）', v1: 60, v2: 100 },
          { label: '博（二年级）', v1: 80, v2: 120 },
          { label: '硕（一年级）', v1: 250, v2: 320 },
          { label: '硕（二年级）', v1: 200, v2: 280 },
          { label: '硕（三年级）', v1: 40, v2: 60 },
        ],
        tableData: [
          { category: '化学与化工学院', y1: 10, y2: 20, y3: 30, y4: 0, y5: 0, y6: 0, sum: 60 },
          { category: '生命科学与技术学院', y1: 15, y2: 25, y3: 20, y4: 10, y5: 0, y6: 0, sum: 70 },
          { category: '环境科学与工程学院', y1: 8, y2: 12, y3: 15, y4: 5, y5: 0, y6: 0, sum: 40 },
          { category: '电气/工程学院', y1: 20, y2: 30, y3: 25, y4: 15, y5: 5, y6: 0, sum: 95 },
          { category: '物理学院', y1: 12, y2: 18, y3: 20, y4: 8, y5: 2, y6: 0, sum: 60 },
          { category: '材料科学与工程学院', y1: 10, y2: 15, y3: 18, y4: 7, y5: 0, y6: 0, sum: 50 },
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.safety-person-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; gap: 10px; }
  }

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

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

    .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: 180px;
        min-width: 32px;
        text-align: right;
        padding-bottom: 22px;
      }

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

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

          .bars-pair {
            display: flex;
            gap: 3px;
            align-items: flex-end;

            .bar {
              width: 16px;
              border-radius: 2px 2px 0 0;
              &.orange { background: #f59e42; }
              &.blue { background: #4e9cf6; }
            }
          }

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

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