<template>
  <div class="box-1">
    <template v-if="!scenicSpotId">
      <Title1 title="AI分析统计" />
      <div class="traffic">
        <div class="traffic-item">
          <span class="traffic-item__title">总监控点位 </span>
          <countup
            class="traffic-item__value--primary"
            :end-val="aiAnalyzeData.allCoreMonitoringPoints"
          />
        </div>
        <div class="traffic-item">
          <span class="traffic-item__title">核心分析点位 </span>
          <countup
            class="traffic-item__value--success"
            :end-val="aiAnalyzeData.allAnalysisPoints"
          />
        </div>
        <div class="traffic-item">
          <span class="traffic-item__title">异常点位 </span>
          <countup class="traffic-item__value--error" :end-val="aiAnalyzeData.abnormalPoints" />
        </div>
      </div>
      <Title1 title="景区智能AI分析" />
      <div class="scenic">
        <div class="scenic-item">
          <span class="scenic-item__label">核心景区分析点位</span>
          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">异常点位</span>
          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalPoints" />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">异常告警</span>
          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">已处理</span>
          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
        </div>
      </div>
      <div class="flex pt-20 gap8">
        <div class="box">
          <Title3 title="异常告警" />
          <Line
            :width="370"
            :height="180"
            :data="abnormalAlarm"
            :xAxisData="abnormalAlarmXAxisData"
          />
        </div>
        <div class="box">
          <Title3 title="异常告警占比" />
          <div class="flex">
            <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
          </div>
        </div>
      </div>
      <Title1 title="交通智能AI分析" />
      <div class="scenic">
        <div class="scenic-item">
          <span class="scenic-item__label">核心路段分析点位</span>
          <countup
            class="scenic-item__value"
            :end-val="trafficAiAnalyzeData.coreMonitoringPoints"
          />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">拥堵点位</span>
          <countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalPoints" />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">拥堵告警</span>
          <countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalWarnings" />
        </div>
        <div class="scenic-item">
          <span class="scenic-item__label">已处理</span>
          <countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.handled" />
        </div>
      </div>
      <div class="flex pt-20">
        <div class="box">
          <Title3 title="拥堵告警" />
          <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
        </div>
      </div>
    </template>

    <template v-if="scenicSpotId">
      <div class="detection-top">
       <!-- <img
          v-if="scenicSpotId == 'root000000'"
          class="map-img"
          src="@/assets/images/bdc.png"
          alt=""
        />
        <img
          v-if="scenicSpotId == 'root00000000'"
          class="map-img"
          src="@/assets/images/sxzd.png"
          alt=""
        />
        <img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" /> -->
		<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
		<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
		<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
      </div>
      <div class="flex">
        <div class="monitor">
          <div class="t-title">
            <span>监控点位统计</span>
          </div>
          <div class="monitor-statistics">
            <img class="monitor-statistics-icon" src="@/assets/images/t-ico-0.png" />
            <div class="monitor-statistics-item">
              <span class="monitor-statistics-item__label">监控点位</span>
              <countup
                class="monitor-statistics-item__value"
                :end-val="pointAlarmData.coreMonitoringPoints"
              />
            </div>
            <div class="monitor-statistics-item">
              <span class="monitor-statistics-item__label">核心点位</span>
              <countup
                class="monitor-statistics-item__value"
                :end-val="pointAlarmData.analysisPoints"
              />
            </div>
            <div class="monitor-statistics-item">
              <span class="monitor-statistics-item__label">异常点位</span>
              <countup
                class="monitor-statistics-item__value"
                :end-val="pointAlarmData.abnormalPoints"
              />
            </div>
          </div>
          <div class="bg">
            <Title3 title="今日安全告警" />
            <Line
              :width="370"
              :height="180"
              :data="abnormalAlarm"
              :xAxisData="abnormalAlarmXAxisData"
            />
          </div>
        </div>
        <div class="traffic-alarm">
          <div class="t-title">
            <span>异常告警统计</span>
          </div>
          <div class="traffic-alarm-statistics">
            <img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
            <div class="traffic-alarm-statistics-item">
              <span class="traffic-alarm-statistics-item__label">当前告警总数</span>
              <countup
                class="traffic-alarm-statistics-item__value"
                :end-val="pointAlarmData.abnormalAlarm"
              />
            </div>
            <div class="traffic-alarm-statistics-item">
              <span class="traffic-alarm-statistics-item__label">安全告警总数</span>
              <countup
                class="traffic-alarm-statistics-item__value"
                :end-val="pointAlarmData.allAbnormalAlarm"
              />
            </div>
            <div class="traffic-alarm-statistics-item">
              <span class="traffic-alarm-statistics-item__label">已解除告警总数</span>
              <countup
                class="traffic-alarm-statistics-item__value"
                :end-val="pointAlarmData.handled"
              />
            </div>
          </div>
          <div class="bg">
            <Title3 title="异常告警占比" />
            <div class="flex">
              <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
  <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import alarmRate from './alarmRate'
  import alarmList from './alarmList'
  import alarmToday from './alarmToday'

  import { useWebSocket } from '@/hooks/socket'
  import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
  import {getPreviewUrlApi} from "@/api/home.js";

  const { isConnected, dataRes, sendMessage } = useWebSocket(
    `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/monitor`
  )

  // 景区id
  let scenicSpotId = ref('')
  //  AI分析统计
  let aiAnalyzeData = ref({
    abnormalPoints: 0,
    allAnalysisPoints: 0,
    allCoreMonitoringPoints: 0
  })
  // 景区智能AI分析
  let scenicAiAnalyzeData = ref({
    abnormalAlarm: 0,
    abnormalPoints: 0,
    coreMonitoringPoints: 0,
    handled: 0
  })
  let abnormalData = ref({
    abnormalAlarm: [],
    abnormalAlarmPercent: []
  })
  // 交通告警信息
  let trafficAiAnalyzeData = ref({
    abnormalWarnings: 0,
    abnormalPoints: 0,
    coreMonitoringPoints: 0,
    handled: 0,
    abnormalAlarm: []
  })
  // 监控点位异常告警统计
  let pointAlarmData = ref({
    abnormalPoints: 0, // 异常点位
    analysisPoints: 0, // 核心点位
    coreMonitoringPoints: 0, // 监控点位
    abnormalAlarm: 0, // 当前告警总数
    allAbnormalAlarm: 0, // 安全告警总数
    handled: 0 // 已处理告警数
  })
  let src = ref('')
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
  window.addEventListener("message", async(e) => {
    let {code,data} = await getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode:e.data.cameraIndexCode
    })
    if(code===200){
      src.value = data.url
      cameraIndexCode.value = e.data.cameraIndexCode
      videoShow.value = true
    }
  });
  // 异常告警
  let abnormalAlarm = computed(() => {
    return [{ data: abnormalData.value.abnormalAlarm.map((item) => item.value) }]
  })
  let abnormalAlarmXAxisData = computed(() => {
    return abnormalData.value.abnormalAlarm.map((item) => item.name)
  })

  // 拥堵告警
  let jamlData = computed(() => {
    return [{ data: trafficAiAnalyzeData.value.abnormalAlarm.map((item) => item.value) }]
  })
  let jamXAxisData = computed(() => {
    return trafficAiAnalyzeData.value.abnormalAlarm.map((item) => item.name)
  })

  watch(
    () => isConnected.value,
    (val) => {
      if (val) {
        sendMessage(
          JSON.stringify({
            action: 'start',
            type: 'index',
            scenicSpotId: ''
          })
        )
      }
    }
  )
  watch(
    () => dataRes.value,
    (val) => {
      if (val) {
        console.log(val, '安全接受消息')
        switch (val.type) {
          case 'AI分析统计':
            aiAnalyzeData.value = val.data
            break
          case '获取景区智能AI分析':
            scenicAiAnalyzeData.value = val.data
            break
          case '异常警告图表和警告比例图表':
            abnormalData.value = val.data
            break
          case '监控点位统计和异常告警统计':
            pointAlarmData.value = val.data
            break
          case '交通智能AI分析':
            trafficAiAnalyzeData.value = val.data
        }
      }
    }
  )

  let monitorChange = null

  onMounted(() => {
    monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
		// console.log(data,'监听测试一下  反馈信息')
      scenicSpotId.value = data.scenicSpotId
      sendMessage(
        JSON.stringify({
          action: 'start',
          type: 'index',
          scenicSpotId: data.scenicSpotId
        })
      )
    })
  })
  onUnmounted(() => {
    PubSub.unsubscribe(monitorChange)
  })
