<template>
  <!-- 海绵综合一张图首页 -->
  <div class="hmMainPage">
    <!-- 地图 -->
    <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
    <gisMapBox
      v-show="menuIndex != 3"
      :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
      @map-click="mapClick"
      @map-moveOn="moveOn"
      @map-moveLeave="moveLeave"
    ></gisMapBox>

    <!-- 图例 -->
    <Legend
      :showLegend="showLegend"
      :class="['animate__animated', showPanel ? 'animate__fadeInUp left30' : 'animate__fadeInUp left480']"
    ></Legend>

    <!-- 地图图层遮罩 -->
    <img src="@/assets/newImgs/HMScreen/mapBg.png" alt="" title="地图图层遮罩" class="mapBgZZ" v-if="!showPanel" />

    <!-- 地图标注点弹窗popup -->
    <PopupInfo></PopupInfo>

    <!-- 控制面板按钮 -->
    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
      <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
      <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
      <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
    </div>

    <!-- 项目类型色块 -->
    <div :class="['projectPart', showPanel ? 'right80' : 'right520']" v-if="menuIndex == 2">
      <div class="part">
        <div class="color1"></div>
        海绵建筑与社区
      </div>
      <div class="part">
        <div class="color2"></div>
        海绵型道路广场
      </div>
      <div class="part">
        <div class="color3"></div>
        海绵型公园绿地
      </div>
      <div class="part">
        <div class="color4"></div>
        海绵型水系
      </div>
      <div class="part">
        <div class="color5"></div>
        管网排查与修复
      </div>
      <div class="part">
        <div class="color6"></div>
        管网及泵站
      </div>
    </div>

    <!-- 项目分区建议 -->
    <div :class="['projectArea', showPanel ? 'right30' : 'right480']" v-if="menuIndex == 2">
      <!-- 古城片区 -->
      <div v-if="areaObj.value == '0'">
        <p>以优质的"蓝绿"基底为基础，系统提升片区韧性</p>
        <p>治理前：泵站总开机时长23小时40分；抽排量12.5万吨；径流总量控制率45%</p>
        <p>治理后：泵站总开机时长13小时21分；抽排量7.1万吨；径流总量控制率72%</p>
      </div>
      <!-- 城东南片区 -->
      <div v-if="areaObj.value == '1'">
        <p>以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理</p>
        <p>治理前：易涝积水点2处，合流制溢流频次控制在20次以上</p>
        <p>治理后：易涝积水点2处全面消除，合流制溢流频次控制在10次以内，内涝标准达到20年一遇</p>
      </div>
      <!-- 保税区片区 -->
      <div v-if="areaObj.value == '2'">
        <p>以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用</p>
        <p>治理前：5处易涝积水点，雨水收集量：0.3万吨</p>
        <p>治理后：0处易涝积水点，雨水收集量：5.3万吨</p>
      </div>
    </div>

    <!-- 下垫面统计的图例说明 -->
    <div class="landAreaC" v-if="menuIndex == 1">
      <div class="cont flex" v-for="(item, index) in landArr" :key="index">
        <span :style="{ background: item.color }"></span>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>

    <!-- 内容-头部 -->
    <!-- 头部光动效 -->
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="headLightDX" />
    <div class="headHM flex">
      <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
      <div class="title">***海绵城市综合一张图</div>
      <div class="menuBtn">
        <p
          v-for="item in menuList"
          :key="item.id"
          :class="['btnPart', menuIndex == item.id ? 'btnActive' : '']"
          @click="menuClick(item.id)"
        >
          {{ item.name }}
        </p>
      </div>

      <div class="weather flex">
        <el-select clearable v-model="stationCode" placeholder="全局搜索站点名称" class="stationSel">
          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
        </el-select>
        <p class="weathers">{{ weatherInfo.text }} {{ weatherInfo.temp }}℃</p>
        <p class="date">{{ dateNow }}</p>
      </div>
    </div>

    <!-- 内容-内容切换区 -->
    <div class="contHM">
      <City v-if="menuIndex == 1" :showPanel="showPanel"></City>
      <ProjectHM v-if="menuIndex == 2" :showPanel="showPanel"></ProjectHM>
      <EvaluationKH v-if="menuIndex == 3" :showPanel="showPanel"></EvaluationKH>
      <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
      <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
    </div>

    <!-- 底部装饰 -->
    <div class="bottomHM"></div>
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXL" />
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />

    <!-- 三维管网弹窗 -->
    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
      <GisMapMF style="position: relative"></GisMapMF>
    </el-dialog>

    <!-- 降雨效果 -->
    <CanvasRain v-if="showRainFlow"></CanvasRain>
  </div>
