<!--应急疏散-->
<template>
    <div class="app-container performEvacuation">
      <div class="performEvacuation-page scrollbar-box" v-if="pageType == 1">
        <div class="top-title-box">
          环境与测绘大楼
          <!--<i class="el-icon-arrow-down"></i>-->
        </div>
        <div class="for-button-box">
          <div class="for-button-min-box" :class="buttonIndex == index ?'button-one':'button-two'" v-for="(item,index) in buttonList" :key="index">{{item.name}}</div>
          <!--<div class="for-button-null-box">疏散路径:</div>-->
          <!--<el-select v-model="form.lightDirection" clearable-->
                     <!--@change="selectChange" placeholder="请选择疏散路径">-->
            <!--<el-option-->
              <!--v-for="item in routeList"-->
              <!--:key="item.id"-->
              <!--:label="item.name"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        </div>
        <div class="map-big-box">
          <div class="map-min-box">
            <div class="map-min-for-box" :class="item.subjectId == subId?'map-min-for-box-color':''"
                 v-for="(item,index) in fjList" :key="index" @click="clickDiv(item)">
              {{item.room}}
            </div>
            <!--<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>
        <p class="bottom-button-p inquire-button-one" @click="goEvacuation">查看</p>
      </div>
      <emergency-evacuation-big v-if="pageType == 2" :routerType="true"></emergency-evacuation-big>
    </div>
</template>

<script>
  import emergencyEvacuationBig from "../../../emergencyEvacuationBig.vue"
  import { buildIdList ,lablayout } from "@/api/laboratory/emergencyEvacuation";
  import { getRedis } from '@/api/executeThePlan'
  export default {
    name: 'performEvacuation',
    components: {
      emergencyEvacuationBig,
    },
    data() {
      return {
        pageType:0,
        subId:"",
        title:"",
        buttonList:[
          {name:"1楼C区",}
        ],
        buttonIndex:0,
        routeList:[
          {
            id:"1",
            name:"向左疏散",
          },
          {
            id:"2",
            name:"向右疏散",
          },
          {
            id:"0",
            name:"两侧疏散",
          },
        ],
        fjList:[],
        form:{
          lightDirection:"",
        },
      }
    },
    created() {
      if(this.$route.query.subId){
        this.subId = this.$route.query.subId;
        this.title = this.$route.query.text;
        this.pageType = 2;
      }else{
        this.getRedis();
      }
      // if(localStorage.getItem("evacuation") == 1){
      //   this.pageType = 2;
      // }else{
      //   this.pageType = 1;
      // }
    },
    mounted(){
      this.lablayout();
    },
    methods:{
      goPage(type){
        if(this.pageType != type){
          this.pageType = type;
        }
      },
      //获取当前疏散页面
      getRedis(){
        getRedis().then(data => {
          if(data.data){
            this.pageType = 2;
          }else{
            this.pageType = 1;
          }
        });
      },
      //页面切换
      backPage(){
        this.pageType = 1;
      },
      //点击选中实验室
      clickDiv(item){
        if(item.subjectId == -1){
          this.msgError("该房间未绑定实验室");
          return
        }
        if(item.subjectId == this.subId){
          this.subId = "";
          this.title = "";
        }else{
          this.subId = item.subjectId;
          this.title = item.subjectName;
        }
      },
      //获取实验室列表布局
      lablayout(){
        let self = this;
        let id = 137;
        lablayout(id).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == 5){
              self.fjList = response.data[i].list;
            }
          }
        });
      },
      //确认疏散
      goEvacuation(){
        if(!this.subId){
          this.msgError("请选择需要查看的实验室");
          return
        }
        localStorage.setItem('evacuationSubId',this.subId)
        localStorage.setItem('evacuationTitel',this.title)
        this.pageType = 2;
      },
      //选择疏散方向
      selectChange(e){
        console.log("e",e)
        this.form.lightDirection = e;
      },
    }
  }
</script>

