<template>
  <div class="homeBox">
    <!-- 头部 -->

    <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">
          <QblyType></QblyType>
        </div>
        <div class="commom-aside">
        <!-- <GroupWarning /> -->
     <TextType></TextType>
          <!-- <QbfkCount></QbfkCount> -->
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="home-aside asideR">
      <div class="commom-aside-big">
        <Calendar />
      </div>
      <div class="commom-aside-big">
          <Experience />

      </div>
      <div class="commom-aside-small">
        <SituationAssessment />
      </div>
    </div>
    <!-- 中间 -->
    <div class="home-center">
      <div class="middle-top">
        <Yszs />
      </div>
      <div class="flex middle-bottom mt10">
        <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="mr10" style="width: 30%;"><DeployControl /></div> -->
        <!-- <div class="flex-1" style="flex: 1;"><ZdryWarning /></div> -->
      </div>
    </div>
    <!-- 底部 -->
    <div class="home-foot-t">
      <Bkcz></Bkcz>
    </div>
  </div>
  <!-- 左边弹窗 -->
  <LeftDialog></LeftDialog>

</template>

<script setup>
import { ref, getCurrentInstance, reactive, onMounted } 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 GroupWarning from './model/groupWarning.vue'
import Yszs from './model/yszs.vue'
import DeployControl from './model/deployControl.vue';
import SituationAssessment from './model/situationAssessment.vue'
import Experience from './model/experience.vue'
import Calendar from './model/calendar.vue'

import { getItem, setItem} from "@/utils/storage";
import emitter from "@/utils/eventBus.js";
import { bm ,centralPoint} from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
import SwitchSysDialog from '@/components/SwitchSysDialog.vue'


const changeXzqh = (val,trg) => {
  setTimeout(() => {
    // 先移除已有的边界
    emitter.emit('removeBj')
    if (trg) {
      console.log("多个");
      // 如果传入的是多个区域数据（二维数组）
      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: '#cf1010',
          fillColor: 'rgba(255, 255, 255,0)',
        })
      })
    } else {

      // 保持原来的逻辑，处理单个区域
      emitter.emit('setBoundarys', {
        data: {
          type: "FeatureCollection",
          features: [
            {
              geometry: {
                type: "Polygon",
                coordinates: [val] // 使用正确的GeoJSON格式
              },
              properties: {},
              type: "Feature"
            }
          ]
        },
        color: '#cf1010',
        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 makerCenter = () => {
    const dw = require("@/assets/point/dingwei.png")
  const coords = centralPoint.map(item => {
    return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
  })
  emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
}
onMounted(() => {
  getDepId()
  makerCenter()
})


</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;
}

</style>
