<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="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" v-show="menuIndex != 3"></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'; //长效运维
import axios from 'axios';
import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';

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(1);
const showPanel = ref(false);
const showLegend = ref(false);

// 跳转业务系统
function goSystem() {
  router.push({ path: '/index' });
}
// 菜单跳转
function menuClick(id) {
  menuIndex.value = id;
  showPanel.value = false;
  NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
  if (id == 4) 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();
});
</script>

<style scoped lang="scss">
.hmMainPage {
  width: 100%;
  height: 100%;
  background: #010e22;
  position: relative;
  .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;
  }
  .controlHM {
    position: absolute;
    bottom: 50px;
    z-index: 320;
    width: 32px;
    img {
      width: 32px;
      height: 32px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .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%;
  }
}
</style>