<template>
  <div class="emergency-dialog">
    <!-- 头部 -->
    <div class="evac-hdr">
      <span class="evac-hdr-icon">🚪</span>
      <span class="evac-hdr-title">{{evacuationShadeType?'请确定疏散出口':'应急疏散'}}</span>
      <div class="evac-hdr-close" @click="later">✕</div>
    </div>

    <!-- 主体 -->
    <div class="evac-body">
      <!-- 左侧：平面图 -->
      <div class="evac-map-col">
        <!--<div class="evac-legend">-->
          <!--<div class="evac-legend-rect"></div>-->
          <!--<span class="evac-legend-text">应急疏散路线图</span>-->
        <!--</div>-->
        <div class="evac-map-wrap">
          <!--地图部分-->
          <div>
            <div class="newEvacuation-map-max-big-box"
                 v-if="mapType"
                 :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
              <div class="newEvacuation-map-big-box"
                   :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
                <div class="newEvacuation-map-for-box for-map-box-one"
                     :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
                     @click="checkSubClick(item)"
                     v-for="(item,index) in mapList" :key="item.key" v-if="item.type == 1"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="newEvacuation-map-for-min-box">
                    <!--名称/实验室名称-->
                    <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')" placement="top">
                      <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">{{item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')}}</p>
                    </el-tooltip>
                    <!--编号-->
                    <el-tooltip class="item" effect="dark" :content="'('+item.roomNum+')'" placement="top">
                      <p class="map-for-num-p">({{item.roomNum}})</p>
                    </el-tooltip>
                    <!--门-->
                    <div class="position-box"
                         :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                         v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                         :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                    <!--实验室人数-->
                    <div v-if="item.onLineNum!=null" class="user-num-box" :class="item.doorList[0].toward == 'top'?'user-num-two':'user-num-one'">
                      <img src="@/assets/emergencyManagement/icon_pmt_ry.png">
                      <p>{{item.onLineNum}} 人</p>
                    </div>
                  </div>
                </div>
                <div class="newEvacuation-map-for-box for-map-box"
                     v-for="(item,indexOne) in mapList" :key="item.key" v-if="item.type == 2"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="newEvacuation-map-for-min-box">
                    <!--灯-->
                    <div class="position-box" @click="shadeButton(2,minItem)"
                         :class="
                        minItem.state=='1'&&minItem.openType?'lightTopOn':(minItem.state=='1'&&!minItem.openType?'lightTopOff':
                        (minItem.state=='2'&&minItem.openType?'lightBottomOn':(minItem.state=='2'&&!minItem.openType?'lightBottomOff':
                        (minItem.state=='3'&&minItem.openType?'lightLeftOn':(minItem.state=='3'&&!minItem.openType?'lightLeftOff':
                        (minItem.state=='4'&&minItem.openType?'lightRightOn':(minItem.state=='4'&&!minItem.openType?'lightRightOff':'')))))))"
                         v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                         :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                  </div>
                </div>
                <div class="newEvacuation-map-for-box for-map-box-two"
                     v-for="(item,indexTwo) in mapList" :key="item.key" v-if="item.type == 3"
                     :class="item.roomCheckType?'for-map-box-two-check':''"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="newEvacuation-map-for-min-box"></div>
                </div>
                <div class="plan-map-for-box" :class="checkPlanId == item.subId?'check-plan-map-for-box':''"
                     :style="'width:'+item.width+'px;height:'+item.height+'px;left:'+item.left+'px;top:'+item.top+'px;'"
                     @click="checkPlanButton(item.subId)"
                     v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType&&!evacuationShadeType">
                  <div class="plan-top-button-box">
                    <p></p>
                    <p class="el-icon-close" @click="offPlanShade(index)"></p>
                  </div>
                  <div class="plan-time-box">
                    <img src="@/assets/emergencyManagement/icon_dp_bjsj.png">
                    <p>{{item.riskPlanTriggerTime}}</p>
                  </div>
                  <div class="plan-text-box">
                    <p class="plan-title-p" :class="item.riskPlanLevel==1?'color-type-1':(item.riskPlanLevel==2?'color-type-2':(item.riskPlanLevel==3?'color-type-3':(item.riskPlanLevel==4?'color-type-4':'')))">{{item.riskPlanLevelName}}</p>
                    <p class="plan-text-p">{{item.name}}</p>
                  </div>
                  <p class="plan-button-p" @click="shadeButton(7,item.groupId)">结束预案</p>
                </div>
              </div>
            </div>
            <p class="null-mapList" v-if="!mapList[0]&&!evacuationShadeType">暂无数据</p>
            <div class="evacuation-shade-max-big-box" v-if="evacuationShadeType">
              <div class="evacuation-shade-big-box">
                <div class="evacuation-shade-map-max-big-box">
                  <div class="evacuation-shade-map-big-box"
                       :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
                    <div class="evacuation-shade-map-box"
                         :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
                      <div class="evacuation-shade-map-for-box for-map-box-one"
                           :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
                           v-for="(item,index) in shadeMapList" :key="index" v-if="item.type == 1"
                           :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                        <div class="evacuation-shade-map-min-box">
                          <!--名称/实验室名称-->
                          <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:item.subName" placement="top">
                            <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">{{item.roomType == '-99'?item.roomName:item.subName}}</p>
                          </el-tooltip>
                          <!--编号-->
                          <el-tooltip class="item" effect="dark" :content="'('+item.roomNum+')'" placement="top">
                            <p class="map-for-num-p">({{item.roomNum}})</p>
                          </el-tooltip>
                          <!--门-->
                          <div class="position-box"
                               :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                               v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                               :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                        </div>
                      </div>
                      <div class="evacuation-shade-map-for-box for-map-box"
                           v-for="(item,indexOne) in shadeMapList" :key="indexOne" v-if="item.type == 2"
                           :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                        <div class="evacuation-shade-map-min-box"></div>
                      </div>
                      <div class="evacuation-shade-map-for-box for-map-box-two"
                           v-for="(item,indexTwo) in shadeMapList" :key="indexTwo" v-if="item.type == 3"
                           @click="shadeCheckRoomClick(item)"
                           :class="item.roomCheckType?'for-map-box-two-check':''"
                           :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                        <div class="evacuation-shade-map-min-box"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：监控画面 -->
      <div class="evac-right-col">
        <div class="evac-right-hdr">{{ alarmData.roomNum || '—' }} · {{ alarmData.subName || '实验室名称' }}</div>
        <!--<div class="evac-cam-slot">实时视频监控</div>-->
        <!--<div class="evac-cam-slot">实时视频监控</div>-->
        <!--<div class="evac-floor-lbl">楼道 {{ alarmData.floor || '1' }}层</div>-->
        <!--<div class="evac-cam-slot">实时视频监控</div>-->
        <div class="video-for-box" v-if="videoType">
          <H5PlayerVideo style="margin:10px 0 0 10px;"
                         v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
        </div>
        <p class="null-p" v-if="!videoType">暂无数据</p>
      </div>
    </div>

    <!-- 底部 -->
    <div class="evac-footer">
      <!-- 告警指标 -->
      <div class="evac-metrics">
        <!--<div v-for="(item, idx) in metricRows" :key="idx" class="evac-metric-row">-->
        <div class="evac-metric-row">
          <div class="evac-metric-col">
            <div class="evac-ml">告警指标</div>
            <div class="evac-mv">{{ alarmData.eventName }}</div>
          </div>
          <!--<div class="evac-metric-rt">{{ alarmData.triggerUploadData[0].deviceValue }}33</div>-->
        </div>
        <div class="evac-metric-row">
          <div class="evac-metric-col">
            <div class="evac-ml">当前值 / 安全阈值</div>
            <div class="evac-mv">{{ alarmData.triggerUploadData[0].deviceValue}} {{ alarmData.triggerUploadData[0].unit || '' }} / {{ alarmData.triggerUploadData[0].min}} - {{ alarmData.triggerUploadData[0].max}} {{ alarmData.triggerUploadData[0].unit || '' }}</div>
          </div>
          <!--<div class="evac-metric-rt">{{ alarmData.triggerUploadData[0].deviceValue }}33</div>-->
        </div>
      </div>

      <!-- 语音广播 -->
      <div class="evac-broadcast">
        <div class="evac-bc-hdr">
          <span class="evac-bc-icon">📢</span>
          <span class="evac-bc-title">语音广播</span>
          <span class="evac-bc-device">选择播放设备</span>
        </div>
        <div class="evac-speaker-row">
          <!--<button-->
            <!--v-for="(sp, idx) in speakers"-->
            <!--:key="idx"-->
            <!--class="evac-speaker-btn"-->
            <!--:class="{ on: sp.active }"-->
            <!--@click="sp.active = !sp.active"-->
          <!--&gt;{{ sp.name }}</button>-->
          <p v-for="(item, index) in loudspeakerList" :key="index"
             class="evac-speaker-btn"
             :class="checkLoudspeaker == item.deviceNo?'evac-speaker-btn-check':''"
             @click="clickLoudspeaker(item)">{{ item.deviceName }}</p>
        </div>
        <div class="evac-input-row">
          <input
            v-model="loudspeakerInput"
            type="text"
            class="evac-text-input"
            placeholder="请输入内容"
          />
          <button class="evac-send-btn" @click="iotBigViewSpeakerPlayText">发送</button>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="evac-actions">
        <button class="evac-btn-later" @click="$emit('close')" v-if="!evacuationShadeType">稍后处理</button>
        <button class="evac-btn-exec" @click="evacuationButton" v-if="!evacuationShadeType">{{evacuationType?'结束疏散':'执行疏散'}}</button>
        <button class="evac-btn-later"  @click="executeEvacuation(2)" v-if="evacuationShadeType">关闭疏散选择页面</button>
        <button class="evac-btn-exec" @click="executeEvacuation(1)" v-if="evacuationShadeType">已确定疏散出口，立即执行疏散</button>
      </div>
    </div>
    <!--确认弹层-->
    <div class="shade-max-big-box" v-if="shadeType != 0">
      <div class="shade-big-box">
        <p class="off-button el-icon-close" @click="shadeButton(4)"></p>
        <div class="text-box" v-if="shadeType == 1">
          <p>是否确认执行一键灭火</p>
          <p>该操作存在风险，请您务必确认实验室内人员已安全撤离</p>
        </div>
        <div class="text-box" v-if="shadeType == 2 || shadeType == 3 || shadeType == 4 || shadeType == 5 || shadeType == 6">
          <p>{{shadeText}}</p>
          <p>{{shadeType==5?'关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作.':''}}</p>
        </div>
        <div class="button-box">
          <p class="button-null"></p>
          <p class="button-p" style="margin-right:39px;" @click="shadeButton(4)">取消</p>
          <p class="button-p" @click="shadeButton(5)">确认</p>
          <p class="button-null"></p>
        </div>
      </div>
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>

