<template>
  <div class="homeBox" style="background-color: #07274d;">
    <!-- 头部 -->

    <Head></Head>
    <!-- 左边 -->
    <div class="home-aside asideL">
      <div class="asideL-top">
        <DbCount></DbCount>
      </div>
      <div class="asideL-Bottom">
        <div class="commom-aside">
          <QbsbCount></QbsbCount>
        </div>
        <div class="commom-aside">
          <!-- <KeyPpersonneltypes /> -->
           <Statistics/>
        </div>
        <div class="commom-aside"  @mouseenter="mouseEnter" @mouseleave="mouseLeave" >
          <div style="position: relative; height: 100%;">
            <transition name="flip" mode="out-in">
              <div :key="'qb'" v-if="reversalPushShow" class="flip-wrapper">
                <QblyType @reversalPush="reversalPush"></QblyType>
              </div>
              <div :key="'text'" v-else class="flip-wrapper">
                <TextType @reversalPush="reversalPush"></TextType>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="home-aside asideR">
      <div class="commom-aside-big">
        <Calendar />
      </div>
      <div class="commom-aside-big" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
            <transition name="flip" mode="out-in">
              <div :key="'qb'" v-if="reversalShow" class="flip-wrapper">
                <Experience @reversalPush="reversal"></Experience>
              </div>
              <div :key="'text'" v-else class="flip-wrapper">
                <KeyPpersonneltypes @reversalPush="reversal"></KeyPpersonneltypes>
              </div>
            </transition>
      </div>
      <div class="commom-aside-small">
        <!-- <SituationAssessment /> -->
        <Judgment />
      </div>
    </div>
    <!-- 中间 -->
    <div class="home-center">
      <div class="middle-top">
        <Yszs />
      </div>
      <div class="flex middle-bottom mt10">
        <div style="width: 30px;position: absolute;z-index: 100;left: 0;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
          <el-icon :size="20" v-if="ispLayBack" @click="closeLayBack">
            <Bell />
          </el-icon>
          <el-icon :size="20" v-else @click="openLayBack">
            <MuteNotification />
          </el-icon>
        </div>
        <div style="width: 30px;position: absolute;z-index: 100;left: 34px;background-color: #07274d;height: 30px;text-align: center;line-height:30px;">
          <el-tooltip class="item" effect="dark" :content="showNotification ? '通知关闭' : '通知打开'" placement="bottom">
            <el-icon :size="20" @click="handleOpenNotification" style="top: 3px;">
              <Open v-if="showNotification"  />
              <TurnOff v-else  />
            </el-icon>
          </el-tooltip>
        </div>
        <div style="width: 100%;border: 1px sienna;position: relative">
          <GdMap></GdMap>
        </div>
        <div class="flex-1" style="width: 340px;position: absolute;z-index: 100;right: 0;">
          <DeployControl />
        </div>
        <div class="flex-1" style="width: 340px;position: absolute;z-index: 100;left: 0;top: 30%;">
          <GeneralWindow />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="home-foot-t">
      <div style="width: 33%;">
        <!-- <WarningDistrict></WarningDistrict> -->
        <WarningPoints></WarningPoints>
      </div>
      <div style="width: 33%;">
         <transition name="flip" mode="out-in">
          <div :key="'qb'" v-if="modelWarning" class="flip-wrapper">
            <WarningLevels @changeModel="changeModel"></WarningLevels>
          </div>
          <div :key="'text'" v-else class="flip-wrapper">
            <BkWarning @changeModel="changeModel"></BkWarning>
          </div>
         </transition>

      </div>
      <div style="width: 33%;">
        <Bkcz></Bkcz>
      </div>
    </div>

  </div>
  <!-- 左边弹窗 -->
  <LeftDialog></LeftDialog>

</template>

