<!--安全准入办理-->
<template>
  <div class="app-container approval_handle">
    <div class="page-container approval_handle-page" v-if="pageType == 1">
      <div class="top-click-img-box">
        <img src="@/assets/ZDimages/secureAccess/img_zrzgsq_bg.png" alt="">
        <p @click="pageClick(2)"
           v-hasPermiRouter="['laboratory:apply:add']">安全准入申请</p>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList">
          <el-table-column label="申请实验室" align="left" prop="subName"/>
          <!--<el-table-column label="准入资格名称" align="left" prop="configureName"/>-->
          <el-table-column label="申请时间" align="left" prop="creatTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.creatTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="left" prop="auditStatus">
            <template slot-scope="scope">
              <p :class="scope.row.auditStatus == 0?'color_warn':(scope.row.auditStatus == 1?'color_FF4E00':(scope.row.auditStatus == 2?'color_14AE10':''))">{{scope.row.auditStatus == 0?'待审核':(scope.row.auditStatus == 1?'驳回':(scope.row.auditStatus == 2?'通过':''))}}</p>
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="left" prop="validBeginTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.validBeginTime,"{y}-{m}-{d} {h}:{i}") }} 至 {{ parseTime(scope.row.validEndTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="过期时间" align="left" prop="expirationDate" />-->
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="150" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="pageClick('3',scope.row)"
                   v-hasPermiRouter="['laboratory:apply:detail']"
                >查看</p>
                <p class="table-button-p"
                   v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 1"
                   @click="handleDelete(scope.row)"
                   v-hasPermiRouter="['laboratory:apply:del']"
                >删除</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    layout="total, prev, pager, next, sizes, jumper"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <add-page v-if="pageType == 2" :infoData="infoData" :infoType="infoType"></add-page>
    <info-page v-if="pageType == 3" :infoData="infoData"></info-page>
  </div>
</template>

<script>
//                        V3
import { laboratoryApplyListApply,laboratoryApplyDelete } from "@/api/secureAccess/index";
import addPage from "./addPage.vue"
import infoPage from "./infoPage.vue"
export default {
  name: "Approval",
  components: {
    addPage,
    infoPage
  },
  data() {
    return {
      tableButtonType:this.hasPermiDom(['laboratory:apply:detail','laboratory:apply:del']),
      //页面状态
      pageType:1,
      // 遮罩层
      loading: true,
      // 审批记录表格数据
      dataList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize:20,
      },
      //详情传参数据
      infoData:{},
      infoType:false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //页面切换
    pageClick(type,item){
      if(this.pageType != type){
        if(type == 1){
          this.getList();
          this.$set(this,'infoData',{});
          this.$set(this,'pageType',type);
        }else if(type == 2){
          //新增
          this.$set(this,'infoData',{});
          this.$set(this,'infoType',false);
          this.$set(this,'pageType',type);
        }else if(type == 3){
          //查看
          this.$set(this,'infoData',item);
          this.$set(this,'pageType',type);
        }else if(type == 4){
          //编辑
          this.$set(this,'infoData',item);
          this.$set(this,'infoType',true);
          this.$set(this,'pageType',2);
        }
      }
    },
    /** 查询审批记录列表 */
    getList() {
      this.loading = true;
      laboratoryApplyListApply(this.queryParams).then(response => {
        this.$set(this,'dataList',response.data.records);
        this.$set(this,'total',response.data.total);
        this.loading = false;
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let self = this;
      this.$confirm('确认删除申请记录吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.delItem(row.applyId);
        }).then(() => {
        }).catch(() => {});
    },
    delItem(applyId){
      laboratoryApplyDelete({applyId:applyId}).then(response => {
        this.getList();
        this.msgSuccess("删除成功");
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .approval_handle {
    .approval_handle-page{
      .top-click-img-box{
        width:1536px;
        height:250px;
        margin:20px auto 0;
        position: relative;
        img{
          width:1536px;
          height:250px;
        }
        p{
          margin:0;
          position: absolute;
          left:690px;
          bottom:24px;
          width:200px;
          height:50px;
          border-radius:10px;
          line-height:50px;
          font-size:18px;
          text-align: center;
          color:#fff;
          background: #0183FA;
          cursor: pointer;
        }
      }
    }
  }
</style>
