<!-- 实验室绑定申请 -->
<template>
  <div class="lab-binding-card">
    <div class="card-header">
      <span class="card-title">实验室绑定申请</span>
      <div class="header-right">
        <!-- 分组筛选按钮 -->
        <div class="table-top-button-box">
          <div>
            <p
              v-for="(btn, i) in filterData.statusBtns" :key="btn.value"
              :class="filterData.activeStatus === btn.value ? 'check-table-button' : ''"
              @click="filterData.activeStatus = btn.value"
            >{{ btn.label }}</p>
          </div>
        </div>
      </div>
    </div>

    <el-table :data="filteredData" border size="small" :row-class-name="rowClass">
      <el-table-column prop="applicant" label="申请人" width="80" />
      <el-table-column prop="studentId" label="学号" width="110" />
      <el-table-column prop="userType" label="用户类型" width="100" />
      <el-table-column prop="college" label="所属学院" min-width="120" show-overflow-tooltip />
      <el-table-column prop="lab" label="申请实验室" min-width="160" show-overflow-tooltip />
      <el-table-column prop="level" label="分级" width="70" align="center">
        <template slot-scope="scope">
          <span class="level-tag" :style="{background: getLevelBg(scope.row.level), color: getLevelColor(scope.row.level)}">
            {{ scope.row.level }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类" width="80" />
      <el-table-column prop="reason" label="进入原因" min-width="120" show-overflow-tooltip />
      <el-table-column prop="submitTime" label="提交时间" width="140" />
      <el-table-column prop="passTime" label="通过时间" width="140" />
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <span :class="'status-txt status-' + scope.row.statusCode">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="left">
        <template slot-scope="scope">
          <template v-if="scope.row.statusCode === 'reject'">
            <span class="reject-msg">{{ scope.row.rejectMsg }}</span>
          </template>
          <template v-else-if="scope.row.statusCode === 'pass'">
          </template>
          <template v-else>
            <p class="action-btn btn-pass" @click="() => {}">通过</p>
            <p class="action-btn btn-reject" @click="() => {}">驳回</p>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'LabBindingApply',
  data() {
    return {
      filterData: {
        activeStatus: 'all',
        statusBtns: [
          { label: '全部',   value: 'all' },
          { label: '待审批', value: 'pending' },
          { label: '已通过', value: 'pass' },
          { label: '已驳回', value: 'reject' },
        ]
      },
      tableData: [
        { applicant: '张明远', studentId: '2025100001', userType: '硕士研究生', college: '化学与化工学院', lab: '有机化学实验室（A301）', level: 'Ⅱ', category: '化学类', reason: '', submitTime: '2025-09-02 14:30', passTime: '2025-09-09 14:30', status: '待审批', statusCode: 'pending', rejectMsg: '' },
        { applicant: '赵雨晴', studentId: '2025100023', userType: '硕士研究生', college: '电气工程学院', lab: '电气工程实验室（C102）', level: 'Ⅲ', category: '机电类', reason: '', submitTime: '2025-09-03 09:15', passTime: '2025-09-10 09:15', status: '待审批', statusCode: 'pending', rejectMsg: '' },
        { applicant: '刘芳华', studentId: '2025100078', userType: '硕士研究生', college: '化学与化工学院', lab: '高分子化学实验室（A402）', level: 'Ⅱ', category: '化学类', reason: '', submitTime: '2025-09-01 16:45', passTime: '2025-09-08 16:45', status: '已通过', statusCode: 'pass', rejectMsg: '' },
        { applicant: '王浩然', studentId: '2024100088', userType: '硕士研究生', college: '物理学院', lab: '辐射防护实验室（D401）', level: 'Ⅰ', category: '辐射类', reason: '', submitTime: '2025-08-30 10:20', passTime: '2025-09-06 10:20', status: '已通过', statusCode: 'pass', rejectMsg: '' },
        { applicant: '陈志强', studentId: '2024100056', userType: '硕士研究生', college: '材料科学学院', lab: '材料力学实验室（E203）', level: 'Ⅳ', category: '机电类', reason: '', submitTime: '2025-09-04 11:00', passTime: '2025-09-11 11:00', status: '已驳回', statusCode: 'reject', rejectMsg: '该实验室已满员，请联系系统管理员更换实验室' },
        { applicant: '李佳欣', studentId: '2025200312', userType: '本科生', college: '生命科学学院', lab: '分子生物学实验室（B205）', level: 'Ⅰ', category: '生物类', reason: '毕业论文需要进入该实验...', submitTime: '2025-09-05 08:30', passTime: '2025-09-12 08:30', status: '待审批', statusCode: 'pending', rejectMsg: '' },
        { applicant: '周文博', studentId: '2025100034', userType: '硕士研究生', college: '自动化学院', lab: '智能控制实验室（C305）', level: 'Ⅲ', category: '机电类', reason: '', submitTime: '2025-09-05 15:10', passTime: '2025-09-12 15:10', status: '待审批', statusCode: 'pending', rejectMsg: '' },
        { applicant: '孙晓明', studentId: '2023100091', userType: '硕士研究生', college: '生命科学学院', lab: '微生物学实验室（B308）', level: 'Ⅱ', category: '生物类', reason: '', submitTime: '2025-08-28 13:40', passTime: '2025-09-04 13:40', status: '已通过', statusCode: 'pass', rejectMsg: '' },
      ]
    }
  },
  computed: {
    filteredData() {
      if (this.filterData.activeStatus === 'all') return this.tableData
      return this.tableData.filter(r => r.statusCode === this.filterData.activeStatus)
    }
  },
  methods: {
    getLevelBg(level) {
      return { 'Ⅰ': '#fff0f0', 'Ⅱ': '#fff7e6', 'Ⅲ': '#e8f4ff', 'Ⅳ': '#eef0ff' }[level] || '#f5f5f5'
    },
    getLevelColor(level) {
      return { 'Ⅰ': '#E86452', 'Ⅱ': '#F59A48', 'Ⅲ': '#0183fa', 'Ⅳ': '#6ea8f7' }[level] || '#666'
    },
    rowClass({ row }) {
      return row.statusCode === 'reject' ? 'row-reject' : ''
    }
  }
}
</script>

