<!--风险预案编辑-->
<template>

  <div class="addPlan">
    <div class="go_back"> <p class="reset-button-one"  @click="backPage"><i class="el-icon-arrow-left"></i>返回</p></div>
    <el-form :model="dialogForm" ref="queryForm" :inline="true" label-width="140px">
      <el-form-item label="实验室名称" prop="name" >
        <el-input
          v-model="dialogForm.name"
          placeholder="请输入实验室名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="学院" prop="type" >
        <el-select v-model="dialogForm.deptId" placeholder="请选择学院" clearable size="small">
          <el-option
            v-for="dict in deptOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安全分类"  prop="typeId" class="form-item">
        <el-select v-model="dialogForm.typeId" placeholder="请选择安全分类" clearable >
          <el-option
            v-for="dict in typeList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安全分级"  prop="level" class="form-item">
        <el-select v-model="dialogForm.level" placeholder="请选择安全分级" clearable >
          <el-option
            v-for="dict in levelList"
            :key="dict.id"
            :label="dict.classifiedName"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实验室负责人" prop="name" >
        <el-input
          v-model="dialogForm.name"
          placeholder="请输入实验室负责人"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" style="margin-left:20px;" @click="onSearch">查询</p>
        <p class="reset-button-one" style="margin-left:20px;" @click="resetForm">重置</p>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="dialogTable" highlight-current-row @current-change="handleCurrentChange" style="cursor: pointer;">
      <el-table-column label="实验室名称" show-overflow-tooltip align="left" prop="name"/>
      <el-table-column label="学院" align="left" prop="typeName" width="127"/>
      <el-table-column label="实验室负责人" align="left" prop="deptName" width="157"/>
      <el-table-column label="负责人" align="left" prop="adminName" width="106"/>
    </el-table>
    <pagination :page-sizes="[20, 30, 40, 50]"
      v-show="total>0"
      :total="total"
      :page.sync="dialogForm.pageNum"
      :limit.sync="dialogForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getPlan, addPlan, updatePlan } from "@/api/laboratory/plan";


export default {
  props:{
    pageData:{},
  },
  name: "addPlan",
  data() {
    return {
      //实验室弹框
      dialogForm:{
        pageNum: 1,
        pageSize:20,
        name: null,
        floorId: null,
        room: null,
        deptId: null,
        deptName: null,
        adminId: null,
        isDel: null,
        userId: null,
        diyOrder: null
      },
      deptOptions:[],
      typeList:[],
      levelList:[],
      dialogTable:[],

      total: 0,
    };
  },
  created() {

  },
  methods: {
    //查询
    onSearch() {
      this.param.pageNo = 1;
      this.getAjaxList();
    },
    //重置
    resetForm() {
      this.param.name = '';
      this.param.phone = '';
      this.onSearch();
    },


    //切换页面
    backPage(){
      this.$parent.handleClick('','','back');
    },
    /** 查询学院列表 */
    getDeptListTow() {
      listDepartments().then(response => {
        // this.deptOptionsTwo = response.data;
        this.$set(this, 'deptOptions', response.data)
      });
    },
    /**获取分级*/
    getListClassifiedAll(){
      listClassifiedAll().then(response=>{
        if(response.code==200){
          this.levelList = response.data
        }
      })
    },
    /**获取分类*/
    getListClasstypeAll(){
      listClasstypeAll().then(response=>{
        if(response.code==200){
          this.typeList = response.data;
        }
      });
    },
    /** 查询实验室列表 */
    getList() {
      this.loading = true;
      authListSubject(this.dialogForm).then(response => {
        this.dialogTable = response.rows;
        this.total = response.total;
        this.loading = false;
        if(response.rows[0]){
          this.$refs.multipleTable.setCurrentRow(response.rows[0]);
          this.subjectInfo(response.rows[0].id);
        }
      });
    },
    //选中实验室
    handleCurrentChange(val){
      this.subjectInfo(val.id);
    },
    //新增传感器
    addSensor(){
      let obj = {};
      this.form.riskPlanSensorList.push(obj);
    },
    delSensor(index){
      this.form.riskPlanSensorList.splice(index,1)
    },
    //新增规则
    addHardware(){
      let obj = {};
      this.form.riskPlanHardwareList.push(obj);
    },
    delHardware(index){
      this.form.riskPlanHardwareList.splice(index,1)
    },
    /** 修改按钮操作 */
    handleUpdate() {
      getPlan(this.form.id).then(response => {
        this.form = response.data;
        // response.data.riskPlanHardwareList
        for(let i=0;i<response.data.riskPlanHardwareList.length;i++){
          this.controlTypeList(response.data.riskPlanHardwareList[i].hardwareType,i);
        }
      });
    },
    // 危险源下拉列表
    getHazardList () {
      optionHazard({}).then(response => {
        this.hazardList = response.data;
      });
    },
    /** 查询传感器列表 */
    getSensorList() {
      optionSensor({}).then(response => {
        this.sensorList = response.data;
      });
    },
    /** 查询硬件下拉列表 */
    getHardwareList() {
      optionHardware({}).then(response => {
        var allDate = new Array();
        for(const key in response.data){
          allDate.push({"id":response.data[key].hardwareTypeEnum.code,"name":response.data[key].hardwareTypeEnum.name})
        }
        this.hardwareList = allDate;
      });
    },
    /** 查询功能列表 */
    controlTypeList(val,index) {
      console.log("val",val)
      optionHardware({}).then(response => {
        var allDate = new Array();
        for(const key in response.data){
          if(response.data[key].hardwareTypeEnum.code==val){
            for(const sta in response.data[key].functionStatusList){
              allDate.push({"dictLabel":response.data[key].functionStatusList[sta].describe,"dictValue":response.data[key].functionStatusList[sta].code})
            }
          }
        }
        this.$set(this.form.riskPlanHardwareList[index],'controlTypeOptions',allDate);
        // item.controlTypeOptions = allDate;
        // console.log("item",item)
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePlan(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("修改成功");
                this.$parent.clickPageTypeOne()
              }
            });
          } else {
            addPlan(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("新增成功");
                this.$parent.clickPageTypeOne()
              }
            });
          }
        }
      });
    },
  },
  mounted(){
    this.getDeptListTow();
    this.getListClassifiedAll();
    this.getListClasstypeAll();
    this.getList();
  },
};
</script>

<style scoped lang="scss">
  .addPlan{
    position: relative;
    margin-top:-11px;
    p{
      margin:0;
    }
    .plan-title-p{
      height:80px;
      line-height:80px;
      font-size:18px;
      padding-left:20px;
      border-bottom:1px solid #E0E0E0;
    }
    .go_back{
      width: 100%;
      text-align: right;
      margin: 20px 0;
    }
    .reset-button-one{
     /* position: absolute;
      top:20px;
      right:0;*/


    }
    .plan-info-box{
      padding-top:30px;
      .add-button-p{
        width:300px;
        height:40px;
        line-height:36px;
        font-size:16px;
        border:2px dashed #E0E0E0;
        border-radius:4px;
        cursor:pointer;
        margin:20px auto 0;
        text-align: center;
        i{
          margin-right:5px;
        }
      }
    }
    .bottom-button-box{
      display: flex;
      justify-content: flex-start;
      width:220px;
      margin:80px auto 20px;
      p{
        font-size:14px;
        height:40px;
        width:100px;
        line-height:40px;
        text-align: center;
        border-radius:4px;
      }
      p:nth-child(1){
        border:1px solid #E0E0E0;
        margin-right:20px;
      }
      p:nth-child(2){
        border:1px solid #0045AF;
      }
    }
  }
</style>
