<!--
 * @Author: sjl
 * @Date: 2023-05-04 09:37:08
 * @Descripttion: 
-->
<template>
  <menu class="menu-box">
    <!-- 这里设置prodClass类，是因为该类型的功能模块还未开发，要求开发设置暗一点的背景及颜色，开发完成后
    可以删除该类型20230528-梁罗 -->
    <div
      class="menu"
      :data-index="item.name"
      :class="{ active: currentPath == item.path, prodClass: item.meta.title == '预警预报' }"
      v-for="(item, index) in formatRoutes(routes)"
      @click="handleMenu(item.path)"
      :key="index"
    >
      <span>{{ item.meta.title }}</span>
    </div>
  </menu>
</template>
<script>
import { identity } from 'lodash-es';
import { defineComponent, watch, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
export default defineComponent({
  name: 'Menu',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const routes = router.getRoutes();
    const data = reactive({
      currentPath: '/home',
      routes: routes,
    });
    if (route && route.path) {
      data.currentPath = route.path + '';
    }
    const formatRoutes = (val) => {
      return val.filter((item) => item.meta.screen);
    };

    const handleMenu = (path) => {
      //切换时清空地图上的定位点
      // if (window.map) TFMapUitl.clearPointLocation_list(window.map);
      console.log('路径' + JSON.stringify(path));
      // if (path == '/warning') {
      //   message.info('模块正在开发中！');
      //   return;
      // }
      data.currentPath = path;
      router.push({
        path,
      });
    };

    watch(
      () => route.path,
      (val) => {
        data.currentPath = val;
      }
    );

    return {
      ...toRefs(data),
      formatRoutes,
      handleMenu,
    };
  },
});
</script>
<style lang="less">
.menu-box {
  position: fixed;
  // margin-top: 996px;
  // position: fixed;
  left: 50%;
  // top: 92vh;
  bottom: -15px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  height: 85px;
  background-size: 100% 100%;
  // background-image: url('../../assets/images/bottom.png');
  .menu {
    padding: 0px 30px 8px 30px;
    padding-top: 0px;
    font-size: 20px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    color: #fff;
    cursor: pointer;
    background-image: url('../../assets/images/bot.png');
    background-position: center -33px;
    margin: 0 16px;
    &:hover {
      background-image: url('../../assets/images/bot.png');
      span {
        color: #ffffff;
      }
    }
    span {
      background: linear-gradient(180deg, #00f7ff 0%, #00abfa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }
  .prodClass {
    background-image: url('../../assets/images/proClass.png');
    span {
      opacity: 0.5;
    }
  }
  .active {
    background-image: url('../../assets/images/bot-h.png') !important;
    background-size: 100% !important;
    background-position: center -50px !important;
    &:hover span,
    span {
      color: rgba(0, 0, 0, 0) !important;
      background: linear-gradient(0deg, #fff 0%, #fff 85.59570313%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: block;
      position: relative;
      top: -7px;
    }
  }
}
</style>
