<!--添加线路(针对矿大增加了楼栋与楼层的选择)-->
<template>
  <div class="emergencyEvacuationAddPage scrollbar-box">
    <el-form :model="form" ref="form" :rules="rules" >
      <div class="top-title-box">
        <p>基础信息</p>
        <p class="inquire-button-one" @click="upButton">提交</p>
        <p class="reset-button-one" @click="backPage">返回</p>
      </div>
      <div class="info-max-box">
        <el-row>
          <el-col :span="5">
            <el-form-item label="楼栋">
              <el-select v-model="propsList.buildingId" disabled placeholder="">
                <el-option
                  v-for="item in propsList.buildingList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="楼层">
              <el-select v-model="propsList.buttonId" disabled placeholder="">
                <el-option
                  v-for="item in propsList.floorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="路径类别" prop="lightDirection">
              <template>
                <el-radio v-model="form.lightDirection" :label="1">向左疏散</el-radio>
                <el-radio v-model="form.lightDirection" :label="2">向右疏散</el-radio>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="top-title-box">
        <p>路线规划</p>
      </div>
      <div class="map-big-box">
        <div class="map-min-box" :class="propsList.buttonId == '5'?'map-min-box-1':(propsList.buttonId == '6'?'map-min-box-2':(propsList.buttonId == '7'?'map-min-box-3':''))">
          <div class="map-min-for-box" :class="item.checkType?'map-min-for-box-color':''"
               v-for="(item,index) in fjList" :key="index">
            <p><i v-if="!item.checkType&&item.subjectId != -1" class="el-icon-circle-plus-outline" @click="addItem(item)"></i></p>
            <p>{{item.room}}</p>
          </div>
          <!--<img class="map-min-img" src="@/assets/ZDimages/icon_sjt.gif">-->
          <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">
          <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
          <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">
          <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
          <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">
          <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
        </div>
      </div>
      <div class="top-title-box" style="margin-bottom:30px;">
        <p>疏散指示灯</p>
      </div>
      <p v-if="!form.labExitLineJoinList[0]" style="text-align: center;line-height:100px;color:#999;font-size:16px;">请添加实验室</p>
      <el-row class="for-box" v-for="(item,index) in form.labExitLineJoinList" :key="index" :gutter="24">
        <el-col :span="5">
          <el-form-item :label="'实验室'+(index+1)" label-width="90px">
            <el-input
              v-model="item.room"
              disabled
              placeholder="请选择实验室"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="绑定继电器" :prop="'labExitLineJoinList.'+ index +'.relayCode'" :rules="rules.relayCode" label-width="110px">
            <el-input
              v-model="item.relayCode"
              placeholder="请输入继电器"
              clearable
              size="small"
              maxlength="20"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="继电器位置" :prop="'labExitLineJoinList.'+ index +'.relayBit'" :rules="rules.relayBit" label-width="110px">
            <el-select v-model="item.relayBit" placeholder="请选择继电器位置">
              <el-option
                v-for="item in relayList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="序号" :prop="'labExitLineJoinList.'+ index +'.lightOrder'" :rules="rules.lightOrder">
            <el-input-number
              v-model="item.lightOrder"
              placeholder="请输入序号"
              clearable
              :min="0"
              :max="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <p class="reset-button-one" @click="delItem(item,index)">删除</p>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { lablayout,addExitJoin } from "@/api/laboratory/emergencyEvacuation";
  export default {
    name: 'emergencyEvacuationAddPage',
    props: {
      propsData:{},
      propsList:{},
    },
    data() {
      return {
        lou:"环境学院-祈福楼",
        cen:"环境与气象研究所",
        //下啦选项
        options:[],
        //继电器路数数据
        relayList:[
          {label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},
          {label:"6",value:"6"},{label:"7",value:"77"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"},
        ],
        form:{
          lightDirection:1,
          labExitLineJoinList:[],
        },
        // 表单校验
        rules: {
          lightDirection: [
            { required: true, message: "请选择路径类别", trigger: "blur" }
          ],
          // room: [
          //   { required: true, message: "请选择实验室", trigger: "blur" }
          // ],
          relayCode: [
            { required: true, message: "请输入继电器", trigger: "blur" },
            { required: true, message: "请输入继电器", validator: this.spaceJudgment, trigger: "blur" }
          ],
          relayBit: [
            { required: true, message: "请选择继电器位置", trigger: "blur" }
          ],
          lightOrder: [
            { required: true, message: "请输入序号", trigger: "blur" },
            { required: true, message: "请输入序号", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        fjList:[],
      }
    },
    created() {
      this.lablayout();
    },
    mounted(){
    },
    methods: {
      upButton(){
        let self = this;
        this.$confirm('是否确认提交?', "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.upData();
        }).then(() => {}).catch(() => {});
      },
      //提交
      upData(){
        let self = this;
        if(!self.form.labExitLineJoinList[0]){
          this.msgError("请添加实验室")
          return
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            let list = [];
            for(let i=0;i<self.form.labExitLineJoinList.length;i++){
              let minObj = {
                subjectId:self.form.labExitLineJoinList[i].subjectId,
                relayCode:self.form.labExitLineJoinList[i].relayCode,
                relayBit:self.form.labExitLineJoinList[i].relayBit,
                lightOrder:self.form.labExitLineJoinList[i].lightOrder,
              }
              list.push(minObj);
            }
            let obj = {
              lineDeptId:self.propsList.buildingId,
              buildId:self.propsList.buttonId,
              lightDirection:this.form.lightDirection,
              lineJoinList:list
            };
            addExitJoin(obj).then(response => {
              this.msgSuccess("操作成功")
              this.backPage();
            });
          }
        })
      },
      //返回
      backPage(){
        this.$parent.pageTypeClick(1);
      },
      addItem(item){
        let self = this;
        let num = 0;
        for(let i=0;i<self.form.labExitLineJoinList.length;i++){
          if(self.form.labExitLineJoinList.subjectId == item.subjectId){
            num++
          }
        }
        if(num>0){
          this.msgError("该实验室已添加");
          return
        }
        let obj = {
          room:item.room,
          subjectId:item.subjectId,
          relayCode:"",
          relayBit:"",
          lightOrder:"",
        }
        this.form.labExitLineJoinList.push(obj);
        item.checkType = true;
        this.$forceUpdate();
      },
      delItem(item,index){
        console.log("index",index);
        let self = this;
        for(let i=0;i<self.fjList.length;i++){
          if(self.fjList[i].subjectId == item.subjectId){
            self.fjList[i].checkType = false;
          }
        }
        this.form.labExitLineJoinList.splice(index,1);
        this.$forceUpdate();
      },
      //获取层实验室数据
      lablayout(){
        let self = this;
        let id = self.propsList.buildingId;
        lablayout(id).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == self.propsList.buttonId){
              for(let o=0;o<response.data[i].list.length;o++){
                response.data[i].list[o].checkType = false;
              }
              self.fjList = response.data[i].list;
            }
          }
          if(self.propsData.id){
            for(let o=0;o<self.propsData.labExitLineJoinList.length;o++){
              for(let i=0;i<self.fjList.length;i++){
                if(self.propsData.labExitLineJoinList[o].subjectId == self.fjList[i].subjectId){
                  self.fjList[i].checkType = true;
                }
              }
            }
            this.$set(this,'form',this.propsData);
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .emergencyEvacuationAddPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow-y:scroll;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    padding:20px;
    p{
      margin:0;
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #e0e0e0;
      p:nth-child(1){
        flex:1;
        line-height:20px;
        font-size:18px;
        padding:10px 0 30px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin-right:20px;;
        font-size:14px;
      }
    }
    .info-max-box{
      margin:30px 0 0 30px;
    }
    .map-big-box{
      width:1410px;
      height:545px;
      margin:20px auto 20px;
      border:1px solid #E0E0E0;
      .map-min-box{
        margin:20px auto;
        position: relative;
        .map-min-for-box{
          overflow: hidden;
          display: inline-block;
          line-height: 0!important;
          background: rgba(0,189,255,0.3);
          p:nth-child(1){
            text-align: center;
            height:80px;
            i{
              cursor: pointer;
              font-size:26px;
              line-height:80px;
              color: rgb(0,189,255);
              margin:0 auto;
            }
          }
          p:nth-child(2){
            text-align: center;
            line-height:20px;
            font-size:16px;
            color:#333;
          }
        }
        .map-min-for-box-color{
          background: rgba(0,189,255,0.3);
        }
      }
    }
    .for-box{
      margin:0 ;
    }
  }
</style>
