<template>
  <div class="nav-container">
    <div class="nav-main">
      <template v-for="(item,index) in navs"
                :key="index">
        <!-- 父菜单项 -->
        <div class="nav-item"
             :class="{
               'is-active': index===activeIndex&&!item.children,
               'has-children': item.children
             }"
             @click="toggleNav(item,index)">
          <el-icon class="nav-icon">
            <component :is="item.icon"></component>
          </el-icon>
          <div class="nav-title">{{ item.name }}</div>
          <el-icon v-if="item.children"
                   class="arrow-icon"
                   :class="{'is-expand': item.expand}">
            <ArrowDown />
          </el-icon>
        </div>
        <!-- 子菜单，直接跟在父菜单后面 -->
        <div class="sub-menu"
             v-if="item.children"
             v-show="item.expand">
          <div class="nav-item sub-item"
               v-for="(subItem,subIndex) in item.children"
               :key="subIndex"
               :class="{'is-active': subItem.path === $route.path}"
               @click.stop="toggleSubNav(subItem,index,subIndex)">
            <el-icon class="nav-icon"
                     v-if="subItem.icon">
              <component :is="subItem.icon"></component>
            </el-icon>
            <div class="nav-title">{{ subItem.name }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { ArrowDown, ChatDotRound, Share } from '@element-plus/icons-vue'

export default {
  components: {
    ArrowDown,
    ChatDotRound,
    Share
  },
  data () {
    // 初始化时为每个带有子菜单的项目添加 expand 属性
    const navs = [{
      icon: 'el-icon-menu',
      name: '大屏管理',
      children: [{
        icon: 'el-icon-monitor',
        name: '数据大屏',
        path: '/'
      }]
    }, {
      icon: 'el-icon-suitcase',
      name: '数据源管理',
      children: [{
        icon: 'el-icon-set-up',
        name: 'SQL数据源',
        path: '/db'
      }, {
        icon: 'el-icon-data-line',
        name: '数据集',
        path: '/record'
      }, {
        icon: 'el-icon-bell',
        name: '数据填报',
        path: '/fill'
      }, {
        icon: 'el-icon-message',
        name: '消息渠道',
        path: '/task'
      }]
    }, {
      icon: 'el-icon-menu',
      name: '组件管理',
      path: '/components',
      children: [{
        icon: 'el-icon-eleme',
        name: '组件库',
        path: '/components'
      }, {
        icon: 'el-icon-grid',
        name: '组件菜单',
        path: '/nav'
      }]
    }, {
      icon: 'el-icon-folder',
      name: '代码变量',
      path: '/fun',
      children: [{
        icon: 'el-icon-open',
        name: '代码仓库',
        path: '/fun'
      }, {
        icon: 'el-icon-opportunity',
        name: '全局变量',
        path: '/glob'
      }]
    }, {
      icon: 'el-icon-setting', // 使用设置图标更合适
      name: '系统设置',
      children: [{
        icon: 'el-icon-folder-opened',
        name: '标签分类',
        path: '/category'
      }, {
        icon: 'el-icon-files',
        name: '静态资源',
        path: '/file'
      }, {
        icon: 'el-icon-location-information',
        name: '地图管理',
        path: '/map'
      }]
    }]

    return {
      navs,
      activeIndex: 0,
    }
  },
  mounted () {
    // 查找当前路由是否匹配某个一级菜单
    let index = this.navs.findIndex(ele => ele.path === this.$route.path)

    // 如果没有匹配到一级菜单，则查找二级菜单
    if (index === -1) {
      for (let i = 0; i < this.navs.length; i++) {
        const nav = this.navs[i]
        if (nav.children) {
          // 查找是否有匹配的子菜单
          const hasMatchChild = nav.children.some(child => child.path === this.$route.path)
          if (hasMatchChild) {
            // 找到匹配的子菜单，设置父菜单为展开状态
            nav.expand = true
            index = i
            break
          }
        }
      }
    }

    // 设置当前激活的菜单索引
    this.activeIndex = index === -1 ? 0 : index
  },
  methods: {
    toggleNav (nav, index) {
      if (nav.children) {
        // 直接修改 expand 属性
        nav.expand = !nav.expand
        return
      }
      if (nav.href) {
        window.open(nav.href)
        return
      }
      this.activeIndex = index
      this.$emit('change', nav, index)
    },
    toggleSubNav (subNav, parentIndex, subIndex) {
      if (subNav.href) {
        window.open(subNav.href)
        return
      }
      this.activeIndex = parentIndex
      this.$emit('change', subNav, parentIndex, subIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-container {
  padding-top: 70px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.nav-main {
  padding: 0 8px;
  display: flex;
  height: 100%;
  overflow-y: auto;
  flex-direction: column;
  flex: 1;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
.nav-item {
  position: relative;
  height: 40px;
  display: flex;
  flex-shrink: 0;
  margin: 3px 0;
  line-height: 40px;
  align-items: center;
  cursor: pointer;
  border-radius: 3px;
  color: var(--text-color-secondary);
  font-size: 14px;
  &:hover {
    color: var(--primary-color);
    background-color: var(--bg-color-hover);
  }
  &.is-active {
    color: var(--primary-color);
    background-color: var(--bg-color-hover);
    font-size: 15px;
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 3px;
      height: 50%;
      border-radius: 6px;
      transform: translateY(-50%);
      background-color: var(--primary-color);
    }
  }
  &.has-children {
    padding-right: 15px;
  }
}
.nav-icon {
  margin-left: 15px;
  margin-right: 4px;
}

.arrow-icon {
  position: absolute;
  right: 10px;
  transition: transform 0.3s;
  &.is-expand {
    transform: rotate(180deg);
  }
  margin-right: 0;
  font-size: 12px;
}

.sub-menu {
  position: relative;
  margin: 0;

  .sub-item {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    padding-left: 20px;
    margin: 0;

    &:hover {
      background-color: var(--bg-color-hover);
    }

    &.is-active {
      font-size: 14px;
      background-color: var(--bg-color-hover);

      &:after {
        height: 40%;
      }
    }

    .nav-icon {
      font-size: 16px;
    }
  }
}
</style>