<template>
  <div class="main">
    <div class="header">
      <span class="time">
        <span class="text" style="margin-right: 15px"> {{ dateVal }} </span>
        <span class="text" style="width: 80px;">{{ currentTime  }}</span>
        <span class="text">{{ weekVal }}</span>
      </span>

      <span class="title text"> 能源站监控与运行管理系统 </span>
      <span class="user">
        <span style="margin-right: 15px"> {{ user }}</span>
        <span class="iconfont icon-tuichu" @click="logout"></span>
      </span>
    </div>

    <div class="page" ref="page">
      <div class="subMenu" v-if="subMenu.length > 0">
        <div
          class="subItem"
          v-for="subItem in subMenu"
          :key="subItem.name"
          @click="subMenuClick(subItem)"
          :class="subCurrentKey == subItem.path ? 'active' : ''"
        >
          {{ subItem.title }}
        </div>
      </div>
      <div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
        <router-view />
      </div>
    </div>
    <div class="menu">
      <div
        v-for="menu in menuList"
        :key="menu.name"
        class="menu-item"
        @click="menuClick(menu)"
        :class="currentKey == menu.path ? 'active' : ''"
      >
        <i :class="menu.icon"></i>
        {{ menu.name }}
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import moment from 'moment'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
export default {
  name: 'MainView',
  components: {},
  data() {
    return {
      currentKey: '',
      subCurrentKey: '',
      menuList: [],
      subMenu: [],
      currentTime: '',
      timer: null,
      dateVal: moment().locale('zh-cn').format('ll') + ' ',
      weekVal: moment().locale('zh-cn').format('dddd'),
      user:localStorage.getItem('account').replace(/^"|"$/g, '')
    }
  },
  computed: {
    dynamicMenuList() {
      return this.generateMenu(JSON.parse(localStorage.getItem('permission')))
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        // // 更新当前激活的菜单项
        // // this.currentKey = to.matched[0]?.path || ''
        this.menuList = this.dynamicMenuList

        // 解析当前路由路径
        const pathSegments = to.path.split('/').filter(Boolean)

        // 处理主菜单激活状态
        this.currentKey = pathSegments.length > 0 ? `/${pathSegments[0]}` : ''

        // 处理子菜单逻辑
        this.handleSubMenu(pathSegments,to)
      }
    }
  },

  mounted() {
    console.log(this.$refs.page.offsetHeight,'============');
    
    this.getDateTime()
    this.timer = setInterval(() => {
      this.getDateTime()
    }, 1000)
  },
  unmounted() {
    clearInterval(this.timer)
  },
  methods: {
    logout(){
      const that=this
      this.$Modal.confirm({
        title: '你确认退出系统吗?',
        icon: createVNode(ExclamationCircleOutlined),

        async onOk() {
          localStorage.clear()
          that.$router.push('/login')
        },
        onCancel() {
        },
        class: 'test'
      })
      
    },
    //getDateTime
    getDateTime() {
      this.currentTime = moment().locale('zh-cn').format('LTS')
    },
    // 新增子菜单处理方法
    handleSubMenu(pathSegments,to) {
      // 查找当前激活的主菜单项
      const activeMainMenu = this.menuList.find((menu) => menu.path === `/${pathSegments[0]}`)

      // 更新子菜单列表
      this.subMenu = activeMainMenu?.children || []

      // 处理子菜单激活状态
      if (pathSegments.length > 1) {
        this.subCurrentKey = `/${pathSegments[1]}`

      } else {
        this.subCurrentKey = ''
      }

      // 自动跳转至默认子菜单（当主菜单有子菜单时）
      if (this.subMenu.length > 0 && to.path === `/${pathSegments[0]}`) {
        const defaultPath = this.subMenu[0].path
        this.$router.replace(`/${pathSegments[0]}/${defaultPath}`)
      }
    },
    generateMenu(routes) {
      return routes.map((route) => ({
        ...route,
        title: route.name,
        path: route.route,
        children: route.children ? this.generateMenu(route.children) : []
      }))
    },

    menuClick(menu) {
      this.currentKey = '/' + menu.path
      this.subMenu = menu.children || []
      const targetPath = menu.children?.length > 0 ? menu.path + menu.children[0].path : menu.path

      this.$router.push(targetPath)
    },
    subMenuClick(subMenu) {
      this.subCurrentKey = subMenu.path
      this.$router.push('/system' + subMenu.path)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/mainBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.header {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .text {
    background: linear-gradient(
      180deg,
      rgb(255, 255, 255) 0%,
      rgb(227, 254, 255) 33.17%,
      rgb(35 190 195) 100%
    );
    
    -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
    background-clip: text;
    color: transparent; /* 必须设置为透明 */
    display: inline-block; /* 确保背景裁剪生效 */
    line-height: 80px;
    font-size: 18px;
  }
  .title{
    font-size: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;

  }
  .user{
    font-weight: 700;
    font-size: 18px;
    .icon-tuichu{
      cursor: pointer;
    }

  }
  .time{
    font-weight: 700;
  }
}
.subMenu {
  display: flex;
  color: #fff;
  // margin-left: 10px;
  padding-bottom: 20px;
  .subItem {
    width: 96px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #132347;

    border: 1px solid #2169c3;
    border-radius: 8px;
    margin-right: 15px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .active {
    background: #27a188;
  }
}
.page {
  width: calc(100% - 20px);
  height: calc(100% - 70px - 60px - 40px);
  margin: 20px 10px;
  border-radius: 20px;
}
.content {
  height: 100%;
}
.subcontent {
  height: calc(100% - 56px);
}
.menu {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 50px;
  // height: 150px;
  display: flex;
  justify-content: center;
  .menu-item {
    width: 120px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border-radius: 20px;
    background: #04608e;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #ffffff00;
    cursor: pointer;
    margin: 0 35px;
  }
  .active {
    border: 1px solid $border-color;
    color: #01b3cd;
  }
}
</style>