</template>

<script setup>
import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
import PopupInfo from '@/views/sponeScreen/gisMF/cesiumPopup.vue'; //地图标注点弹窗
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
import axios from 'axios';
import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import { onBeforeUnmount } from 'vue';

const { proxy } = getCurrentInstance();
const router = useRouter();
const weatherInfo = ref({});
const stationList = ref([]);
const stationCode = ref('');
const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
const showRainFlow = ref(false);
const menuList = ref([
  { name: '城市概况', id: 1 },
  { name: '项目建设', id: 2 },
  { name: '考核评估', id: 3 },
  { name: '排水防涝', id: 4 },
  { name: '长效运维', id: 5 },
]);
const menuIndex = ref(1);
const showPanel = ref(false);
const showLegend = ref(false);
const showPipe = ref(false);
const areaObj = ref({ value: '0' });
// 下垫面统计
const landArr = ref([
  { title: '水田', color: '#f8d072' },
  { title: '旱地', color: '#ffffc8' },
  { title: '公园与绿地', color: '#81c35d' },
  { title: '城镇住宅用地', color: '#f06e7d' },
  { title: '公用设施用地', color: '#ffaac8' },
  { title: '特殊用地', color: '#e77844' },
  { title: '乔木林地', color: '#32963c' },
  { title: '其他草地', color: '#b7dca0' },
  { title: '河流水面', color: '#a3d6f5' },
]);

// 跳转业务系统
function goSystem() {
  router.push({ path: '/index' });
}

// 三维管网点击
function controlPipe3D() {
  showPipe.value = true;
}

// 菜单跳转
function menuClick(id) {
  menuIndex.value = id;
  showPanel.value = false;
  newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
  bus.emit('closeCesiumPopup'); //关闭弹窗
}
// 图例控制
function controlLegend() {
  showLegend.value = !showLegend.value;
}
// 展开收起
function controlPanel() {
  showPanel.value = !showPanel.value;
  if (showPanel.value) {
    showLegend.value = false;
  }
}

// 获取天气信息
const getWeather = () => {
  axios
    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
    .then(res => {
      weatherInfo.value = res.data.result.realtime;
    })
    .catch(error => {});
};
//地图点击
const mapClick = (point, properties) => {
  console.log('地图点击---', properties);
  newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']);
  // 管网监测点
  if (properties.type == 'pipeMonitor') {
    bus.emit('pipeMonitorBus', properties);
  }
  if (
    properties.siteType == 'rain' ||
    properties.type == 'waterCourse' ||
    properties.type == 'YSBZ' ||
    properties.type == 'WSBZ' ||
    properties.type == 'combineBengZhan' ||
    properties.type == 'sewageFactory' ||
    properties.type == 'waterLoging'
  ) {
    bus.emit('popupcontent', {
      popupShow: true,
      point: point,
      popupInfo: properties,
    });
  }
};
//鼠标移入
const moveOn = (point, properties) => {
  // console.log('鼠标移入--', properties);
  // 雨水泵站收水范围
  if (properties.type == 'YSBZ' && properties.geometrys) {
    let geometrysToMap = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometrys), properties)]);
    newfiberMapBoxVectorLayer.addGeojsonPolygon('bengzhan_Area', geometrysToMap);
  }
};
//鼠标移出
const moveLeave = (point, properties) => {
  // console.log('鼠标移出--', properties);
  if (properties.type == 'YSBZ' && properties.geometrys) {
    newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
  }
};

onMounted(() => {
  getWeather();
  // 获取项目片区点击
  bus.on('checkProjectArea', params => {
    areaObj.value = params;
  });
  // 降雨特征点击
  bus.on('checkRainL', params => {
    if (params == 1) {
      showRainFlow.value = false;
    } else {
      showRainFlow.value = true;
    }
  });
});
onBeforeUnmount(() => {
  bus.off('checkProjectArea');
  bus.off('checkRainL');
  if (!newfiberMap) return;
  if (newfiberMap) {
    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
    newfiberMap.getMap().imageryLayers.removeAll();
    newfiberMap.getMap().entities.removeAll();
    newfiberMap.getMap().scene.primitives.removeAll();
    newfiberMap.getMap().destroy();
    if (_originalGLContext) {
      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
      _originalGLContext = null;
    }
    newfiberMap.baseMap.map = null;
    newfiberMap = null;
  }
});
</script>