<script setup>
import { qcckGet ,qcckPost} from "@/api/qcckApi.js";
import { ref, onMounted, onUnmounted } from 'vue'
import LeftDialog from './dialog/leftDialog'
import GdMap from "@/components/GdMap/index.vue";
import Head from './layout/head.vue'
import DbCount from './model/dbCount.vue'
import QbsbCount from './model/qbsbCount.vue'
import QblyType from './model/qblyType.vue'
import TextType from './model/textType.vue'
import Bkcz from './model/bkcz.vue'
import WarningLevels from './model/warningLevels.vue'
import BkWarning from './model/bkWarning.vue'
import Yszs from './model/yszs.vue'
import DeployControl from './model/deployControl.vue';
import Experience from './model/experience.vue'
import Calendar from './model/calendar.vue'
import KeyPpersonneltypes from './model/keyPpersonneltypes.vue'
import WarningDistrict from './model/WarningDistrict.vue'
import WarningPoints from './model/warningPoints.vue'
import { getItem, setItem } from "@/utils/storage";
import emitter from "@/utils/eventBus.js";
import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
import Judgment from './model/judgment.vue'
import { tbYjxxGetList } from '@/api/zdr.js'
import GeneralWindow from './model/generalWindow.vue'
import WebSoketClass from '@/utils/webSocket.js'
import { timeValidate } from '@/utils/tools.js'
import Statistics from './model/statistics.vue'
// 导入音频播放器工具类
import audioPlayer from '@/utils/audioPlayer'
const webSoket = new WebSoketClass()
const modelWarning = ref(true)
const changeXzqh = (val, trg) => {
  setTimeout(() => {
    // 先移除已有的边界
    emitter.emit('removeBj')
    if (trg) {
      // 如果传入的是多个区域数据（二维数组）
      const features = val.map((area, index) => ({
        geometry: {
          type: "Polygon",
          coordinates: [area] // 确保格式正确
        },
        properties: { },
        type: "Feature"
      }))
      // 循环为每个区域创建单独的多边形，这样可以设置不同的样式
      features.forEach((feature, index) => {
        emitter.emit('setBoundarys', {
          data: {
            type: "FeatureCollection",
            features: [feature]
          },
          color: 'rgba(209, 112, 65, 0.8)',
          fillColor: 'rgba(255, 255, 255,0)',
          outLineWidth: 2,
        })
      })
    } else {

      // 保持原来的逻辑，处理单个区域
      emitter.emit('setBoundarys', {
        data: {
          type: "FeatureCollection",
          features: [
            {
              geometry: {
                type: "Polygon",
                coordinates: [val] // 使用正确的GeoJSON格式
              },
              properties: {},
              type: "Feature"
            }
          ]
        },
        color: 'rgba(209 112 65,1)',
        fillColor: 'rgba(255, 255, 255,0)',
      })
    }
  }, 3000)
}
const getDepId = () => {
  const deptId = getItem('deptId')
  const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
  const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
  if (deptLevel.startsWith('2')) {
    const data = Object.values(bm).map(item => item);
    changeXzqh(data, true)
  } else {
    switch (deptCode) {
      case '54040200000'://巴宜区
        changeXzqh(bm[542621])
        break;
      case '54042400000'://波密县
        changeXzqh(bm[542625])
        break;
      case '54042500000'://察隅县
        changeXzqh(bm[542626])
        break;
      case '54042100000'://工布江达县
        changeXzqh(bm[542622])
        break;
      case '54042600000'://朗县
        changeXzqh(bm[542627])
        break;
      case '54042200000'://米林县
        changeXzqh(bm[542623])
        break;
      case '54042300000'://墨脱县
        changeXzqh(bm[542624])
        break;
      default:
        const data = Object.values(bm).map(item => item);
        changeXzqh(data, true)
        break;
    }
  }
}

