<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>
        <router-link to="/category-manage">
          <el-menu-item index="category-manage" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>分类管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/flow-manage">
          <el-menu-item index="flow-manage" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>流程管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/heai/message">
          <el-menu-item index="heai-message" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>消息列表</span>
          </el-menu-item>
        </router-link>
        <router-link to="/heai/message-type">
          <el-menu-item index="heai-message-type" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>消息类型列表</span>
          </el-menu-item>
        </router-link>
        <router-link to="/org-manage">
          <el-menu-item index="order-manage" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>组织管理</span>
          </el-menu-item>
        </router-link>
        <router-link to="/edit-table">
          <el-menu-item index="edit-table" class="menu-item">
            <el-icon>
              <Setting />
            </el-icon>
            <span>可编辑表格</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-one">
          <el-menu-item index="typical-one" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面一</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-two">
          <el-menu-item index="typical-two" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面二</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-three">
          <el-menu-item index="typical-three" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面三</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-four">
          <el-menu-item index="typical-four" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面四</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-five">
          <el-menu-item index="typical-five" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面五</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-six">
          <el-menu-item index="typical-six" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面六</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-seven">
          <el-menu-item index="typical-seven" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面七</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-eight">
          <el-menu-item index="typical-eight" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面八</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-nine">
          <el-menu-item index="typical-nine" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面九</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-ten">
          <el-menu-item index="typical-ten" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面十</span>
          </el-menu-item>
        </router-link>
        <router-link to="/typical-eleven">
          <el-menu-item index="typical-ten" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>典型页面十一</span>
          </el-menu-item>
        </router-link>

        <router-link to="/holiday/list">
          <el-menu-item index="holiday-list" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>节假日</span>
          </el-menu-item>
        </router-link>
        <router-link to="/counter/list">
          <el-menu-item index="counter-list" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>计数器</span>
          </el-menu-item>
        </router-link>
        <router-link to="/audit-log/list">
          <el-menu-item index="auditLog-list" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>用户日志</span>
          </el-menu-item>
        </router-link>
        <router-link to="/form/form-type">
          <el-menu-item index="form-type" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>表单类型</span>
          </el-menu-item>
        </router-link>
        <router-link to="/form/dept-sn">
          <el-menu-item index="dept-sn" class="menu-item">
            <el-icon>
              <ScaleToOriginal />
            </el-icon>
            <span>表单代字</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-aside>
    <el-container class="content">
      <div style="width: 100%; height: 100%">
        <router-view />
      </div>
    </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>
