<template>
  <!-- 海绵综合一张图首页 -->
  <div class="hmMainPage">
    <!-- 地图 -->
    <GisMapMF v-show="menuIndex != 3"></GisMapMF>

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

    <!-- 控制面板按钮 -->
    <div :class="['controlHM', showPanel ? 'right30' : 'right480']" v-if="menuIndex != 3">
      <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>

    <!-- 内容-头部 -->
    <!-- 头部光动效 -->
    <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" />
  </div>
</template>

<script setup>
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.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 axios from 'axios';
import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
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 menuList = ref([
  { name: '城市概况', id: 1 },
  { name: '项目建设', id: 2 },
  { name: '考核评估', id: 3 },
  { name: '排水防涝', id: 4 },
  { name: '长效运维', id: 5 },
]);
const menuIndex = ref(4);
const showPanel = ref(false);
const showLegend = ref(false);

// 跳转业务系统
function goSystem() {
  router.push({ path: '/index' });
}
// 菜单跳转
function menuClick(id) {
  menuIndex.value = id;
  showPanel.value = false;
  bus.emit('setIniteLayer', [
    {
      layername: 'YSBZ',
      show: true,
    },
    {
      layername: 'WSBZ',
      show: true,
    },
    {
      layername: 'sewageFactory',
      show: true,
    },
    {
      layername: 'rainLine',
      show: true,
    },
  ]);
  NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
  if (id == 4) {
    bus.emit('setIniteLayer', [
      {
        layername: 'YSBZ',
        show: false,
      },
      {
        layername: 'WSBZ',
        show: false,
      },
      {
        layername: 'sewageFactory',
        show: false,
      },
      {
        layername: 'rainLine',
        show: false,
      },
    ]);
    NewFiberMapUtils.defaultPreventWaterlogging(newfiberMap);
  }
  if (id == 5) NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
}
// 图例控制
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 => {});
};

onMounted(() => {
  getWeather();
});
onBeforeUnmount(() => {
  if (newfiberMap) {
    console.log('newfiberMap.getMap().destroy()');
    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: 9900;
    width: 215px;
    height: 39px;
    pointer-events: none;
    animation: headDX 3s infinite linear;
    @keyframes headDX {
      0% {
        left: 215px;
      }
      100% {
        left: 100%;
      }
    }
  }
  .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: 320;
    width: 32px;
    img {
      width: 32px;
      height: 32px;
      cursor: pointer;
      margin-bottom: 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: #d5e615;
      }
      .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%;
  }
  .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>