<template>
  <div class="box-1">
    <template v-if="!scenicSpotId">
      <Title1 title="交通信息" />
      <div class="traffic">
        <div class="traffic-item" v-for="(item, index) in trafficData" :key="index">
          <span class="traffic-item__title">{{ item.name }}</span>
          <countup
            :class="{
              'traffic-item__value--primary': item.type == 0,
              'traffic-item__value--success': item.type == 1,
              'traffic-item__value--error': item.type == 2
            }"
            :end-val="item.value"
          />
        </div>
      </div>
      <Title1 title="景区信息" />
      <div class="scenic">
        <div class="scenic-item" v-for="(item, index) in scenicSpotData.headList" :key="index">
          <span class="scenic-item__label">{{ item.name }}</span>
          <countup class="scenic-item__value" :end-val="item.value" />
        </div>
      </div>
      <div class="flex pt-20">
        <div class="box">
          <Title3 title="异常告警" />
          <Line :width="370" :height="180" :data="abnormalData" :xAxisData="abnormalXAxisData" />
        </div>
        <div class="box">
          <Title3 title="异常告警占比" />
          <div class="flex">
            <alarmRate :dataList="scenicSpotData.dataLists" />
            <!-- <alarmList /> -->
          </div>
        </div>
      </div>
      <Title1 title="交通信息" />
      <div class="scenic">
        <div
          class="scenic-item"
          v-for="(item, index) in trafficAbnormalityData.headList"
          :key="index"
        >
          <span class="scenic-item__label">{{ item.name }}</span>
          <countup class="scenic-item__value" :end-val="item.value" />
        </div>
      </div>
      <div class="flex pt-20">
        <div class="box">
          <Title3 title="拥堵告警" />
          <Line :width="370" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
        </div>
        <div class="box">
          <Title3 title="拥堵告警占比" />
          <div class="flex">
            <alarmRate :dataList="trafficAbnormalityData.dataLists" />
            <!-- <alarmList /> -->
          </div>
        </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 == '三峡之巅'"
            class="map-img"
            src="@/assets/images/sxzd.png"
            alt=""
        />
      </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"
              v-for="(item, index) in monitoringPointData.headList"
              :key="index"
            >
              <span class="monitor-statistics-item__label">{{ item.name }}</span>
              <countup class="monitor-statistics-item__value" :end-val="item.value" />
            </div>
          </div>
          <div class="bg">
            <Title3 title="今日安全告警" />
            <alarm-today :list="monitoringPointData.dataList" />
          </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"
              v-for="(item, index) in abnormalAlarmData.headList"
              :key="index"
            >
              <span class="traffic-alarm-statistics-item__label">{{ item.name }}</span>
              <countup class="traffic-alarm-statistics-item__value" :end-val="item.value" />
            </div>
          </div>
          <div class="bg">
            <Title3 title="异常告警占比" />
            <div class="flex">
              <!-- <alarmRate :dataList="[]" /> -->
              <div class="none">无异常</div>
              <!-- <alarmList /> -->
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</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'

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

  // 景区id
  let scenicSpotId = ref('')
  //  交通信息
  let trafficData = ref([
    { name: '总核心监控点位', type: 0, value: 0 },
    { name: '总核心分析点位', type: 1, value: 0 },
    { name: '总异常点位', type: 2, value: 0 }
  ])
  // 景区信息
  let scenicSpotData = ref({
    dataList: [],
    dataLists: []
  })
  // 交通告警信息
  let trafficAbnormalityData = ref({
    dataList: [],
    dataLists: [],
    headList: []
  })
  // 监控点位统计
  let monitoringPointData = ref({
    dataList: [],
    headList: [
      { name: '监控点位', type: 0, value: 0 },
      { name: '核心点位', type: 0, value: 0 },
      { name: '异常点位', type: 1, value: 0 }
    ]
  })
  // 监控点位统计
  let abnormalAlarmData = ref({
    dataList: [],
    headList: [
      { name: '当前告警总数', type: 0, value: 0 },
      { name: '安全告警总数', type: 0, value: 0 },
      { name: '已解除告警数', type: 1, value: 0 }
    ]
  })

  // 异常告警
  let abnormalData = computed(() => {
    return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }]
  })
  let abnormalXAxisData = computed(() => {
    return scenicSpotData.value.dataList.map((item) => item.name)
  })

  // 拥堵告警
  let jamlData = computed(() => {
    return [{ data: trafficAbnormalityData.value.dataList.map((item) => item.value) }]
  })
  let jamXAxisData = computed(() => {
    return trafficAbnormalityData.value.dataList.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 'trafficData':
            trafficData.value = val.headList
            break
          case 'scenicSpotData':
            scenicSpotData.value = val
            break
          case 'trafficAbnormalityData':
            trafficAbnormalityData.value = val
            break
          case 'monitoringPointLocation':
            monitoringPointData.value = val
            break
          case 'abnormalAlarmData':
            abnormalAlarmData.value = val
            break
        }
      }
    }
  )

  let monitorChange = null

  onMounted(() => {
    monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
      scenicSpotId.value = data.scenicSpotId
      sendMessage(
        JSON.stringify({
          action: 'start',
          type: 'index',
          scenicSpotId: data.scenicSpotId
        })
      )
    })
  })
  onUnmounted(() => {
    PubSub.unsubscribe(monitorChange)
  })
</script>

<style scoped lang="scss">
  .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(580);
    background-color: #fff;
    .map-img {
      width: 100%;
      height: 100%;
    }
  }
  .monitor {
    width: vw(405);
    margin-right: vw(8);
    &-statistics {
      height: vh(70);
      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(70);
      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(142);
        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-size: 100% 100%;
          .scenic-item__value {
            color: #f15a25;
          }
        }
        &: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 {
      width: vw(394);
      height: vh(220);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
        margin-right: vw(10);
      }
      .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>