const indexNum = ref(0) //当前展示的气泡框
const showNotification = ref(false) //是否自动展开提示
const allDep = ref([]) //所有部门
const handleOpenNotification = () => {
  showNotification.value = !showNotification.value;
  emitter.emit('deletePointArea','hm_pop')
  if(showNotification.value){
    // 主动展开提示，默认展示所有
    allDep.value.forEach(item => {
      emitter.emit("makerPopup", { data:item, flag: "hm_pop",type:'Custom'});
    })
  } else {
    // 关闭主动展开后，恢复循环单条气泡展示
    startPopupLoop()
  }
}
const makerCenter = () => { 
  const dw = require("@/assets/point/dingwei.png")
  qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
    emitter.emit('deletePointArea','hm')
    let list = res || [];
    list.forEach(item => {
      let obj = centralPoint.find(i => i.name == item.ssbm || i.ssbmdm == item.ssbmdm);
      if(obj){
        item.jd = obj.point[0];
        item.wd = obj.point[1];
      }
    })
    allDep.value = list;
    emitter.emit("addPointArea", { coords:list, icon: dw, flag: "hm", size: '14px', showTitle: false, offset: [0, -25] });
  })
}
//播放音频
const ispLayBack = ref(true)

// 打开播放
const openLayBack = () => {
  ispLayBack.value = true
}

// 关闭播放
const closeLayBack = () => {
  ispLayBack.value = false
  audioPlayer.pause()
}

// 初始化音频播放器
const initAudioPlayer = () => {
  // 使用工具类初始化音频播放器
  audioPlayer.init(require('@/assets/images/yjsy.mp3'))
    .then(() => {
      console.log('音频播放器初始化成功');
      // 只有当ispLayBack为true时才播放
      if (ispLayBack.value) {
        audioPlayer.muted = false
      }
    })
    .catch(error => {
      console.error('初始化音频播放器失败:', error);
    })
}
const bnTimer = ref(null)
const popupTimer = ref(null)

const startPopupLoop = () => {
  clearInterval(popupTimer.value)
  popupTimer.value = setInterval(() => {
    if (!showNotification.value && allDep.value.length > 0) {
      emitter.emit('deletePointArea','hm_pop')
      emitter.emit("makerPopup", { data: allDep.value[indexNum.value], flag: "hm_pop", type:'Custom' })
      indexNum.value = (indexNum.value + 1) % allDep.value.length
    }
  }, 10000)
}
// 组件挂载时初始化音频播放器
onMounted(() => {
  getDepId()
  makerCenter()
  bnTimer.value = setInterval(()=>{
    makerCenter()
  },60000)
  startPopupLoop()
  mouseLeave()
  getTbYjxxGetList()
  // 初始化音频播放器
  initAudioPlayer()
  // webSoket.connect()
  // 监听音频播放事件，获取WebSocket消息数据
  emitter.on("openYp", (newsDate) => {
    // 使用工具类播放音频，自动处理静音切换
    if (ispLayBack.value) {
      audioPlayer.play()
        .then(() => {
          console.log('WebSocket触发音频播放成功');
        })
        .catch(error => {
          console.error('WebSocket触发音频播放失败:', error);
        })
      const coords = {
        id: newsDate.id,
        jd: newsDate.jd,
        wd: newsDate.wd,
        yjtp: newsDate.yjTp,
        yjnr: newsDate.yjNr,
        yjLx: newsDate.yjlx,
        yjlx: '01',
        yjsj: newsDate.yjSj,
        rysfzh: newsDate.yjRysfzh,
        ryxm: newsDate.yjRyxm,
      }
      const icons = require("@/assets/point/jq.png")
      emitter.emit('addPointArea', { coords: [{ jd: coords.jd, wd: coords.wd }], icon: icons, flag: 'yjs' })
      emitter.emit('yjDetail', coords)
    }
  })
  emitter.on("closeYp", () => {
    audioPlayer.pause()
  })
})

