<template>
  <el-container class="container">
    <!-- 开发测试使用 -->
    <el-aside width="190px" class="aside" v-if="DEV">
      <el-menu class="menu">
        <router-link to="/gov-list">
          <el-menu-item index="gov-list" class="menu-item">
            <el-icon><House /></el-icon>
            <span>政务表单列表</span>
          </el-menu-item>
        </router-link>
        <router-link to="/user-task-list">
          <el-menu-item index="user-task-list" class="menu-item">
            <el-icon><House /></el-icon>
            <span>用户待办</span>
          </el-menu-item>
        </router-link>
        <router-link to="/process-list">
          <el-menu-item index="process-list" class="menu-item">
            <el-icon><House /></el-icon>
            <span>流程列表</span>
          </el-menu-item>
        </router-link>
        <router-link to="/mock-user">
          <el-menu-item index="mock-user" class="menu-item">
            <el-icon><House /></el-icon>
            <span>模拟用户</span>
          </el-menu-item>
        </router-link>
        <router-link to="/designer?mode=create">
          <el-menu-item index="designer" class="menu-item">
            <el-icon><House /></el-icon>
            <span>设计</span>
          </el-menu-item>
        </router-link>
        <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-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>