<script>
import mqtt from 'mqtt'
import {
  laboratoryBigViewGetFloorByBigView,laboratoryBigViewSelectTriggerInfo,laboratoryExitLineGetRedisEvacuation,
  iotCameraFindByCondition,iotBigViewDeviceFindBySubId,iotBigViewDeviceFindByType,
  laboratoryPlanCloseRiskPlan,laboratoryExitLineEndEvacuation,laboratoryExitLineExecuteEvacuation,
  laboratoryExitRelayOpenLight,laboratoryExitRelayCloseLight,iotBigViewSpeakerPlayText
} from '@/api/screen'
import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
export default {
  name: 'Emergency',
  components: {
    H5PlayerVideo,
    fullH5PlayerVideo,
  },
  props: {
    alarmData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      broadcastText: '',
      speakers: [
        { name: 'NKL1FB1122 喇叭', active: true },
        { name: 'NKL1FB1123 喇叭', active: true },
        { name: 'NKL1FB1124 喇叭', active: true }
      ],

      //当前路由状态
      routeType:false,
      // 当前选中数据
      subName:'',
      roomNum:'',
      buildId:'',
      floorId:'',
      //实验室选中/报警数据
      subId:null,
      adminId:null,
      checkSubId:null,
      //选中的喇叭ID
      checkLoudspeaker:null,
      loudspeakerInput:'',
      //广播记录
      loudspeakerTextList:[],
      //下拉列表数据
      buildOptions:[],
      floorOptions:[],
      //地图相关数据
      mapData:{},
      zoomData:null,
      mapList:[],
      mapType:false,
      planMapList:[],
      //智能控制
      controlsList:[],
      //智能监测
      monitorList:[],
      //传感器报警数据
      planSensorList:[],
      //危险源
      dangerList:{
        nameList: [],
        numList: [],
        maxNumList: [],
      },
      //语音广播
      loudspeakerList:[],
      //实验室人员数据
      userList:[],
      width:398,//372,
      height:249,//223,
      videoType:false,
      //视频数据
      videoQueryParams:{
        page:1,
        pageSize:3,
      },
      videoList:[],
      videoTotal:0,
      //疏散用布局数据
      shadeMapList:[],
      //当前实验室/楼栋/楼层
      subText:"",
      floorText:"",
      //优先显示的提示
      checkPlanId:null,
      //当前疏散状态
      evacuationType:false,
      //疏散弹窗状态
      evacuationShadeType:false,
      //弹窗相关
      shadeType:0,
      shadeText:'',
      shadeData:{},
      //结束预案时使用的预案ID
      checkRiskPlanId:null,
      /****************** MQTT相关 ******************/
      //硬件MQTT
      hardwareOpic:"iot/hardware/all/sub/",
      hardwareClient:{},
      //传感器
      sensorOpic:"iot/device/sensor/sub/",
      sensorClient:{},
      //疏散灯
      lightOpic:"iot/hardware/evacuationLight/floor/",
      lightClient:{},
      //疏散
      evacuateOpic:"lab/floor/exit/line",
      evacuateClient:{},
      //预案
      planOpic:'lab/risk/plan/change',
      planClient:{},
      //全屏视频参数
      fullVideoProps:{},
      fullVideoType:false,
    }
  },
  mounted(){
    this.$set(this,'buildId',this.alarmData.buildId);
    this.$set(this,'floorId',this.alarmData.floorId);
    this.$set(this,'subId',this.alarmData.subId);
    this.laboratoryBigViewGetFloorByBigView();
  },
  methods: {
    //获取楼层布局数据
    laboratoryBigViewGetFloorByBigView(){
      let self = this;
      laboratoryBigViewGetFloorByBigView({id:this.alarmData.floorId}).then(response => {
        if(response.data[0]){
          if(response.data[0].buildLayoutVoList && response.data[0].labExitLineVo){
            let list = JSON.parse(response.data[0].labExitLineVo.layoutJoinData)
            for(let i=0;i<list.length;i++){
              if(list[i].type == '2'){
                //楼道
                for(let o=0;o<list[i].lightList.length;o++){
                  list[i].lightList[o].openType = false;
                }
              }else if(list[i].type == '1'){
                const hex2Rgba = (bgColor) => {
                  let color = bgColor.slice(1); // 去掉'#'号
                  let rgba = [
                    parseInt("0x" + color.slice(0, 2)),
                    parseInt("0x" + color.slice(2, 4)),
                    parseInt("0x" + color.slice(4, 6)),
                    0.6
                  ];
                  return "rgba(" + rgba.toString() + ")";
                };
                for(let o=0;o<response.data[0].buildLayoutVoList.length;o++){
                  if(list[i].key == response.data[0].buildLayoutVoList[o].pointName){
                    list[i].id = response.data[0].buildLayoutVoList[o].id;
                    list[i].buildId = response.data[0].buildLayoutVoList[o].buildId;
                    list[i].floorId = response.data[0].buildLayoutVoList[o].floorId;
                    list[i].roomType = response.data[0].buildLayoutVoList[o].roomType;
                    list[i].roomName = response.data[0].buildLayoutVoList[o].roomName;
                    list[i].roomNum = response.data[0].buildLayoutVoList[o].roomNum;
                    list[i].subName = response.data[0].buildLayoutVoList[o].subName;
                    list[i].subId = response.data[0].buildLayoutVoList[o].subId;
                    list[i].adminId = response.data[0].buildLayoutVoList[o].adminId;
                    list[i].onLineNum = response.data[0].buildLayoutVoList[o].onLineNum;
                    list[i].loginAdmin = response.data[0].buildLayoutVoList[o].loginAdmin;
                    list[i].levelColor = response.data[0].buildLayoutVoList[o].levelColor?hex2Rgba(response.data[0].buildLayoutVoList[o].levelColor):'';
                    list[i].planType = false;
                  }
                }
              }else if(list[i].type == 3){
                list[i].roomCheckType = false;
              }
            }
            let obj = this.calculateMapMax(list)
            this.$set(this.mapData,'width',obj.maxWidth);
            this.$set(this.mapData,'height',obj.maxHeight);
            this.$set(this.mapData,'zoomData',obj.zoomData);
            //标记第一间实验室
            let subNum = 0;
            for(let x=0;x<list.length;x++){
              if(list[x].subId != -1 &&list[x].type == 1){
                subNum++
                this.$set(this,'subName',list[x].subName);
                this.$set(this,'roomNum',list[x].roomNum);
                this.$set(this,'checkSubId',list[x].subId);
                this.$set(this,'subId',list[x].subId);
                this.$set(this,'adminId',list[x].adminId);
                break
              }
            }
            if(subNum == 0){
              this.$set(this,'subName','');
              this.$set(this,'roomNum','');
              this.$set(this,'checkSubId','');
              this.$set(this,'adminId','');
            }
            this.$set(this,'mapList',JSON.parse(JSON.stringify(list)));
            this.$set(this,'shadeMapList',JSON.parse(JSON.stringify(list)));
            this.$set(this,'mapType',true);
            //处理实验室弹窗数据
            let roomList = [];
            for(let i=0;i<list.length;i++){
              if(list[i].type == 1 && list[i].subId){
                let roomObj = {
                  subId:list[i].subId
                };
                if(list[i].doorList[0].toward == 'top'){
                  roomObj.width = 266;
                  roomObj.height = 142;
                  roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                  roomObj.top = list[i].y - 111;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'bottom'){
                  roomObj.width = 266;
                  roomObj.height = 142;
                  roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                  roomObj.top = list[i].y + list[i].h;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'left'){
                  roomObj.width = 266;
                  roomObj.height = 142;
                  roomObj.left = list[i].x - 133;
                  roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'fight'){
                  roomObj.width = 266;
                  roomObj.height = 142;
                  roomObj.left = list[i].x + list[i].w + 133;
                  roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                  roomObj.planType = false;
                }
                roomList.push(roomObj);
              }
            }
            this.$set(this,'planMapList',roomList);
          }else{
            this.$set(this,'mapData',{});
            this.$set(this,'mapList',[]);
            this.$set(this,'mapType',false);
            this.$set(this,'planMapList',[]);
          }


          // 等待配置与字段获取到后跳转
          Promise.all([
            //获取路由判断权限
            this.laboratoryBigViewSelectTriggerInfo(),
            this.laboratoryExitLineGetRedisEvacuation(),
          ]).then((result)=>{
            setTimeout(function(){
              self.buttonSubject();
            },100);
          }).catch((error) => {})
        }
      })
    },
    //查询当前正在发生的预案
    laboratoryBigViewSelectTriggerInfo(){
      let self = this;
      laboratoryBigViewSelectTriggerInfo().then(response => {
        //实验室预案标记
        for(let o=0;o<self.mapList.length;o++){
          let num = 0;
          //循环地图数据找出实验室
          if(self.mapList[o].type == 1){
            let newData = {};
            //对比预案触发实验室ID与地图中实验室ID
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].eventId == self.alarmData.eventId){
                if(response.data[i].subId == self.mapList[o].subId && response.data[i].subId == this.alarmData.subId){
                  num++
                  newData = response.data[i];
                }
              }
            }
            if(num != 0){
              self.$set(self.mapList[o],'planType',true);
              for(let x=0;x<self.planMapList.length;x++){
                if(self.planMapList[x].subId == self.mapList[o].subId){
                  self.$set(self.planMapList[x],'riskPlanTriggerTime',this.parseTime(newData.eventStartTime,"{y}-{m}-{d} {h}:{i}:{s}"));
                  self.$set(self.planMapList[x],'riskAttribute',newData.riskAttribute);
                  self.$set(self.planMapList[x],'riskPlanLevel',newData.riskPlanLevel);
                  self.$set(self.planMapList[x],'riskPlanLevelName',newData.riskPlanLevel==1?'低风险':(newData.riskPlanLevel==2?'中风险':(newData.riskPlanLevel==3?'较高风险':(newData.riskPlanLevel==4?'高风险':''))));
                  self.$set(self.planMapList[x],'name',newData.riskPlanName);
                  self.$set(self.planMapList[x],'groupId',newData.eventId);
                  self.$set(self.planMapList[x],'planType',true);
                }
              }
              let checkNum = 0;
              for(let x=0;x<self.planMapList.length;x++){
                if(self.planMapList[x].subId == self.mapList[o].subId){
                  this.$set(this,'subName',self.mapList[o].subName);
                  this.$set(this,'roomNum',self.mapList[o].roomNum);
                  this.$set(this,'checkSubId',self.mapList[o].subId);
                  this.$set(this,'adminId',self.mapList[o].adminId);
                  checkNum++
                  break
                }
              }
            }else{
              self.mapList[o].planType = false;
              for(let x=0;x<self.planMapList.length;x++){
                if(self.planMapList[x].subId == self.mapList[o].subId){
                  self.$set(self.planMapList[x],'planType',false);
                  self.$set(self.planMapList[x],'riskPlanTriggerTime',null);
                  self.$set(self.planMapList[x],'riskAttribute',null);
                  self.$set(self.planMapList[x],'riskPlanLevel',null);
                  self.$set(self.planMapList[x],'riskPlanLevelName',null);
                  self.$set(self.planMapList[x],'groupId',null);
                  self.$set(self.planMapList[x],'name',null);
                }
              }
            }
          }
        }
        //浮层实验室预案标记
        for(let o=0;o<self.shadeMapList.length;o++){
          if(self.shadeMapList[o].type == 1){
            let num = 0;
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].subId == self.shadeMapList[o].subId){
                num++
              }
            }
            self.$set(self.shadeMapList[o],'planType',num != 0);
          }
        }
        //传感器
        let planSensorList = [];
        response.data.forEach((item)=>{
          let list = JSON.parse(item.triggerUploadData)
          list.forEach((minItem)=>{
            planSensorList.push(minItem.deviceNo)
          })
        })
        this.$set(this,'planSensorList',planSensorList);
        // this.iotBigViewDeviceFindBySubId();
        this.$forceUpdate();
      })
    },
    //查询当前楼栋楼层下发生的疏散数据
    laboratoryExitLineGetRedisEvacuation(){
      let self = this;
      let obj = {
        buildId:this.buildId,
        floorId:this.floorId,
      }
      laboratoryExitLineGetRedisEvacuation(obj).then(response => {
        if(response.data.doorPointNames){
          this.$set(this,'evacuationType',true);
          for(let o=0;o<self.mapList.length;o++){
            if(self.mapList[o].type == 2){
              for(let x=0;x<self.mapList[o].lightList.length;x++){
                let num = 0;
                for(let i=0;i<response.data.lightPointSet.length;i++){
                  if(response.data.lightPointSet[i]){//处理后端返回的异常的NULL
                    if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                      num++
                    }
                  }
                }
                self.mapList[o].lightList[x].openType = num != 0;
              }
            }
            if(self.mapList[o].type == 3){
              let age = 0;
              for(let i=0;i<response.data.doorPointNames.length;i++){
                if(response.data.doorPointNames[i] == self.mapList[o].key){
                  age++
                }
              }
              self.mapList[o].roomCheckType = age != 0;
            }
          }
        }else{
          this.$set(this,'evacuationType',false);
          for(let o=0;o<self.mapList.length;o++){
            if(self.mapList[o].type == 2){
              for(let x=0;x<self.mapList[o].lightList.length;x++){
                self.mapList[o].lightList[x].openType = false;
              }
            }
            if(self.mapList[o].type == 3){
              self.mapList[o].roomCheckType = false;
            }
          }
        }
      });
    },
    //计算布局最大尺寸
    calculateMapMax(list) {
      //基础参数
      let height = 824;
      let width = 1733;
      let maxWidth = 0
      let maxHeight = 0
      let zoomData = 1;
      //参数处理
      for (let i = 0; i < list.length; i++) {
        if ((list[i].x + list[i].w) > maxWidth) {
          maxWidth = list[i].x + list[i].w
        }
        if ((list[i].y + list[i].h) > maxHeight) {
          maxHeight = list[i].y + list[i].h
        }
      }
      //处理等值数据
      if(maxHeight == height){
        maxHeight++
      }
      if(maxWidth == width){
        maxWidth++
      }
      //缩放判断
      let zoomNumOne = height / maxHeight;
      if(parseInt(this.accMul(zoomNumOne,maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,maxWidth)) <= width){
        zoomData = zoomNumOne;
        this.$set(this,'zoomData',zoomNumOne);
      }
      let zoomNumTwo = width / maxWidth;
      if(parseInt(this.accMul(zoomNumTwo,maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,maxWidth)) <= width){
        zoomData = zoomNumTwo;
        this.$set(this,'zoomData',zoomNumTwo);
      }
      return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
    },
    accMul(arg1,arg2){
      var m=0,s1=arg1.toString(),s2=arg2.toString();
      try{m+=s1.split(".")[1].length}catch(e){}
      try{m+=s2.split(".")[1].length}catch(e){}
      return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
    },
    //获取相关实验室数据
    buttonSubject(){
      //重置参数
      this.$set(this,'videoQueryParams',{
        page:1,
        pageSize:3,
      });
      this.$set(this,'controlsList',[]);
      this.$set(this,'monitorList',[]);
      this.$set(this,'dangerList',{
        nameList: [],
        numList: [],
        maxNumList: [],
      });
      this.$set(this,'loudspeakerList',[]);
      this.$set(this,'userList',[]);
      this.$set(this,'videoList',[]);
      this.$set(this,'checkLoudspeaker',null);
      this.$set(this,'loudspeakerInput','');
      this.$set(this,'loudspeakerTextList',[]);
      if(this.checkSubId){
        //查询视频
        this.videoInitialize();
        //查询实验室相关传感器
        // this.iotBigViewDeviceFindBySubId();
        //查询实验室相关喇叭
        this.iotBigViewDeviceFindByType();
      }
      //MQTT相关
      this.offSensorMQTT('on')
      this.offLightMQTT('on')
      //判断是否已有链接
      if(!this.evacuateClient.unsubscribe){
        this.offEvacuateMQTT('on');
      }
    },
    //查询实验室摄像头
    videoInitialize() {
      let self = this;
      self.$set(self, 'videoType', false);
      self.$set(self, 'videoList', []);
      // type 1.楼栋 2.楼层 3.楼道 4.实验室
      let obj = {
        page:this.videoQueryParams.page,
        pageSize:this.videoQueryParams.pageSize,
        buildId:'',
        floorId:'',
        passageway:this.floorId,
        subIds:[this.checkSubId],
        protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
        streamType:1,
        source:4,
      };
      iotCameraFindByCondition(obj).then(response => {
        let list = [];
        for(let i=0;i<response.data.records.length;i++){
          list.push(
              {
                width: this.width, //(宽度:非必传-默认600)
                height: this.height, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
                cameraIndexCode: response.data.records[i].deviceNo,
              }
          )
        }
        this.$set(this,'videoList',list)
        this.$set(this,'videoTotal',response.data.total);
        this.$nextTick(()=>{
          setTimeout(function(){
            self.$set(self, 'videoType', true);
          },1000);
        })
      });
    },
    //查询实验室传感器
    iotBigViewDeviceFindBySubId(){
      let self = this;
      iotBigViewDeviceFindBySubId({subId:this.checkSubId}).then(response => {
        response.data.forEach((item)=>{
          let num = 0;
          self.planSensorList.forEach((minItem)=>{
            if(item.deviceNo == minItem){
              num++
            }
          })
          item.type = num != 0;
          item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
        })
        this.$set(this,'monitorList',response.data);
      })
    },
    //查询实验室喇叭
    iotBigViewDeviceFindByType(){
      let floorObj = {
        passageway:this.floorId,
        typeKeyList:['horn']
      }
      iotBigViewDeviceFindByType(floorObj).then(floorResponse => {
        let subjectObj = {
          subjectId:this.checkSubId,
          typeKeyList:['horn']
        }
        iotBigViewDeviceFindByType(subjectObj).then(subjectResponse => {
          this.$set(this,'loudspeakerList',floorResponse.data.concat(subjectResponse.data));
        })
      })
    },

    //选中喇叭
    clickLoudspeaker(item){
      if(this.checkLoudspeaker != item.deviceNo){
        this.$set(this,'checkLoudspeaker',item.deviceNo);
      }else{
        this.$set(this,'checkLoudspeaker',null);
      }
    },
    //喇叭播放文字
    iotBigViewSpeakerPlayText(){
      if(!this.loudspeakerInput){
        this.msgError('请输入内容')
        return
      }else if(!this.checkLoudspeaker){
        this.msgError('请选择喇叭')
        return
      }
      let obj = {
        text:this.loudspeakerInput,
        deviceNo:this.checkLoudspeaker,
      }
      iotBigViewSpeakerPlayText(obj).then(response => {
        this.$set(this,'loudspeakerInput','');
        this.msgSuccess(response.message)
      })
    },
    /*********************************** MQTT *********************************/
    //疏散-MQTT连接
    offEvacuateMQTT(type){
      let self = this;
      if(self.evacuateClient.unsubscribe){
        self.evacuateClient.unsubscribe(self.evacuateOpic, error => {
          if (error) {
            // console.log('mqtt关闭连接错误:', error)
          }
        })
        self.evacuateClient.end();
        this.$set(this,'evacuateClient',{});
      }
      //判断传入参数如果存在 发起一次新的连接
      if(type){
        this.evacuateMQTT();
      }
    },
    //疏散-MQTT订阅
    evacuateMQTT(){
      let self = this;
      this.evacuateClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
        username: localStorage.getItem('mqttUser'),
        password:localStorage.getItem('mqttPassword')
      });
      this.evacuateClient.on("connect", e =>{
        this.evacuateClient.subscribe(self.evacuateOpic, (err) => {
          if (!err) {
            // console.log("疏散-订阅成功:" + self.evacuateOpic);
          }else{
            // console.log("疏散-连接错误:" + err);
          }
        });
      });
      this.evacuateClient.on("message", (topic, message) => {
        if (message){
          //获取疏散数据
          this.laboratoryExitLineGetRedisEvacuation();
        }
      });
    },
    //传感器-MQTT连接
    offSensorMQTT(type){
      let self = this;
      if(self.sensorClient.unsubscribe){
        self.sensorClient.unsubscribe(self.sensorOpic+self.checkSubId, error => {
          if (error) {
            // console.log('mqtt关闭连接错误:', error)
          }
        })
        self.sensorClient.end();
        this.$set(this,'sensorClient',{});
      }
      //判断传入参数如果存在 发起一次新的连接
      if(type){
        this.sensorMQTT();
      }
    },
    //传感器-MQTT订阅
    sensorMQTT(){
      let self = this;
      this.sensorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
        username: localStorage.getItem('mqttUser'),
        password:localStorage.getItem('mqttPassword')
      });
      this.sensorClient.on("connect", e =>{
        this.sensorClient.subscribe(self.sensorOpic+self.checkSubId, (err) => {
          if (!err) {
            // console.log("智能监测-订阅成功:" + self.sensorOpic+self.checkSubId);
          }else{
            // console.log("智能监测-连接错误:" + err);
          }
        });
      });
      this.sensorClient.on("message", (topic, message) => {
        if (message){
          let data = JSON.parse(message)
          let list = JSON.parse(JSON.stringify(this.monitorList))
          list.forEach((item)=>{
            data.forEach((minItem)=>{
              if(item.deviceNo == minItem.deviceNo){
                item.deviceValue = minItem.deviceValue;
                item.online = minItem.online;
              }
            })
          })
          this.$set(this,'monitorList',list);
        }
      });
    },
    //疏散灯-MQTT连接
    offLightMQTT(type){
      let self = this;
      if(self.lightClient.unsubscribe){
        self.lightClient.unsubscribe(self.lightOpic+self.floorId, error => {
          if (error) {
            // console.log('mqtt关闭连接错误:', error)
          }
        })
        self.lightClient.end();
        this.$set(this,'lightClient',{});
      }
      //判断传入参数如果存在 发起一次新的连接
      if(type){
        this.lightMQTT();
      }
    },
    //疏散灯-MQTT订阅
    lightMQTT(){
      let self = this;
      this.lightClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
        username: localStorage.getItem('mqttUser'),
        password:localStorage.getItem('mqttPassword')
      });
      this.lightClient.on("connect", e =>{
        this.lightClient.subscribe(self.lightOpic+self.floorId, (err) => {
          if (!err) {
            // console.log("疏散灯-订阅成功:" + self.lightOpic+self.floorId);
          }else{
            // console.log("疏散灯-连接错误:" + err);
          }
        });
      });
      this.lightClient.on("message", (topic, message) => {
        if (message){
          let data = JSON.parse(message)
          for(let i=0;i<self.mapList.length;i++){
            if(self.mapList[i].type == 2){
              for(let o=0;o<self.mapList[i].lightList.length;o++){
                if(data.hardwareNo == self.mapList[i].lightList[o].configName){
                  self.$set(self.mapList[i].lightList[o],'openType',data.operatingState);
                }
              }
            }
          }
        }
      });
    },
    /*********************************** 点击操作事件-相关接口 *********************************/
    //选中实验室
    checkSubClick(item){
      let self = this;
      // if((this.checkSubId != item.subId)&&item.subId!= -1&&item.type == 1){
      //   this.$set(this,'subId',item.subId);
      //   this.$set(this,'adminId',item.adminId);
      //   this.$set(this,'checkSubId',item.subId);
      //   this.$set(this,'subName',item.subName);
      //   this.$set(this,'roomNum',item.roomNum);
      //   setTimeout(function(){
      //     self.buttonSubject();
      //   },100);
      // }
      if(item.planType){
        for(let i=0;i<self.planMapList.length;i++){
          if(self.planMapList[i].subId == item.subId){
            this.$set(self.planMapList[i],'planType',true)
          }
        }
      }
    },
    //选中优先展示的预案弹窗
    checkPlanButton(id){
      this.$set(this,'checkPlanId',id);
    },
    //关闭实验室预案弹窗
    offPlanShade(index){
      this.$set(this.planMapList[index],'planType',false)
    },
    //开始/结束疏散按钮
    evacuationButton(){
      let self = this;
      if(this.evacuationType){
        //结束疏散
        this.$set(this,'shadeText','是否结束疏散?');
        this.$set(this,'shadeType',4);
      }else{
        //开始疏散
        //默认勾选所有疏散口
        if(!this.mapList[0]){
          this.msgError('没有楼层数据,无法疏散')
          return
        }
        for(let i=0;i<self.shadeMapList.length;i++){
          if(self.shadeMapList[i].type == 3){
            self.shadeMapList[i].roomCheckType = true;
          }
        }
        this.$set(this,'evacuationShadeType',true);
      }
    },
    //选中疏散通道
    shadeCheckRoomClick(item){
      item.roomCheckType = !item.roomCheckType;
    },
    //执行疏散 上报疏散通道
    executeEvacuation(type){
      let self = this;
      if(type == 1){
        let list = [];
        let doorPointNames = [];
        for(let i=0;i<self.shadeMapList.length;i++){
          if(self.shadeMapList[i].type == 3){
            if(!self.shadeMapList[i].roomCheckType){
              list.push(self.shadeMapList[i].key)
            }else{
              doorPointNames.push(self.shadeMapList[i].key)
            }
          }
        }
        if(!doorPointNames[0]){
          this.msgError('请选择疏散出口')
          return
        }
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
          subId: this.checkSubId,
          badPointNames:list,
          doorPointNames:doorPointNames,
        }
        laboratoryExitLineExecuteEvacuation(obj).then(response => {
          for(let o=0;o<self.mapList.length;o++){
            if(self.mapList[o].type == 2){
              for(let x=0;x<self.mapList[o].lightList.length;x++){
                let num = 0;
                for(let i=0;i<response.data.lightPointSet.length;i++){
                  if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                    num++
                  }
                }
                self.mapList[o].lightList[x].openType = num != 0;
              }
            }
          }
          for(let i=0;i<response.data.doorPointNames.length;i++){
            for(let o=0;o<self.mapList.length;o++){
              if(self.mapList[o].type == 3){
                if(response.data.doorPointNames[i] == self.mapList[o].key){
                  self.mapList[o].roomCheckType = true;
                }
              }
            }
          }
          this.msgSuccess(response.message);
          this.$set(this,'evacuationShadeType',false);
          this.$set(this,'evacuationType',true);
          this.$forceUpdate();
        })
      }else if(type == 2){
        this.$set(this,'evacuationShadeType',false);
      }
    },

    //稍后处理
    later() {
      console.log('预警切换');
      this.$parent.emergencyButton(1)
    },
    //发送消息
    sendBroadcast() {
      if (!this.broadcastText.trim()) return
      this.$emit('broadcast', {
        text: this.broadcastText,
        speakers: this.speakers.filter(s => s.active).map(s => s.name)
      })
      this.broadcastText = ''
    },

    //遮罩层开关/弹层提示确认
    shadeButton(type,text){
      if(type == 1){
        this.$set(this,'shadeType',1);
      }else if(type == 2){
        //疏散灯开关   执行疏散时才可以开启
        if(this.evacuationType){
          let newText = `是否`+(text.openType?'关闭':'开启')+`该疏散灯？`
          this.$set(this,'shadeData',text);
          this.$set(this,'shadeText',newText);
          this.$set(this,'shadeType',2);
        }
      }else if(type == 3){
        //设备开关
        this.$set(this,'shadeText',text);
        this.$set(this,'shadeType',3);
      }else if(type == 4){
        this.$set(this,'shadeType',0)
      }else if(type == 5){
        if(this.shadeType == 2){
          //开关灯弹窗
          if(this.shadeData.openType){
            //关闭
            this.laboratoryExitRelayCloseLight();
          }else{
            //开启
            this.laboratoryExitRelayOpenLight();
          }
        }else if(this.shadeType == 4){
          //结束疏散
          let obj = {
            buildId:this.buildId,
            floorId:this.floorId,
          };
          laboratoryExitLineEndEvacuation(obj).then(response => {
            this.$set(this,'shadeType',0);
            this.laboratoryExitLineGetRedisEvacuation();
          })
        }else if(this.shadeType == 5){
          //结束预案
          laboratoryPlanCloseRiskPlan({eventId:this.checkRiskPlanId}).then(response => {
            this.$set(this,'shadeType',0);
            this.laboratoryBigViewSelectTriggerInfo();
          });
        }
      }else if(type == 6){
        this.$set(this,'shadeText','是否结束疏散?');
        this.$set(this,'shadeType',4);
      }else if(type == 7){
        this.$set(this,'shadeText','传感器数据监测异常，确定要强制结束预案?');
        this.$set(this,'checkRiskPlanId',text);
        this.$set(this,'shadeType',5);
      }
    },
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null
      }
      if(time.indexOf('T')!== -1){
        let newTime = time.split('T')
        time = newTime[0] + ' ' + newTime[1]
      }
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else if (typeof time === 'string') {
          time = time.replace(new RegExp(/-/gm), '/');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },
    //全屏开启-关闭轮播
    stopTime(cameraIndexCode){
      this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
      this.$set(this,'fullVideoType',true);
    },
    //全屏关闭-开启轮播
    outFullScreen(){
      let self = this;
      this.$set(this,'fullVideoType',false);
      this.$set(this,'fullVideoProps',{});
    },
  },
  beforeDestroy() {
    //清除MQTT
    let self = this;
    self.offSensorMQTT();
    self.offEvacuateMQTT();
    self.offLightMQTT();
  },
}
</script>