</script>

<style scoped lang="scss">
  .gap8 {
    gap: vw(8);
  }
  .none {
    width: vw(380);
    height: vh(200);
    font-size: vw(28);
    color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .detection-top {
    width: 100%;
    height: vh(560);
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      height: vh(10); /* 滚动条的宽度 */
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: 'transparent'; /* 轨道的背景色 */
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
      border-radius: 5px; /* 滑块的圆角 */
    }
    .map-img {
      width: auto;
      height: 100%;
    }
  }
  .monitor {
    width: vw(405);
    margin-right: vw(8);
    &-statistics {
      height: vh(90);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      background-image: url('@/assets/images/i-data-bg-1.png');
      background-size: 100% 100%;
    }
    &-statistics-icon {
      width: vw(45);
      height: vw(48);
    }
    &-statistics-item {
      &__label {
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
      }
      &__value {
        margin-top: vh(10);
        font-weight: bold;
        font-size: vw(24);
        color: #ffffff;
      }
      &:nth-child(4) {
        .monitor-statistics-item__value {
          color: #e21b1b;
        }
      }
    }
  }
  .traffic-alarm {
    width: vw(405);
    &-statistics {
      height: vh(90);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      background-image: url('@/assets/images/i-data-bg-1.png');
      background-size: 100% 100%;
    }
    &-statistics-icon {
      width: vw(45);
      height: vw(48);
    }
    &-statistics-item {
      &__label {
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
      }
      &__value {
        margin-top: vh(10);
        font-weight: bold;
        font-size: vw(24);
        color: #e21b1b;
        text-align: center;
      }
      &:nth-child(4) {
        .traffic-statistics-item__value {
          color: rgba(167, 0, 0, 0.6);
        }
      }
    }
  }
  .bg {
    padding: vw(5);
    margin-top: vh(8);
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
    &:nth-child(1) {
      margin-right: vw(10);
    }
  }
  .t-title {
    margin: vh(10) auto;
    width: 100%;
    height: vh(32);
    font-weight: 800;
    font-size: vw(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('@/assets/images/title-4.png');
    background-size: 100% 100%;
  }
  :deep(.el-select__wrapper) {
    background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
    border: none;
    box-shadow: none;
    border-top-left-radius: vh(30);
    border-bottom-left-radius: vh(30);
    font-size: vw(14);
    color: #fff;
  }
  .box-1 {
    margin-top: vh(120);
    width: vw(800);
    height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-2.png');
    background-size: 100% 100%;
    .traffic {
      margin-top: vh(20);
      height: vh(72);
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      &-item {
        width: vw(229);
        height: vw(72);
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
        padding-left: vw(84);
        display: flex;
        flex-direction: column;
        justify-content: center;

        &:nth-child(1) {
          background-image: url('@/assets/images/m-t-1.png');
          background-size: 100% 100%;
        }
        &:nth-child(2) {
          background-image: url('@/assets/images/m-t-2.png');
          background-size: 100% 100%;
        }
        &:nth-child(3) {
          background-image: url('@/assets/images/m-t-3.png');
          background-size: 100% 100%;
        }
      }
      &-item__title {
        margin-bottom: vh(6);
        font-weight: 400;
        font-size: vw(14);
        color: #ffffff;
      }
      &-item__value--primary {
        font-weight: bold;
        font-size: vw(24);
        color: #12b5fd;
      }
      &-item__value--success {
        font-weight: bold;
        font-size: vw(24);
        color: #02f9fa;
      }
      &-item__value--error {
        font-weight: bold;
        font-size: vw(24);
        color: #f15a25;
      }
    }
    .scenic {
      display: flex;
      align-items: center;
      height: vh(106);
      gap: vw(20);

      &-item {
        width: vw(182);
        height: vw(106);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1) {
          background-image: url('/src/assets/images/four-t-1.png');
          background-size: 100% 100%;
          .scenic-item__value {
            color: #02f9fa;
          }
        }
        &:nth-child(2) {
          background-image: url('/src/assets/images/four-t-1.png');
          background-size: 100% 100%;
          .scenic-item__value {
            color: #02f9fa;
          }
        }
        &:nth-child(3) {
          background-image: url('/src/assets/images/four-t-2.png');
          background-size: 100% 100%;
          .scenic-item__value {
            color: #f15a25;
          }
        }
        &:nth-child(4) {
          // background-image: url('/src/assets/images/four-t-3.png');
		  background-image: url('/src/assets/images/four-t-1.png');
          background-size: 100% 100%;
          .scenic-item__value {
            // color: #f15a25;
			color: #02f9fa;
          }
        }
        &:nth-child(5) {
          background-image: url('/src/assets/images/four-t-4.png');
          background-size: 100% 100%;
          .scenic-item__value {
            color: #12b5fd;
          }
        }
      }
      &-item__label {
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
      }
      &-item__value {
        font-weight: bold;
        font-size: vw(24);
        margin-top: vh(10);
      }
    }

    .unit {
      color: #02f9fa;
      font-size: vw(14);
      margin-bottom: vh(4);
    }

    .box {
      flex: 1;
      height: vh(220);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;

      // .title-2 {
      //   width: vw(253);
      //   height: vh(28);
      //   display: flex;
      //   align-items: center;
      //   background-image: url('@/assets/images/title-5.png');
      //   background-size: 100% 100%;
      //   & > span {
      //     padding-left: vw(22);
      //     font-weight: bold;
      //     font-size: vw(15);
      //     background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
      //     -webkit-background-clip: text;
      //     background-clip: text;
      //     -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
      //     color: transparent; /* 兼容其他浏览器 */
      //   }
      // }
      .statistic {
        display: flex;
        margin-top: vh(12);
        width: 100%;
        height: vh(88);
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        &-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        &-title {
          font-size: vw(14);
          color: rgba(255, 255, 255, 0.9);
        }
        &-value {
          margin-top: vh(10);
          font-weight: bold;
          font-size: vw(24);
          color: #02f9fa;
        }
        .count {
          font-weight: bold;
          font-size: vw(28);
          color: #ff4400 !important;
        }
        .prefix,
        .suffix {
          color: #ff4400;
          font-size: vw(12);
        }
      }
      .title-3 {
        position: relative;
        width: vw(344);
        height: vh(12);
        margin-top: vh(20);
        background-image: url('@/assets/images/title-6.png');
        background-size: 100% 100%;

        & > span {
          position: absolute;
          bottom: vh(4);
          left: vw(20);
          font-size: vw(15);
          font-weight: bold;
          background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
          color: transparent; /* 兼容其他浏览器 */
        }
      }
    }
  }
</style>
