<template>
  <div class="homeBox">
    <GdMap :minZoom="6.6" :maxZoom="6.6"></GdMap>
    <!-- 头部 -->

    <Head></Head>
    <!-- 左边 内容-->
    <div class="home-aside asideL">
      <div class="asideL-bottom">
        <div class="common-title">检查站卡口统计</div>
        <div class="comom-cnt">
          <Checkpoint />
        </div>
      </div>
      <div class="asideL-top">
        <div class="common-title">数据采集</div>
        <div class="comom-cnt">
          <Collection></Collection>
        </div>
      </div>
      <div class="asideL-bottom">
        <div class="common-title">值班备勤</div>
        <div class="comom-cnt">
          <BeOnDuty></BeOnDuty>
        </div>
      </div>
      
    </div>
    <!-- <Warning></Warning> -->

    <!-- 右边 内容-->
    <div class="home-aside asideR">
      <div class="asideL-top">
        <div class="common-title">人员预警</div>
        <div class="comom-cnt">
          <PeoWarning />
        </div>
      </div>
      <div class="asideL-top">
        <div class="common-title">车辆预警</div>
        <div class="comom-cnt">
          <CarWarning />
        </div>
      </div>
      <div class="asideL-bottom">
        <div class="common-title">预警统计分析</div>
        <div class="comom-cnt">
          <WanringAnyse></WanringAnyse>
        </div>
      </div>
    </div>
  </div>
  <Entrance v-if="showEntrance" :JczData="JczData" />

  <PopupWindows />
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
import Head from "./layout/head.vue";
import Collection from "./components/collection.vue";
import CarWarning from "./components/CarWarning.vue";
import PeoWarning from "./components/PeoWarning.vue";
import BeOnDuty from "./components/beonDuty.vue";
import Checkpoint from "./components/Checkpoint.vue";
import Entrance from "./components/entrance.vue";
import WanringAnyse from "./components/wanringAnyse.vue";
import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
import { ysSxtGetList } from '@/api/yszx.js'
import emitter from "@/utils/eventBus.js";
import PopupWindows from "@/components/popupWindows/index.vue";
import { bm, arrowhead, centralPoint } from '@/components/GdMap/xzqh.js'
import { ref, onMounted, reactive } from "vue";
import { getItem } from "@/utils/storage";

//获取所有检查站
const getjczgetJczList = () => {
  jczgetJczList({}).then((res) => {
    const gajcz = res.filter(item => item.zqlx == '1' && item.jd && item.wd)
    const jcz = res.filter(item => item.zqlx == '2' && item.jd && item.wd)
    const icon = require("@/assets/images/z.png");
    const iconjcz = require("@/assets/point/sp.png");
    emitter.emit("addPointArea", { coords: gajcz, icon, flag: "jczMap_hm" });
    emitter.emit("addPointArea", { coords: jcz, icon: iconjcz, flag: "jczMap_hm" });
  });
};
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] });
}
getjczgetJczList();
const JczData = ref();
const showEntrance = ref(false);
onMounted(() => {
  getDepId()
  makerCenter()
  emitter.on("showJcz", (res) => {
    if (res) {
      // const promes = {
      //   jczid: res.id,
      // }
      showEntrance.value = true;
      JczData.value = res;
      // emitter.emit("deletePointArea", "jczMap_Gzy");
      // sxtGetList(promes).then(resData => {
      //   emitter.emit("addPointArea", {
      //     coords: resData,
      //     icon: require("@/assets/point/sp.png"),
      //     flag: "jczMap_Gzy"
      //   });
      // })
    } else {
      showEntrance.value = false;
    }
  });
});

const keyIndex = ref()
const changeXzqh = (val, trg) => {
  setTimeout(() => {
    // 先移除已有的边界
    // 如果传入的是多个区域数据（二维数组）
    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)',
        borderColor: index == keyIndex.value ? '#ff00ff' : 'red'
      })
    })
    getMapData()
  }, 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 keyData = []
  for (const key in bm) {
    keyData.push(key)
  }

  const data = Object.values(bm).map(item => item);

  // } else {
  switch (deptCode) {
    case '54040200000'://巴宜区
      keyIndex.value = keyData.indexOf('542621')
      // changeXzqh(bm[542621])
      break;
    case '54042400000'://波密县
      keyIndex.value = keyData.indexOf('542625')
      // changeXzqh(bm[542625])
      break;
    case '54042500000'://察隅县
      keyIndex.value = keyData.indexOf('542626')
      // changeXzqh(bm[542626])
      break;
    case '54042100000'://工布江达县
      keyIndex.value = keyData.indexOf('542622')
      // changeXzqh(bm[542622])
      break;
    case '54042600000'://朗县
      keyIndex.value = keyData.indexOf('542627')
      // changeXzqh(bm[542627])
      break;
    case '54042200000'://米林县
      keyIndex.value = keyData.indexOf('542623')
      // changeXzqh(bm[542623])
      break;
    case '54042300000'://墨脱县
      keyIndex.value = keyData.indexOf('542624')
      // changeXzqh(bm[542624])
      break;
    default:
      const data = Object.values(bm).map(item => item);
      changeXzqh(data, true)
      break;
  }
  changeXzqh(data, true)

  // }
}
// 箭头
const getMapData = () => {
  let jtData = []
  for (const key in arrowhead) {
    jtData.push({
      position: [arrowhead[key].zb],
      text: arrowhead[key].name,
      pyl: arrowhead[key].pyl,
    })
  }
  // 修复后的多边形绘制代码
  for (let i = 0; i < jtData.length; i++) {
    console.log("正在绘制第", i, "个多边形");
    emitter.emit("echoPlane", {
      flag: `polygon${i}`,
      type: "polygon",
      coords: [jtData[i]], // 保持使用第一个数据点进行测试
      fontSize: "20px",
      fontColor: '#000',
      isclear: false, // 暂时设为false，避免清除之前的绘制
      id: i,
      pyl: jtData[i].pyl

    });
  }
}

</script>

<style lang="scss" scoped>
.homeBox {
  width: 100%;
  height: 100vh;
  position: relative;

  .home-aside {
    overflow: hidden;
    z-index: 3;
    width: 442px;
    height: 100%;
    position: absolute;
    height: calc(100vh - 67px);
    top: 65px;
    background: #0e1b29;
  }

  // 左边
  .asideL {
    left: 0;

    .asideL-top {
      height: 480px;
      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }

    .asideL-bottom {
      height: calc((100% - 505px) / 2);
      margin-top: 10px;
      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
      // background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  // 右边
  .asideR {
    right: 0;
    padding-right: 10px;
    box-sizing: border-box;

    .asideL-top {
      height: 20%;
      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
      background-size: 100% 100%;
    }

    .asideL-bottom {
      height: 60%;
      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  .asideB {
    position: absolute;
    bottom: 50px;
    z-index: 11;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    width: 50%;
    padding: 0 30px;
  }

  // 公用
  .common-title {
    padding: 0 54px;
    box-sizing: border-box;
    font-size: 22px;
    font-family: "YSBTH";
    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .comom-cnt {
    height: calc(100% - 30px);
    padding: 4px 20px;
    box-sizing: border-box;
  }
}


</style>