// 布控预警上图
const getTbYjxxGetList = () => {
  // 设置为当天时间范围：00:00:00 到 23:59:59
  const today = new Date();
  const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0).getTime();
  const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59).getTime();
  const promes = {
    startTime:timeValidate(startTime),
    endTime:timeValidate(endTime),
  }
  tbYjxxGetList(promes).then(res => {
    const coords = res.map(item => {
      return {
        id: item.id,
        jd: item.jd,
        wd: item.wd,
        yjtp: item.yjTp,
        yjnr: item.yjNr,
        yjLx: item.yjlx,
        yjlx: '01',
        yjsj: item.yjSj,
        rysfzh: item.yjRysfzh,
        ryxm: item.yjRyxm,
      }
    })
    const icon = require("@/assets/point/yj.png")
    emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
  })
}

let timing = ref(true)
// 情报翻转
const reversalPushShow = ref(true)
const reversalPush = () => {
  reversalPushShow.value = !reversalPushShow.value
  // 移除clearInterval调用，避免定时器被清除
}
// 论坛翻转
const reversalShow = ref(true)
const reversal= () => {
  reversalShow.value = !reversalShow.value
  // 移除clearInterval调用，避免定时器被清除
}

// 鼠标移入
const mouseEnter = () => {
  clearInterval(timing.value)
}
// 鼠标移出
const mouseLeave = () => {
  // 清除可能存在的旧定时器，避免多个定时器同时运行
  clearInterval(timing.value)
  // 设置为5秒自动切换，更容易测试效果
  timing.value = setInterval(() => {
    reversalPush()
    reversal()
  }, 30000)
}

function changeModel(){
  modelWarning.value = !modelWarning.value
}
onUnmounted(() => {
  clearInterval(timing.value)
  clearInterval(bnTimer.value)
  clearInterval(popupTimer.value)
  // 组件卸载时停止音频播放并释放资源
  if (audioPlayer) {
    audioPlayer.destroy()
  }
  // 组件卸载时关闭WebSocket连接
  if (webSoket) {
    webSoket.closeConnection()
  }
})


</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.fxq {
  border-radius: 35px;
  width: 35px;
  transition: transform 0.5s ease, width 0.5s ease;
  background-color: rgb(1, 127, 245);
  transform-origin: left center;
  overflow: hidden;
  margin-bottom: 10px;

  .icon {
    display: flex;
    align-items: center;
    width: 35px;
    height: 35px;
    justify-content: center;
    line-height: 35px;
    font-size: 30px;
  }

  .title {
    height: 35px;
    line-height: 35px;

    img {
      margin-left: 9.5px;
      width: 16px;
      margin-right: 10px;
      margin-top: -3px;
      vertical-align: middle;
      height: 16px;
    }
  }
}

.fxq2 {
  background-color: #9d88f9;
}

.fxq1:hover {
  width: 120px;
}

.fxq2:hover {
  width: 120px;

  // background-color: red;
}

.fxq3:hover {
  width: 120px;
}

::v-deep .badge-top-left .el-badge__content {
  top: 0;
  right: auto;
  left: -10px;
  transform: translateY(-50%) translateX(-50%);
}

.badge-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 200px;
  /* 默认展开的最大高度 */
  min-height: 45px;
  /* 确保收缩时有足够空间显示第一个图标 */
}

.badge-content:not(.expanded) {
  max-height: 45px;
}

/* 收缩时只显示第一个图标，隐藏其他内容 */
.badge-content:not(.expanded)> :not(:first-child) {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.badge-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-foot-t {
  display: flex;
}

/* Vue 过渡动画 - 翻转效果 */
.flip-enter-active,
.flip-leave-active {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flip-enter-from {
  transform: rotateY(90deg) translateZ(0);
  opacity: 0;
}

.flip-leave-to {
  transform: rotateY(-90deg) translateZ(0);
  opacity: 0;
}

/* 包装层样式 */
.flip-wrapper {
  position: relative;
  width: 100%;
  // height: calc(100%/3 - 8px);
  height: 100%;
  backface-visibility: hidden;
  perspective: 1000px;
}
</style>