<style scoped lang="scss">
.lab-binding-card {
  background: #fff;
  border-radius: 6px;
  padding: 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;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }

  /* 分组筛选按钮 — 与其他页面保持一致 */
  .table-top-button-box {
    display: inline-block;
    vertical-align: top;

    div {
      display: flex;

      p {
        border: 1px solid #DCDFE6;
        width: 80px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 14px;

        &:nth-child(1) {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &:nth-child(2) { border-left: none; }
        &:nth-child(3) { border-left: none; border-right: none; }
        &:nth-child(4) {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        &.check-table-button {
          border: 1px solid #0183fa;
          background-color: #0183fa;
          color: #fff;
        }
      }
    }
  }

  /* 表格内操作按钮 */
  .action-btn {
    display: inline-block;
    padding: 0 14px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 6px;

    &.btn-pass {
      border: 1px solid #00B176;
      color: #fff;
      background-color: #00B176;
    }

    &.btn-reject {
      border: 1px solid #E86452;
      color: #fff;
      background-color: #E86452;
    }
  }

  .level-tag {
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 24px;
  }

  .status-txt {
    font-size: 13px;
    &.status-pending { color: #F59A48; }
    &.status-pass    { color: #00B176; }
    &.status-reject  { color: #E86452; }
  }

  .reject-msg {
    font-size: 12px;
    color: #E86452;
    line-height: 1.5;
  }

  ::v-deep .row-reject td {
    background: #fffafa !important;
  }

  ::v-deep .el-table td {
    padding: 10px 0;
  }
}
</style>