<style lang="scss" scoped>
.emergency-dialog {
  width: 2200px;
  height: 1210px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(2, 8, 28, 0.99), rgba(1, 5, 20, 0.99));
  border: 2px solid rgba(30, 144, 255, 0.45);
  box-shadow: 0 0 200px rgba(30, 144, 255, 0.22), inset 0 0 120px rgba(0, 50, 140, 0.05);
  border-radius: 20px;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  .shade-max-big-box{
    height:100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    .shade-big-box{
      position: absolute;
      top:50%;
      left:50%;
      margin-left:-315px;
      margin-top:-125px;
      width:630px;
      height:250px;
      background: #011020;
      border:1px solid #116e8e;
      border-radius:10px;
      .off-button{
        position: absolute;
        right:15px;
        top:15px;
        color:#fff;
        font-size:24px;
        cursor: pointer;
      }
      .text-box{
        height:160px;
        color:#fff;
        overflow: hidden;
        p{
          padding:0 45px;
          font-size:24px;
          height:30px;
          line-height:30px;
          font-weight:500;
        }
        p:nth-child(1){
          margin-top:30px;
        }
        p:nth-child(2){
          margin-top:20px;
        }
      }
      .button-box{
        height:88px;
        border-top:2px solid #116e8e;
        display: flex;
        .button-null{
          flex:1;
        }
        .button-p{
          width:80px;
          height:40px;
          line-height:38px;
          margin-top:20px;
          text-align: center;
          border:1px solid #24D1F9;
          color:#fff;
          font-size:24px;
          border-radius:4px;
          cursor: pointer;
        }
        .button-p:hover{
          border:1px solid #24D1F9;
          background: #24D1F9;
          color:#fff;
        }
      }
    }
  }
}

