<template>
  <el-container class="container">
    <!-- 开发测试使用 -->
    <el-aside width="190px" class="aside" v-if="DEV">
      <el-menu class="menu">
        <router-link to="/home">
          <el-menu-item index="home" class="menu-item">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
        </router-link>

        <el-sub-menu index="analyze">  <!-- index 为父菜单唯一标识（非路由路径） -->
          <template #title>
            <el-icon><Setting /></el-icon>  <!-- 父菜单图标 -->
            <span>可视化分析</span>  <!-- 父菜单名称 -->
          </template>
          <router-link to="/analyze-newDeclaredGoods">
            <el-menu-item index="NewDeclaredGoods" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>新申报商品提示</span>
            </el-menu-item>
          </router-link>
          <router-link to="/analyze/chemicals-entry">
            <el-menu-item index="chemicals-entry" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>危化品组合查询</span>
            </el-menu-item>
          </router-link>
          <router-link to="/analyze/goods-entry">
            <el-menu-item index="goods-entry" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>危险货物组合查询</span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>

        <el-sub-menu index="statReport">  <!-- index 为父菜单唯一标识（非路由路径） -->
          <template #title>
            <el-icon><Setting /></el-icon>  <!-- 父菜单图标 -->
            <span>统计报表</span>  <!-- 父菜单名称 -->
          </template>
          <router-link to="/statReport-customMStatF">
            <el-menu-item index="CustomMStatF" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>申报地海关报表</span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>

        <el-sub-menu index="base">  <!-- index 为父菜单唯一标识（非路由路径） -->
          <template #title>
            <el-icon><Setting /></el-icon>  <!-- 父菜单图标 -->
            <span>基础数据</span>  <!-- 父菜单名称 -->
          </template>
          <router-link to="/base-chemicalsCatalog">
            <el-menu-item index="ChemicalsCatalog" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>危化品目录</span>
            </el-menu-item>
          </router-link>
          <router-link to="/base-packCatalog">
            <el-menu-item index="PackCatalog" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>包装种类目录</span>
            </el-menu-item>
          </router-link>
          <router-link to="/base-goodsCatalog">
            <el-menu-item index="GoodsCatalog" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>危险货物目录</span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>

        <router-link to="/user-info">
          <el-menu-item index="UserInfo">
            <el-icon><User /></el-icon>
              <span>用户信息</span>
          </el-menu-item>
        </router-link>

        <el-sub-menu index="system">  <!-- index 为父菜单唯一标识（非路由路径） -->
          <template #title>
            <el-icon><Setting /></el-icon>  <!-- 父菜单图标 -->
            <span>系统管理</span>  <!-- 父菜单名称 -->
          </template>
          <router-link to="/system-dictType">
            <el-menu-item index="system-dictType" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>字典管理</span>
            </el-menu-item>
          </router-link>
          <router-link to="/gen-index">
            <el-menu-item index="gen-index" class="menu-item">
              <el-icon>
                <ScaleToOriginal />
              </el-icon>
              <span>代码生成</span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>

      </el-menu>
    </el-aside>
    <el-container class="content">
      <RouterView />
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
const { DEV } = import.meta.env
</script>

<style scoped lang="less">
.container {
  height: 100vh;
}
.aside {
  background: url(@/assets/images/left-menu-bg.png) no-repeat #055395;
  --el-menu-item-height: 44px;
  --el-menu-bg-color: transparent;
  --el-menu-text-color: rgba(255, 255, 255, 0.8);
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.15);
  --el-menu-hover-text-color: rgb(255, 255, 255);
}
.el-menu-item.is-active {
  color: var(--el-menu-text-color);
  background-color: var(--el-menu-hover-bg-color);
}
</style>
