<!-- 实验室绑定申请 -->
<template>
  <div class="app-container lab-binding-card">
    <div class="page-container">
      <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="checkButton(btn.value)"
              >{{ btn.label }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" :data="dataList" border>
          <el-table-column prop="userName" label="申请人" width="80" show-overflow-tooltip/>
          <el-table-column prop="userAccount" label="学号" width="110" show-overflow-tooltip/>
          <el-table-column prop="educationName" label="用户类型" width="100" show-overflow-tooltip/>
          <el-table-column prop="deptName" label="所属学院" min-width="120" show-overflow-tooltip />
          <el-table-column prop="subName" label="申请实验室" min-width="160" show-overflow-tooltip />
          <el-table-column prop="levelName" label="分级" width="70" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span :style="'color:'+scope.row.levelColor+';'">{{ scope.row.levelName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="typeName" label="分类" width="120" />
          <el-table-column prop="reason" label="进入原因" min-width="120" show-overflow-tooltip />
          <el-table-column prop="submitTime" label="提交时间" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.submitTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="approveTime" label="通过时间" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.approveTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="statusCode" label="状态" width="80" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
            <span :class="scope.row.statusCode==0?'status-txt-a':(scope.row.statusCode==1?'status-txt-b':(scope.row.statusCode==2?'status-txt-c':''))">
              {{ scope.row.statusCode==0?'待审批':(scope.row.statusCode==1?'已通过':(scope.row.statusCode==2?'已驳回':'')) }}
            </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="130" align="left">
            <template slot-scope="scope">
              <p class="button-color-a" v-if="scope.row.statusCode==0" @click="tableButton(1,scope.row)">通过</p>
              <p class="button-color-b" v-if="scope.row.statusCode==0" @click="tableButton(2,scope.row)">驳回</p>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
      <el-dialog class="slab-binding-card-dialog"
                 :modal-append-to-body="false"
                 :close-on-click-modal="false" :close-on-press-escape="false"
                 title="驳回申请"
                 :visible.sync="dialogType"
                 v-if="dialogType"
                 width="560px"
                 append-to-body>
        <div style="min-height:60px;overflow: hidden">
          <div>
            <el-form :model="dialogData" ref="dialogForm" :rules="dialogRules">
              <el-form-item label="" prop="reason" label-width="0">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入原因"
                  maxLength="100"
                  resize="none"
                  style="width: 520px"
                  v-model="dialogData.reason">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div slot="footer" class="dialog-footer dialog-footer-box">
          <p class="dialog-footer-button-null"></p>
          <p class="dialog-footer-button-info" @click="dialogCancel">取消</p>
          <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
          <p class="dialog-footer-button-null"></p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    examElLabEduRelationAuditList,examElLabEduRelationAudit,
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'LabBindingApply',
    data() {
      return {
        filterData: {
          activeStatus: '',
          statusBtns: [
            { label: '全部',   value: '' },
            { label: '待审批', value: '0' },
            { label: '已通过', value: '1' },
            { label: '已驳回', value: '2' },
          ]
        },
        queryParams: {
          page: 1,
          pageSize: 20,
        },
        dataList: [],
        //数据数量
        total: 0,
        dialogType:false,
        dialogData:{
          reason:'',
        },
        dialogRules:{
          reason: [
            { required: true, message: "请输入驳回原因", trigger: "blur" }
          ],
        },
        checkId:null,
      }
    },
    mounted(){
      this.getList();
    },
    methods: {
      checkButton(val){
        if(this.filterData.activeStatus != val){
          this.$set(this.filterData,'activeStatus',val);
          this.handleQuery();
        }
      },
      tableButton(val,row){
        let self = this;
        this.$set(this,'checkId',row.id);
        this.$set(this.dialogData,'reason','');
        if (val == 1){
          //通过
          this.$confirm('确认审核通过?', "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            self.examElLabEduRelationAudit(1)
          }).catch(() => {});
        } else {
          //驳回
          this.$set(this,'dialogType',true);
        }
      },
      //提交按钮
      dialogSubmit(){
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            self.examElLabEduRelationAudit(2)
          }
        })
      },
      examElLabEduRelationAudit(statusCode){
        let obj = {
          id:this.checkId,
          statusCode:statusCode,
          reason:this.dialogData.reason,
        }
        examElLabEduRelationAudit(obj).then(response => {
          this.msgSuccess(response.message)
          this.$set(this,'dialogType',false);
          this.getList();
        })
      },
      //关闭按钮
      dialogCancel(){
        this.$set(this,'dialogType',false);
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //获取数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.statusCode = this.filterData.activeStatus;
        examElLabEduRelationAuditList(obj).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .lab-binding-card {
    padding:20px;

    .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;
      }
    }
    .page-content-box{
      height:500px;
      padding:0;
    }

    /* 分组筛选按钮 — 与其他页面保持一致 */
    .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;
          }
        }
      }
    }
    .button-color-a{
      width:60px;
      cursor: pointer;
      margin-right:10px;
      display: inline-block;
      text-align: center;
      line-height:24px;
      border-radius:4px;
      border: 1px solid #00B176;
      color: #fff;
      background-color: #00B176;
    }
    .button-color-b{
      width:60px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      line-height:24px;
      border-radius:4px;
      border: 1px solid #E86452;
      color: #fff;
      background-color: #E86452;
    }
    .status-txt-a{
      color: #F59A48;
    }
    .status-txt-b{
      color: #00B176;
    }
    .status-txt-c{
      color: #E86452;
    }

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

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