<!--安全准入条件设置-->
<template>
  <div class="app-container accessRequirement">
    <div class="accessRequirementPage scrollbar-box" v-if="pageType == 1">
      <div class="add-button-box" @click="addItem" v-hasPermi="['laboratory:materialdata:add']">
        <div>
          <p>+</p>
          <p>添加</p>
        </div>
      </div>
      <div class="for-max-box" v-for="(item,index) in newList" :key="index">
        <div class="for-text-box">
          <p class="for-name">{{item.materialName}}</p>
          <!--<p class="for-type">适用身份：{{item.materialSuit == 1?'通用':(item.materialSuit == 2?'教职工':(item.materialSuit == 3?'学生':''))}}</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">
          <div class="left-div"
               v-hasPermiAnd="['laboratory:materialdata:query','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-hasPermi="['laboratory:materialdata:remove']"
               @click="delItem(item)"><i class="el-icon-delete"></i><p>删除</p></div>
        </div>
      </div>
    </div>
    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
  </div>
</template>

<script>
  import { materialdataList,materialdataDel } from "@/api/laboratory/accessRequirement"
  import addPage from "./addPage.vue"
  export default {
    name: "accessRequirement",
    components: {
      addPage,
    },
    data() {
      return {
        pageType:1,
        propsData:{},
        newList:[],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList(){
        let _this=this;
        materialdataList(this.form).then( response => {
          _this.newList = response.rows;
          let string='';
          _this.newList.forEach(function (item,index){

            if(item.fileType){
              _this.newList[index].fileType=item.fileType.split(',')
              string=''
              _this.newList[index].fileType.forEach(function (item2,index2){

                  if(item2==1){
                    string+='PDF '
                  }else if(item2==2){
                    string+='WORD '
                  }else if(item2==3){
                    string+='图片'
                  }
              })
              _this.newList[index].fileTypeName=string;
              console.log(string)

            }else{

            }
          })
          console.log(_this.newList)

        });
      },
      offPage(){
        this.propsData = {};
        this.pageType =  1;
        this.getList();
      },
      addItem(){
        this.pageType =  2;
      },
      editItem(item){
        this.propsData = item;
        this.pageType =  2;
      },
      delItem(item){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.materialdataDel(item);
        }).then(() => {
        }).catch(() => {});
      },
      materialdataDel(item){
        materialdataDel(item.id).then( response => {
          this.msgSuccess("删除成功");
          this.getList();
        });
      },
    }
  };
</script>

<style scoped lang="scss">
  .accessRequirement{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
      padding:0;
    }
    .accessRequirementPage{
      flex:1;
      overflow-y: scroll;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      padding:50px 0 50px 60px!important;
      border-radius: 10px;
      .add-button-box{
        display: inline-block;
        height:188px;
        width:332px;
        border:2px dashed #e0e0e0;
        border-radius:10px;
        margin:0 44px 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 46px 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>
