<script setup lang="ts">
import { computed, ref } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import {
  HomeFilled,
  Odometer,
  User,
  Document,
  Grid,
  Menu,
  UserFilled,
  EditPen,
  DataLine,
  InfoFilled,
  TrendCharts,
  Bell,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const route = useRoute()
const isFullscreenRoute = computed(() => route.meta.fullscreen === true)
const isNoticeRoute = computed(() => route.path.startsWith('/notice-announcement'))

function toggleCollapse() {
  isCollapse.value = !isCollapse.value
}
</script>

<template>
  <RouterView v-if="isFullscreenRoute" />

  <el-container v-else style="height: 100vh">
    <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: #304156; transition: width 0.3s; overflow: hidden; height: 100vh">
      <div style="height: 50px; display: flex; align-items: center; padding-left: 20px; color: #fff; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden">
        <span v-if="!isCollapse">管理系统</span>
        <span v-else>系</span>
      </div>
      <el-scrollbar style="height: calc(100vh - 50px)">
        <el-menu
          :default-active="$route.path"
          :collapse="isCollapse"
          router
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
          style="border-right: none; padding: 0; margin: 0"
        >
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/dashboard">
            <el-icon><Odometer /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/form">
            <el-icon><Document /></el-icon>
            <span>表单页面</span>
          </el-menu-item>
          <el-menu-item index="/table-pro">
            <el-icon><Grid /></el-icon>
            <span>高级表格</span>
          </el-menu-item>
          <el-menu-item index="/table-pro-for">
            <el-icon><Menu /></el-icon>
            <span>循环表格</span>
          </el-menu-item>
          <el-menu-item index="/employee">
            <el-icon><UserFilled /></el-icon>
            <span>员工管理</span>
          </el-menu-item>
          <el-menu-item index="/thousandth">
            <el-icon><EditPen /></el-icon>
            <span>千分位输入</span>
          </el-menu-item>
          <el-menu-item index="/position-forecast">
            <el-icon><DataLine /></el-icon>
            <span>头寸预报</span>
          </el-menu-item>
          <el-menu-item index="/position-forecast-execution">
            <el-icon><DataLine /></el-icon>
            <span>头寸预报执行</span>
          </el-menu-item>
          <el-menu-item index="/executive-management">
            <el-icon><TrendCharts /></el-icon>
            <span>总行管理员首页</span>
          </el-menu-item>
          <el-menu-item index="/notice-announcement">
            <el-icon><Bell /></el-icon>
            <span>通知公告</span>
          </el-menu-item>
          <el-menu-item index="/placeholder">
            <el-icon><Document /></el-icon>
            <span>占位符页面</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><InfoFilled /></el-icon>
            <span>关于</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container style="height: 100vh; overflow: hidden">
      <el-header style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6">
        <el-icon style="cursor: pointer; font-size: 20px" @click="toggleCollapse">
          <svg v-if="isCollapse" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
            <path fill="currentColor" d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"/>
          </svg>
          <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
            <path fill="currentColor" d="M300 276.5v512c0 7.1 7.8 11.5 13 6.4l400-319.9c4.5-3.6 4.5-10.7 0-14.3l-400-319.9c-5.2-5.1-13-0.7-13 6.4z"/>
          </svg>
        </el-icon>
        <el-dropdown>
          <span style="cursor: pointer">管理员</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main
        class="app-main"
        :class="{ 'is-notice-route': isNoticeRoute }"
        style="height: calc(100vh - 60px); overflow-y: auto"
      >
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.app-main.is-notice-route {
  scrollbar-width: thin;
  scrollbar-color: #8fa7c9 #edf4ff;
}

.app-main.is-notice-route::-webkit-scrollbar {
  width: 8px;
}

.app-main.is-notice-route::-webkit-scrollbar-track {
  background: #edf4ff;
}

.app-main.is-notice-route::-webkit-scrollbar-thumb {
  border: 2px solid #edf4ff;
  border-radius: 999px;
  background: #8fa7c9;
}

.app-main.is-notice-route::-webkit-scrollbar-thumb:hover {
  background: #6f8cb7;
}
</style>