<style scoped lang="scss">
  .performEvacuation{
    flex:1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    .performEvacuation-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
    }
    .top-title-box{
      height:80px;
      line-height:80px;
      margin:0 46px;
      border-bottom:1px solid #E0E0E0;
      color:#0045AF;
      font-size:18px;
      i{
        margin-left:18px;
      }
    }
    .for-button-box{
      margin:36px 86px 26px;
      display: flex;
      .for-button-min-box{
        margin-right:20px!important;
      }
      .for-button-null-box{
        text-align: right;
        font-size:16px;
        line-height:40px;
        margin-right:20px;
        flex:1;
      }
      .for-button-right-box{

      }
      .button-one{
        font-size:14px;
        cursor:pointer;
        display: inline-block;
        text-align: center;
        padding:0 20px;
        height: 40px;
        line-height:40px;
        border-radius: 6px;
        border: 1px solid #0045af;
        color:#ffffff;
        background:#0045af;
        margin:0;
      }
      .button-two{
        font-size:14px;
        cursor:pointer;
        display: inline-block;
        text-align: center;
        padding:0 20px;
        height: 40px;
        line-height:40px;
        border-radius: 6px;
        border: 1px solid #DCDFE6;
        color:#606266;
        font-size: 14px;
        background:#ffffff;
        margin:0;
      }
    }
    .map-big-box{
      width:1410px;
      height:545px;
      margin:0 auto;
      border:1px solid #E0E0E0;
      margin-bottom:20px;
      .map-min-box{
        height:505px;
        width:1133px;
        margin:20px auto;
        background: url("../../../../assets/ZDimages/icon_bj_syspmtcy.png");
        position: relative;
        .map-min-for-box{
          overflow: hidden;
          display: inline-block;
          line-height:150px;
          text-align: center;
        }
        .map-min-for-box:hover{
          cursor: pointer;
          background: rgba(0,189,255,0.3);
        }
        .map-min-for-box-color{
          background: rgba(0,189,255,0.3);
        }
        .map-min-for-box:nth-child(1){
          margin:6px 0 0 2px;
          width:136px;
          height:173px;
        }
        .map-min-for-box:nth-child(2){
          margin:6px 0 0 154px;
          width:172px;
          height:173px;
        }
        .map-min-for-box:nth-child(3){
          margin:6px 500px 0 2px;
          width:119px;
          height:173px;
        }
        .map-min-for-box:nth-child(4){
          margin:143px 0 0 164px;
          width:300px;
          height:173px;
        }
        .map-min-for-box:nth-child(5){
          margin:143px 0 0 2px;
          width:118px;
          height:173px;
        }
        .map-min-for-box:nth-child(6){
          margin:143px 0 0 2px;
          width:102px;
          height:173px;
        }
        .map-min-for-box:nth-child(7){
          margin:143px 0 59px 2px;
          width:60px;
          height:114px;
        }
        .map-min-for-box:nth-child(8){
          margin:143px 0 0 2px;
          width:152px;
          height:173px;
        }
        .map-min-for-box:nth-child(9){
          margin:143px 0 0 2px;
          width:76px;
          height:173px;
        }
        .map-min-for-box:nth-child(10){
          margin:143px 0 0 2px;
          width:90px;
          height:173px;
        }
        .map-min-img{
          position: absolute;
          width:40px;
          height:28px;
        }
        .map-min-img:nth-child(11){
          top:240px;
          left:126px;
        }
        .map-min-img:nth-child(12){
          top:240px;
          left:190px;
        }
        .map-min-img:nth-child(13){
          top:240px;
          left:424px;
        }
        .map-min-img:nth-child(14){
          top:240px;
          left:490px;
        }
        .map-min-img:nth-child(15){
          top:240px;
          left:648px;
        }
        .map-min-img:nth-child(16){
          top:240px;
          left:716px;
        }
      }
    }
    .bottom-button-p{
      margin: 20px auto 40px;
      width:160px;
    }
  }
</style>