<style scoped lang="scss">
.hmMainPage {
  width: 100%;
  height: 100%;
  background: #010e22;
  position: relative;
  .headLightDX {
    position: absolute;
    top: 38px;
    z-index: 200;
    width: 215px;
    height: 39px;
    pointer-events: none;
    animation: headDX 3s infinite linear;
    @keyframes headDX {
      0% {
        left: 215px;
      }
      100% {
        left: 100%;
      }
    }
  }
  .mapBgZZ {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    pointer-events: none;
  }
  .headHM {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/headBg.png') no-repeat;
    background-size: 100% 100%;
    .weather {
      height: 58px;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
      padding-right: 40px;
      .weathers {
        margin: 0px 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        border-right: 3px solid rgba(170, 206, 255, 0.2);
        padding-right: 20px;
      }
      .date {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #b8ecff;
      }
    }
    .mainYW {
      width: 50px;
      height: 44px;
      cursor: pointer;
      margin: 5px 10px 0px 30px;
    }
    .title {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 35px;
      letter-spacing: 10px;
      color: #ffffff;
      text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47);
      margin-top: 5px;
    }
    .menuBtn {
      display: flex;
      margin-left: 20px;
      .btnPart {
        width: 136px;
        height: 36px;
        background: url('@/assets/newImgs/HMScreen/btnBg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 36px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 22px;
        color: #c9dfff;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 10px;
        &:hover {
          color: #f7faff;
          opacity: 1;
        }
      }
      .btnActive {
        background: url('@/assets/newImgs/HMScreen/btnActive.png') no-repeat;
        background-size: 100% 100%;
        color: #f7faff;
        opacity: 1;
      }
    }
  }
  .contHM {
    position: relative;
    top: 100px;
    left: 0px;
    z-index: 220;
  }
  .left30 {
    left: 30px;
  }
  .left480 {
    left: 480px;
  }
  .right30 {
    right: 30px;
  }
  .right480 {
    right: 480px;
  }
  .right80 {
    right: 80px;
  }
  .right520 {
    right: 520px;
  }
  .controlHM {
    position: absolute;
    bottom: 50px;
    z-index: 220;
    width: 32px;
    img {
      width: 32px;
      height: 32px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .projectArea {
    width: 200px;
    position: absolute;
    z-index: 220;
    bottom: 240px;
    background: #004565;
    opacity: 0.9;
    padding: 0px 8px;
    border-radius: 5px;
    color: #b8ecff;
  }
  .landAreaC {
    position: absolute;
    left: 480px;
    bottom: 65px;
    z-index: 220;
    background: #004565;
    padding: 5px 10px;
    border-radius: 5px;
    .cont {
      align-items: center;
      font-size: 14px;
      span {
        width: 22px;
        height: 12px;
        display: inline-block;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
  }
  .projectPart {
    width: 160px;
    position: absolute;
    z-index: 220;
    bottom: 60px;
    background: #004565;
    opacity: 0.9;
    padding: 10px;
    border-radius: 5px;
    .part {
      display: flex;
      align-items: center;
      margin-top: 5px;
      color: #b8ecff;
      div {
        width: 22px;
        height: 12px;
        margin-right: 5px;
        border-radius: 5px;
      }
      .color1 {
        background: #b673ff;
      }
      .color2 {
        background: #ffb153;
      }
      .color3 {
        background: #07b720;
      }
      .color4 {
        background: #5aa9ff;
      }
      .color5 {
        background: #ea6638;
      }
      .color6 {
        background: #15e6e4;
      }
    }
  }
  .bottomHM {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 180;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .bottomLightDXL,
  .bottomLightDXR {
    position: absolute;
    bottom: -2px;
    z-index: 200;
    width: 215px;
    height: 39px;
  }
  .bottomLightDXL {
    left: 50%;
    animation: bottomDXL 3s infinite ease-in-out;
    @keyframes bottomDXL {
      0% {
        left: 50%;
      }
      100% {
        left: 95%;
      }
    }
  }
  .bottomLightDXR {
    right: 50%;
    transform: rotate(180deg);
    animation: bottomDXR 3s infinite ease-in-out;
    @keyframes bottomDXR {
      0% {
        right: 50%;
      }
      100% {
        right: 95%;
      }
    }
  }
}
</style>