/* 头部 */
.evac-hdr {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 44px;
  border-bottom: 1px solid rgba(30, 144, 255, 0.2);
  background: linear-gradient(90deg, rgba(0, 55, 160, 0.12), transparent);
  flex-shrink: 0;

  .evac-hdr-icon  { font-size: 50px; }

  .evac-hdr-title {
    font-size: 38px;
    font-weight: 700;
    color: #ddf0ff;
    letter-spacing: 6px;
    flex: 1;
  }

  .evac-hdr-close {
    font-size: 40px;
    color: rgba(168, 204, 232, 0.5);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;

    &:hover {
      background: rgba(30, 144, 255, 0.22);
      color: #ddf0ff;
    }
  }
}

/* 主体 */
.evac-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 左侧平面图 */
.evac-map-col {
  flex: 1;
  min-width: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .evac-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;

    .evac-legend-rect {
      width: 36px;
      height: 14px;
      background: #1e90ff;
      border-radius: 3px;
    }

    .evac-legend-text {
      font-size: 24px;
      color: rgba(110, 165, 210, 0.55);
    }
  }

  .evac-map-wrap {
    flex: 1;
    position: relative;
    min-height: 0;

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    //布局图
    .newEvacuation-map-max-big-box{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-user-select: none;
      img{
        -webkit-user-drag: none;
      }
      .newEvacuation-map-big-box{
        position: relative;
        border:1px dashed #24D1F9;
        cursor: pointer;
        .newEvacuation-map-for-box{
          position: absolute;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .newEvacuation-map-for-min-box{
            height:100%;
            position: relative;
            .map-for-name-p{
              padding:0 10px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              color:#24D1F9;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .map-for-num-p{
              padding:0 10px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              color:#24D1F9;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .user-num-box{
              position: absolute;
              left:0;
              display: flex;
              img{
                width:20px;
                height:15px;
                margin:10px;
              }
              p{
                line-height:35px;
                font-size:14px;
                color:#24D1F9;
              }
            }
            .user-num-one{
              top:0;
            }
            .user-num-two{
              bottom:0;
            }
            .position-box{
              position: absolute;
              font-size:14px;
              overflow: hidden;
            }
            .center-move-door-p-t {
              background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotate(180deg);
            }
            .center-move-door-p-b {
              background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
            }
            .center-move-door-p-l {
              background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotate(90deg);
            }
            .center-move-door-p-r {
              background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotateZ(270deg);
            }
            .lightTopOn {
              background: url("../../assets/emergencyManagement/icon_sjt.png");
              background-size: 100%;
            }
            .lightTopOff {
              background: url("../../assets/emergencyManagement/icon_shang_hs.png");
              background-size: 100%;
            }
            .lightBottomOn {
              background: url("../../assets/emergencyManagement/icon_xjt.png");
              background-size: 100%;
            }
            .lightBottomOff {
              background: url("../../assets/emergencyManagement/icon_xia_hs.png");
              background-size: 100%;
            }
            .lightLeftOn {
              background: url("../../assets/emergencyManagement/icon_zuo.png");
              background-size: 100%;
            }
            .lightLeftOff {
              background: url("../../assets/emergencyManagement/icon_zou_hs.png");
              background-size: 100%;
            }
            .lightRightOn {
              background: url("../../assets/emergencyManagement/icon_yuo.png");
              background-size: 100%;
            }
            .lightRightOff {
              background: url("../../assets/emergencyManagement/icon_you_hs.png");
              background-size: 100%;
            }
          }
        }
        .for-map-box-one{
          border:1px solid #24D1F9;
        }
        .for-map-box{
          /*background: rgba(1,16,32,0.5);*/
          background: rgba(86,170,255,0.2);
        }
        .for-map-box-two{
          background: url("../../assets/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);
          background-size: 80px 80px;
        }
        .for-map-box-two-check{
          background: url("../../assets/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
          background-size: 80px 80px;
        }
        .room-type-one{
          //选中
          background: rgba(30,118,142,0.4);
        }
        .room-type-two{
          //报警
          background: rgba(232,0,0,0.4);
          box-shadow:0 0 10px 1px #E80000 inset;
        }
        .room-type-three{
          //选中报警
          background: rgba(30,118,142,0.4);
          box-shadow:0 0 10px 1px #E80000 inset;
        }
        .room-type-noe{
          /*border:1px solid #666;*/
          /*background: rgba(102,102,102,0.6);*/
          /*color:#666!important;*/
          p{
            /*color:#666!important;*/
          }
        }
        .plan-map-for-box{
          font-weight:500;
          position:absolute;
          z-index:100;
          background: url("../../assets/emergencyManagement/img_bg_yatk.png");
          .plan-top-button-box{
            display: flex;
            p:nth-child(1){
              flex:1;
            }
            p:nth-child(2){
              font-size:14px;
              color:#fff;
              cursor: pointer;
              margin:9px 12px 0 0 ;
            }
          }
          .plan-time-box{
            display: flex;
            img{
              width:24px;
              height:24px;
              margin-left:19px;
              margin-right:8px;
            }
            p{
              line-height:24px;
              color:#fff;
              font-size:14px;
            }
          }
          .plan-text-box{
            display: flex;
            color:#fff;
            margin-top:15px;
            overflow: hidden;
            .plan-title-p{
              width:60px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              margin:0 10px 0 18px;
              border-radius:15px;
            }
            .plan-text-p{
              width:170px;
              height:20px;
              line-height:20px;
              font-size:14px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .color-type-1{
              background: #0183FA;
            }
            .color-type-2{
              background: #FF9900;
            }
            .color-type-3{
              background: #FF4800;
            }
            .color-type-4{
              background: #FF0000;
            }
          }
          .plan-text-box-two{
            display: flex;
            color:#fff;
            margin-top:22px;
            overflow: hidden;
            .plan-title-p{
              width:60px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              margin:0 10px 0 18px;
              border-radius:15px;
            }
            .plan-text-p{
              width:170px;
              height:20px;
              line-height:20px;
              font-size:14px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .color-type-1{
              background: #0183FA;
            }
            .color-type-2{
              background: #FF9900;
            }
            .color-type-3{
              background: #FF4800;
            }
            .color-type-4{
              background: #FF0000;
            }
          }
          .plan-button-p{
            margin:15px auto 0;
            width:100px;
            line-height:30px;
            background: #163277;
            color:#fff;
            text-align: center;
            border-radius:6px;
            cursor: pointer;
          }
        }
        .check-plan-map-for-box{
          z-index:1000!important;
        }
      }
    }
    .null-mapList{
      text-align: center;
      font-size:24px;
      color:#fff;
      line-height:300px;
    }
    //疏散图
    .evacuation-shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      .evacuation-shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        /*margin-left:-550px;
        margin-top:-335px;
        width:1100px;
        height:670px;*/
        margin-left:-866px;
        margin-top:-412px;
        width: 1733px;
        height: 824px;
        .position-title-p{
          position: absolute;
          top:31px;
          left:28px;
          font-size:16px;
          color:#fff;
          line-height:18px;
        }
        .position-off-button-p{
          position: absolute;
          top:32px;
          right:28px;
          font-size:16px;
          width:14px;
          height:14px;
          color:#24D1F9;
          cursor: pointer;
        }
        .evacuation-shade-map-max-big-box{
          width: 1733px;
          height: 824px;
          /*margin:77px 50px 20px;*/
          position: relative;
          /*border:1px solid #1E768E;*/
          .evacuation-shade-map-big-box{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-user-select: none;
            .evacuation-shade-map-box{
              position: relative;
              border:1px dashed #24D1F9;
              overflow: hidden;
              .evacuation-shade-map-for-box{
                position: absolute;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .evacuation-shade-map-min-box{
                  height:100%;
                  position: relative;
                  .map-for-name-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .map-for-num-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .user-num-box{
                    position: absolute;
                    left:0;
                    display: flex;
                    img{
                      width:20px;
                      height:15px;
                      margin:10px;
                    }
                    p{
                      line-height:35px;
                      font-size:14px;
                      color:#24D1F9;
                    }
                  }
                  .user-num-one{
                    top:0;
                  }
                  .user-num-two{
                    bottom:0;
                  }
                  .position-box{
                    position: absolute;
                    font-size:14px;
                    overflow: hidden;
                  }
                  .center-move-door-p-t {
                    background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../assets/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTopOn {
                    background: url("../../assets/emergencyManagement/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightTopOff {
                    background: url("../../assets/emergencyManagement/icon_shang_hs.png");
                    background-size: 100%;
                  }
                  .lightBottomOn {
                    background: url("../../assets/emergencyManagement/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightBottomOff {
                    background: url("../../assets/emergencyManagement/icon_xia_hs.png");
                    background-size: 100%;
                  }
                  .lightLeftOn {
                    background: url("../../assets/emergencyManagement/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightLeftOff {
                    background: url("../../assets/emergencyManagement/icon_zou_hs.png");
                    background-size: 100%;
                  }
                  .lightRightOn {
                    background: url("../../assets/emergencyManagement/icon_yuo.png");
                    background-size: 100%;
                  }
                  .lightRightOff {
                    background: url("../../assets/emergencyManagement/icon_you_hs.png");
                    background-size: 100%;
                  }
                }
              }
              .for-map-box-one{
                background: rgba(7,36,54,1);
                border:1px solid #24D1F9;
              }
              .for-map-box{
                /*background: rgba(1,16,32,1);*/
                background: rgba(6,30,48,1);
              }
              .for-map-box-two{
                background: url("../../assets/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,1);
                background-size: 80px 80px;
              }
              .for-map-box-two-check{
                background: url("../../assets/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
                background-size: 80px 80px;
              }
              .room-type-one{
                //选中
                background: rgba(30,118,142,0.4);
              }
              .room-type-two{
                //报警
                background: rgba(232,0,0,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-three{
                //选中报警
                background: rgba(30,118,142,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-noe{
                /*border:1px solid #666;*/
                /*background: rgba(102,102,102,0.6);*/
              }
            }
          }
        }
        .evacuation-button-p{
          width:500px;
          line-height:50px;
          border:1px solid #1E768E;
          box-shadow:0 0 10px 1px #1E768E inset;
          color:#24D1F9;
          border-radius:6px;
          text-align: center;
          margin:0 300px;
          cursor: pointer;
        }
      }
    }
  }
}

/* 告警浮层气泡 */
.evac-popup {
  position: absolute;
  top: 52%;
  left: 3%;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 10px;
  padding: 16px 20px;
  width: 320px;
  backdrop-filter: blur(6px);

  .evac-popup-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;

    .evac-popup-alarm { font-size: 24px; }
    .evac-popup-time  { font-size: 18px; color: rgba(255, 255, 255, 0.65); flex: 1; }
    .evac-popup-x     { font-size: 18px; color: rgba(255, 255, 255, 0.4); cursor: pointer; }
  }

  .evac-popup-badge {
    background: #ef4444;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px;
    padding: 3px 12px;
    display: inline-block;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }

  .evac-popup-msg {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
  }
}

/* 右侧监控 */
.evac-right-col {
  flex: 0 0 420px;
  border-left: 1px solid rgba(30, 144, 255, 0.15);
  display: flex;
  flex-direction: column;

  .video-for-box{
    flex:1;
  }
  .null-p{
    margin-top:20px;
    line-height:420px;
    text-align: center;
    font-size:24px;
    color:#CCD6D6;
  }
  .evac-right-hdr {
    padding: 16px 22px;
    font-size: 22px;
    color: rgba(110, 165, 210, 0.55);
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(30, 144, 255, 0.12);
    background: rgba(30, 144, 255, 0.04);
    flex-shrink: 0;
  }

  .evac-cam-slot {
    flex: 1;
    border-bottom: 1px solid rgba(30, 144, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 15, 26, 0.6);
    color: rgba(255, 255, 255, 0.2);
    font-size: 22px;
    letter-spacing: 3px;
    min-height: 130px;
  }

  .evac-floor-lbl {
    padding: 10px 22px;
    font-size: 20px;
    color: rgba(110, 165, 210, 0.55);
    letter-spacing: 3px;
    background: rgba(30, 144, 255, 0.06);
    border-top: 1px solid rgba(30, 144, 255, 0.12);
    border-bottom: 1px solid rgba(30, 144, 255, 0.12);
    flex-shrink: 0;
  }
}

/* 底部 */
.evac-footer {
  padding: 18px 38px;
  display: flex;
  gap: 22px;
  align-items: stretch;
  border-top: 1px solid rgba(30, 144, 255, 0.15);
  flex-shrink: 0;
}

/* 告警指标 */
.evac-metrics {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;

  .evac-metric-row {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .evac-ml { font-size: 18px; color: rgba(110, 165, 210, 0.55); margin-bottom: 4px; }
  .evac-mv { font-size: 22px; font-weight: 600; color: #ef4444; }
  .evac-metric-rt { font-size: 20px; color: rgba(255, 255, 255, 0.75); }
}

/* 语音广播 */
.evac-broadcast {
  flex: 1;
  border: 1px solid rgba(30, 144, 255, 0.22);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(30, 144, 255, 0.04);

  .evac-bc-hdr {
    display: flex;
    align-items: center;
    gap: 12px;

    .evac-bc-icon   { font-size: 24px; }
    .evac-bc-title  { font-size: 24px; font-weight: 600; color: #ddf0ff; flex: 1; }
    .evac-bc-device { font-size: 20px; color: rgba(110, 165, 210, 0.55); }
  }

  .evac-speaker-row {
    display: flex;
    gap: 12px;
  }

  .evac-speaker-btn {
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 18px;
    border: 1px solid rgba(30, 144, 255, 0.35);
    background: rgba(30, 144, 255, 0.1);
    color: #00d8ff;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    font-family: inherit;
    margin-right:10px;
  }
  .evac-speaker-btn-check{
    background: rgba(30, 144, 255, 0.25);
    border-color: #00d8ff;
  }

  .evac-input-row {
    display: flex;
    gap: 12px;
  }

  .evac-text-input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 20px;
    border: 1px solid rgba(30, 144, 255, 0.25);
    background: rgba(0, 8, 36, 0.7);
    color: #ddf0ff;
    outline: none;
    font-family: inherit;

    &::placeholder { color: rgba(255, 255, 255, 0.2); }
  }

  .evac-send-btn {
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid rgba(30, 144, 255, 0.4);
    background: rgba(30, 144, 255, 0.14);
    color: #00d8ff;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;

    &:hover { background: rgba(30, 144, 255, 0.3); }
  }
}

/* 操作按钮 */
.evac-actions {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;

  button {
    padding: 18px;
    border-radius: 10px;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
  }

  .evac-btn-later {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);

    &:hover { background: rgba(255, 255, 255, 0.1); }
  }

  .evac-btn-exec {
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;

    &:hover { background: rgba(239, 68, 68, 0.32); }
  }
}
</style>
