<!--安全准入条件设置-->
<template>
  <div class="app-container accessRequirement">
    <div class="accessRequirementPage" v-if="pageType == 1">
      <div class="for-max-big-box scrollbar-box">
        <div class="add-button-box" @click="addItem" v-hasPermiRouter="['laboratory:materialdata:add']">
          <div>
            <p>+</p>
            <p>添加</p>
          </div>
        </div>
        <div class="for-max-box" v-for="(item,index) in dataList" :key="index">
          <div class="for-text-box">
            <p class="for-name">{{item.materialName}}</p>
            <p class="for-class">材料类型：{{item.materialType == 1?'上传材料':(item.materialType == 2?'关联材料':'')}}</p>
            <p class="for-text" v-if="item.materialType == 1">文件格式：{{item.fileTypeName}}</p>
            <p class="for-text" v-if="item.materialType == 2">{{item.relationType == 1 ?'关联内容：身份信息':'关联内容：安全考试证书'}}</p>
          </div>
          <div class="for-button-box" v-if="tableButtonType">
            <div class="left-div"
                 v-hasPermiRouter="['laboratory:materialdata:edit']"
                 @click="editItem(item)"><i class="el-icon-edit-outline"></i><p>编辑</p></div>
            <p class="border-p"></p>
            <div class="right-div"
                 v-hasPermiRouter="['laboratory:materialdata:del']"
                 @click="delItem(item)"><i class="el-icon-delete"></i><p>删除</p></div>
          </div>
        </div>
      </div>
      <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>
    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
  </div>
</template>

<script>
  import { laboratoryMaterialDataList,laboratoryMaterialDataDelete } from "@/api/secureAccess/index"
  import addPage from "./addPage.vue"
  export default {
    name: "accessRequirement",
    components: {
      addPage,
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['laboratory:materialdata:edit','laboratory:materialdata:del']),
        pageType:1,
        propsData:{},
        // 查询参数
        queryParams: {
          page: 1,
          pageSize:20,
        },
        total:0,
        dataList:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList(){
        laboratoryMaterialDataList(this.queryParams).then( response => {
          response.data.records.forEach((item)=>{
            if(item.fileType){
              item.fileType = item.fileType[0]?item.fileType.split(','):[];
              item.fileTypeName = '';
              item.fileType.forEach((minItem,minIndex)=>{
                item.fileTypeName += minItem==1?minIndex != 0?' - PDF':'PDF':(minItem==2?minIndex != 0?' - WORD':'WORD':(minItem==3?minIndex != 0?' - 图片':'图片':''))
              })
            }
          })
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      offPage(){
        this.propsData = {};
        this.pageType =  1;
        this.getList();
      },
      addItem(){
        this.$set(this,'pageType',2);
      },
      editItem(item){
        this.$set(this,'propsData',item);
        this.$set(this,'pageType',2);
      },
      delItem(item){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.laboratoryMaterialDataDelete(item);
        }).then(() => {
        }).catch(() => {});
      },
      laboratoryMaterialDataDelete(item){
        laboratoryMaterialDataDelete({materialId:item.materialId}).then( response => {
          this.msgSuccess("删除成功");
          this.getList();
        });
      },
    }
  };
</script>

<style scoped lang="scss">
  .accessRequirement{
    .accessRequirementPage{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin:40px;
      .for-max-big-box{
        flex:1;
        .add-button-box{
          display: inline-block;
          height:188px;
          width:332px;
          border:2px dashed #e0e0e0;
          border-radius:10px;
          margin:0 40px 50px 0;
          overflow: hidden;
          cursor: pointer;
          div{
            display: flex;
            p{
              line-height:208px;
              color:#999;
              flex:1;
              font-size:16px;
            }
            p:nth-child(1){
              margin-right:10px;
              text-align: right;
            }
            p:nth-child(2){

            }
          }
        }
        .for-max-box{
          display: inline-block;
          height:188px;
          width:332px;
          border:2px solid #e0e0e0;
          border-radius:10px;
          margin:0 40px 50px 0;
          overflow: hidden;
          .for-text-box{
            .for-name{
              margin:26px 24px 0;
              font-size:16px;
              height:18px;
              line-height:18px;
              color:#333;
            }
            .for-type{
              margin:20px 24px 0;
              font-size:14px;
              height:16px;
              line-height:16px;
              color:#666;
            }
            .for-class{
              margin:20px 24px 0;
              font-size:14px;
              height:16px;
              line-height:16px;
              color:#666;
            }
            .for-text{
              margin:20px 24px 0;
              font-size:14px;
              height:16px;
              line-height:16px;
              color:#666;
            }
          }
          .for-button-box{
            display: flex;
            margin-top:5px;
            .left-div{
              cursor: pointer;
              display: flex;
              flex:1;
              i{
                color:#0045af;
                margin:13px 10px 0 52px;
                font-size:20px;
              }
              p{
                font-size:14px;
                height:45px;
                line-height:45px;
                color:#666;
              }
            }
            .border-p{
              width:2px;
              height:14px;
              background: #ccc;
              margin:18px 0;
            }
            .right-div{
              cursor: pointer;
              display: flex;
              flex:1;
              i{
                color:#aa2315;
                margin:13px 10px 0 52px;
                font-size:20px;
              }
              p{
                font-size:14px;
                height:45px;
                line-height:45px;
                color:#666;
              }
            }
          }
        }
      }
    }
  }
</style>
