<template>
  <div class="alarm-dialog">
    <!-- 头部 -->
    <div class="alarm-header">
      <div class="header-left">
        <span class="siren-icon">🚨</span>
        <div>
          <div class="title">
            <span class="flash-icon">⚡</span>
            系统预警 · ALERT
          </div>
          <div class="subtitle">LABORATORY SAFETY MONITORING SYSTEM · EMERGENCY</div>
        </div>
      </div>
      <div class="close-btn" @click="$emit('close')">✕</div>
    </div>

    <!-- 主体 -->
    <div class="alarm-body">
      <!-- 左侧：摄像头画面 -->
      <div class="camera-panel">
        <div class="camera-label">■ 告警实验室实时监控画面</div>
        <div class="camera-view">
          <div class="camera-topbar">
            <span class="cam-name">CAM · {{ data.roomNum || 'N/A' }}</span>
            <span class="rec-badge">⬤ REC</span>
          </div>
          <div class="camera-screen">
            <H5PlayerVideo v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
            <img v-if="data.cameraUrl" :src="data.cameraUrl" class="cam-img" alt="camera" />
            <div v-else class="cam-placeholder">
              <span>暂无画面</span>
            </div>
            <!-- AI 检测标注框 -->
            <div v-if="data.detectionLabel" class="detection-box">
              <span class="detection-label">{{ data.detectionLabel }}</span>
            </div>
          </div>
          <div class="camera-bottom">
            <span class="lab-name-cam">{{ data.subName || '—' }}</span>
            <span class="ai-badge">🤖 AI检测</span>
          </div>
        </div>
      </div>

      <!-- 右侧：告警信息 -->
      <div class="info-panel">
        <div class="info-grid">
          <div class="info-cell">
            <div class="cell-label">告警实验室</div>
            <div class="cell-value">{{ data.subName || '—' }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">所属单位</div>
            <div class="cell-value">{{ data.deptName || '—' }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">告警指标</div>
            <div class="cell-value warn-text">{{ data.eventName || '—' }}</div>
          </div>
          <div class="info-cell">
            <div class="cell-label">当前值 / 安全阈值</div>
            <div class="cell-value">
              <span class="val-current">{{ data.triggerUploadData[0].deviceValue}} {{ data.triggerUploadData[0].unit || '' }}</span>
              <span class="val-sep"> / </span>
              <span class="val-threshold">{{ data.triggerUploadData[0].min}} - {{ data.triggerUploadData[0].max}} {{ data.triggerUploadData[0].unit || '' }}</span>
            </div>
          </div>
        </div>

        <!-- 走马灯提示 -->
        <div class="marquee-wrap">
          <div class="marquee-text">
            ▶▶ 请立即采取安全措施，疏散实验人员 ◀◀
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="alarm-footer">
      <button class="btn-later" @click="$emit('close')">稍后处理</button>
      <button class="btn-emergency" @click="emergency()">⚠ 应急疏散</button>
      <button class="btn-confirm"  @click="shadeButton(7)">确认处理</button>
    </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 == 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 { getCameraStream,laboratoryPlanCloseRiskPlan } from '@/api/screen'
import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
export default {
  name: 'Alarm',
  components: {
    H5PlayerVideo,fullH5PlayerVideo
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      videoData:null,
      //全屏视频参数
      fullVideoProps:{},
      fullVideoType:false,
      //弹窗相关
      shadeType:0,
      shadeText:'',
      shadeData:{},
      //结束预案时使用的预案ID
      checkRiskPlanId:null,
    }
  },
  mounted(){
    this.getCameraStream(this.data);
  },
  methods: {
    async getCameraStream(data) {
      console.log('data',data)
      try {
        let obj = {
          "subIds": [data.subId],
          "streamType": 1,
          "protocol": window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          "source": 4,
          "page": 1,
          "pageSize": 10
        }
        const res = await getCameraStream(obj)
        if(res.data.list[0]){
          this.$set(this,'videoData',{
            width: 400, //(宽度:非必传-默认600)
            height: 210, //(高度:非必传-默认338)
            url: res.data.list[0].streamUrl,
            cameraIndexCode: res.data.list[0].deviceNo,
          });
        }
      } catch (e) {
        console.error('AlertModal:', e)
      }
    },
    //全屏开启-关闭轮播
    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',{});
    },
    //切换疏散弹窗按钮
    emergency(){
      console.log('疏散切换');
      this.$parent.emergencyButton(2);
    },
    //遮罩层开关/弹层提示确认
    shadeButton(type){
      if(type == 4){
        this.$set(this,'shadeType',0)
      }else if(type == 5){
        if(this.shadeType == 5){
          //结束预案
          laboratoryPlanCloseRiskPlan({eventId:this.checkRiskPlanId}).then(response => {
            this.$emit('close')
          });
        }
      }else if(type == 7){
        this.$set(this,'shadeText','传感器数据监测异常，确定要强制结束预案?');
        this.$set(this,'checkRiskPlanId',this.data.eventId);
        this.$set(this,'shadeType',5);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.alarm-dialog {
  width: 2200px;
  height: 1210px;
  display: flex;
  flex-direction: column;
  background: #0d0002;
  border: 1px solid rgba(255, 40, 40, 0.5);
  box-shadow: 0 0 60px rgba(255, 0, 0, 0.3), inset 0 0 40px rgba(100, 0, 0, 0.15);
  border-radius: 8px;
  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;
        }
      }
    }
  }
}

