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

    <!-- 图例 -->
    <Legend :showLegend="showLegend"></Legend>

    <!-- 控制面板按钮 -->
    <div class="controlHM">
      <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="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>

    <!-- 内容-内容切换区 -->
    <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>
  </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'; //长效运维

const router = useRouter();
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(true);
const showLegend = ref(false);

// 跳转业务系统
function goSystem() {
  router.push({ path: '/index' });
}
// 菜单跳转
function menuClick(id) {
  menuIndex.value = id;
}
// 图例控制
function controlLegend() {
  showLegend.value = !showLegend.value;
}
// 展开收起
function controlPanel() {
  showPanel.value = !showPanel.value;
}

onMounted(() => {});
</script>

<style scoped lang="scss">
.hmMainPage {
  width: 100%;
  height: 100%;
  background: #010e22;
  position: relative;
  .headHM {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 220;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/headBg.png') no-repeat;
    background-size: 100% 100%;
    .mainYW {
      width: 50px;
      height: 44px;
      cursor: pointer;
      margin: 10px 10px 0px 30px;
    }
    .title {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 40px;
      letter-spacing: 10px;
      color: #ffffff;
      text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47);
      margin-top: 5px;
    }
    .menuBtn {
      display: flex;
      margin-left: 50px;
      .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: 24px;
        color: #c9dfff;
        opacity: 0.78;
        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;
  }
  .controlHM {
    position: absolute;
    right: 500px;
    bottom: 50px;
    z-index: 220;
    width: 32px;
    img {
      width: 32px;
      height: 32px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .bottomHM {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 220;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>