/* 头部 */
.alarm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 63px 35px;
  background: linear-gradient(90deg, rgba(160, 0, 0, 0.35) 0%, rgba(40, 0, 0, 0.2) 100%);
  border-bottom: 1px solid rgba(255, 40, 40, 0.25);

  .header-left {
    display: flex;
    align-items: center;
    gap: 31px;
  }

  .siren-icon {
    font-size: 88px;
    animation: siren-flash 0.8s ease-in-out infinite alternate;
  }

  .title {
    font-size: 66px;
    font-weight: 700;
    color: #ff4040;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 16px;

    .flash-icon {
      color: #ffcc00;
    }
  }

  .subtitle {
    font-size: 31px;
    color: rgba(255, 120, 120, 0.7);
    letter-spacing: 3px;
    margin-top: 9px;
  }

  .close-btn {
    font-size: 57px;
    color: rgba(255, 100, 100, 0.6);
    cursor: pointer;
    padding: 13px 19px;
    border-radius: 4px;
    transition: color 0.2s;

    &:hover {
      color: #ff4040;
    }
  }
}

/* 主体 */
.alarm-body {
  display: flex;
  flex: 1;
  gap: 47px;
  padding: 47px 63px;
  overflow: hidden;
}

/* 摄像头区域 */
.camera-panel {
  flex: 0 0 754px;
  display: flex;
  flex-direction: column;

  .camera-label {
    font-size: 35px;
    color: #AE6162;
    margin-bottom: 25px;
    letter-spacing: 1px;
  }

  .camera-view {
    flex: 1;
    background: #0a0000;
    border: 1px solid rgba(255, 40, 40, 0.3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .camera-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 25px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 31px;

    .cam-name {
      color: #ccc;
      letter-spacing: 1px;
    }

    .rec-badge {
      color: #ff2020;
      font-weight: 600;
      animation: rec-blink 1s step-end infinite;
    }
  }

  .camera-screen {
    position: relative;
    flex: 1;
    background: #050000;
    display: flex;
    align-items: center;
    justify-content: center;

    .cam-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cam-placeholder {
      color: rgba(255, 100, 100, 0.3);
      font-size: 35px;
    }

    .detection-box {
      position: absolute;
      top: 94px;
      left: 126px;
      right: 126px;
      bottom: 94px;
      border: 2px solid #ff2020;
      box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);

      .detection-label {
        position: absolute;
        top: -57px;
        left: 0;
        background: #ff2020;
        color: #fff;
        font-size: 28px;
        padding: 6px 19px;
        white-space: nowrap;
      }
    }
  }

  .camera-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 25px;
    background: rgba(0, 0, 0, 0.5);

    .lab-name-cam {
      color: #aaa;
      font-size: 31px;
    }

    .ai-badge {
      background: rgba(0, 200, 100, 0.15);
      border: 1px solid rgba(0, 200, 100, 0.4);
      color: #00cc66;
      font-size: 28px;
      padding: 6px 22px;
      border-radius: 4px;
    }
  }
}

/* 信息区域 */
.info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 38px;

  .info-grid {
    gap: 25px;
  }
  .info-cell:nth-child(1) {
    margin-right: 31px;
  }
  .info-cell:nth-child(3) {
    margin-right: 31px;
    margin-top: 31px;
  }
  .info-cell:nth-child(4) {
    margin-top: 31px;
  }
  .info-cell {
    background: rgba(80, 0, 0, 0.2);
    border: 1px solid rgba(255, 40, 40, 0.2);
    border-radius: 6px;
    padding: 31px 38px;
    height: 188px;
    width: 612px;
    display: inline-block;

    .cell-label {
      font-size: 31px;
      color: #AE6162;
      margin-bottom: 19px;
      letter-spacing: 1px;
    }

    .cell-value {
      font-size: 44px;
      color: #EF4444;
      font-weight: 500;
      line-height: 1.3;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .warn-text  { color: #EF4444; }
    .val-current { color: #EF4444; }
    .val-sep     { color: #EF4444; }
    .val-threshold { color: #EF4444; }

    .val-unit {
      font-size: 35px;
      color: #EF4444;
    }
  }

  /* 走马灯 */
  .marquee-wrap {
    overflow: hidden;
    background: rgba(60, 40, 0, 0.3);
    border: 1px solid rgba(200, 150, 0, 0.3);
    border-radius: 4px;
    padding: 22px 0;
    text-align: center;

    .marquee-text {
      display: inline-block;
      white-space: nowrap;
      color: #EF4444;
      font-size: 38px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }
}

/* 底部按钮 */
.alarm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 31px;
  padding: 31px 63px 44px;
  border-top: 1px solid rgba(255, 40, 40, 0.15);

  button {
    font-size: 38px;
    padding: 22px 75px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s, transform 0.1s;

    &:active {
      transform: scale(0.97);
    }
  }

  .btn-later {
    background-color: rgba(69, 90, 116, 0.2);
    color: rgba(69, 90, 116, 1);
    border: 2px solid rgba(69, 90, 116, 1);
    font-weight: 700;
  }

  .btn-emergency {
    background-color: rgba(245, 158, 11, 0.2);
    color: rgba(245, 158, 11, 1);
    border: 2px solid rgba(245, 158, 11, 1);
    font-weight: 700;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
  }

  .btn-confirm {
    background-color: rgba(239, 68, 68, 0.2);
    color: rgba(239, 68, 68, 1);
    border: 2px solid rgba(239, 68, 68, 1);
    font-weight: 700;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
  }
}

/* 动画 */
@keyframes siren-flash {
  from { filter: brightness(0.6); }
  to   { filter: brightness(1.4) drop-shadow(0 0 12px rgba(255, 100, 0, 0.9)); }
}

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
</style>
