<template>
  <div id="header">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <div class="w_1200">
            <el-col class="one_title">
              <el-col :span="12" class="one-1"> 欢迎来到{{ siteInfos.zhTitle }} </el-col>
              <el-col :span="12" class="one-2">
                <el-button size="small">{{ user & user._id ? user.name : '游客' }}</el-button>
                <el-button type="primary" size="small" @click="toLogin" v-if="user && !user._id">平台登录</el-button>
                <el-button type="primary" size="small" @click="toCenter" v-if="user && user._id">个人中心</el-button>
                <el-button type="danger" size="small" @click="toLogout" v-if="user && user._id">退出登录</el-button>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="two" @click="toHome()">
          <div class="w_1200">
            <el-image :src="siteInfos.logo_url"></el-image>
            <span>{{ siteInfos.zhTitle }}</span>
          </div>
        </el-col>
        <el-col :span="24" class="thr">
          <div class="w_1200">
            <el-menu
              :default-active="route.path"
              background-color="#0085d2"
              text-color="#fff"
              active-text-color="#fff"
              router
              mode="horizontal"
              :ellipsis="false"
            >
              <template v-for="item in menuList">
                <!-- 二级菜单，三级菜单 -->
                <template v-if="item.type == '0'">
                  <el-sub-menu :index="item.path" :key="item.path">
                    <!-- 二级菜单-名称 -->
                    <template v-slot:title>{{ item.name }}</template>
                    <template v-for="subItem in item.children">
                      <!-- 三级菜单 -->
                      <el-sub-menu v-if="subItem.children" :index="subItem.path" :key="subItem.path">
                        <!-- 三级菜单-名称 -->
                        <template v-slot:title>{{ subItem.name }}</template>
                        <!-- 三级菜单-菜单列表 -->
                        <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
                          <template v-slot:title>{{ threeItem.name }}</template>
                        </el-menu-item>
                      </el-sub-menu>
                      <!-- 二级菜单-菜单列表 -->
                      <el-menu-item v-else :index="subItem.path" :key="`${subItem.path}`" :route="{ path: item.path }">
                        <template v-slot:title>{{ item.name }}</template>
                      </el-menu-item>
                    </template>
                  </el-sub-menu>
                </template>
                <!-- 一级菜单 -->
                <template v-else>
                  <el-menu-item :index="item.path" :key="item.path" :route="{ path: item.path }">
                    <template v-slot:title>{{ item.name }}</template>
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { siteInfo, menuInfo } from '../../../layout/site'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import store from '@/stores/counter'
import type { Ref } from 'vue'
import { ref, onMounted } from 'vue'
// 接口
import { ModuleStore } from '@common/src/stores/system/module'
import { MenusStore } from '@common/src/stores/system/menus'
import type { IQueryResult } from '@/util/types.util' //
const moduleAxios = ModuleStore()
const menusAxios = MenusStore()
// 路由
const router = useRouter()
const route: any = useRoute()
let user: Ref<any> = ref({})
const siteInfos: Ref<any> = ref(siteInfo)
const menuList: Ref<any> = ref(menuInfo.menuList)
onMounted(async () => {
  user.value = store.state.user
  await search()
})
const search = async () => {
  let name = import.meta.env.VITE_APP_ROUTER
  const res: IQueryResult = await moduleAxios.query({ name: name, is_use: '0' })
  if (res && res.errcode == '0') {
    if (res.total > 0) {
      let moduleInfo = res.data[0]
      let menusInfo: IQueryResult = await menusAxios.query({ module_id: moduleInfo._id })
      if (res.errcode == '0') menuList.value = menusInfo.data
    }
  } else {
    ElMessage({ message: `${res.errmsg}`, type: 'error' })
  }
}
// 跳转登录
const toLogin = () => {
  router.push({ path: `/login` })
}
// 个人中心
const toCenter = () => {
  let env = import.meta.env.VITE_APP_ENV
  let path = ''
  if (env == 'development') {
    if (user.value.type == '0' || user.value.type == '1' || user.value.type == '2' || user.value.type == '3') path = 'http://localhost:8003/zkzxadmin'
    else if (user.value.type == '4' || user.value.type == '5' || user.value.type == '6') path = 'http://localhost:8002/zkzxuser'
  } else {
    if (user.value.type == '0' || user.value.type == '1' || user.value.type == '2' || user.value.type == '3') path = '/zkzxadmin'
    else if (user.value.type == '4' || user.value.type == '5' || user.value.type == '6') path = '/zkzxuser'
  }
  window.open(path)
}
// 退出登录
const toLogout = () => {
  localStorage.removeItem('token')
  location.reload()
}
// 首页
const toHome = () => {
  router.push({ path: '/' })
}
</script>
<style scoped lang="scss">
.main {
  height: 250px;
  overflow: hidden;
  background: url('@/assets/top-1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .one {
    height: 40px;
    line-height: 40px;
    background: rgba(33, 82, 153, 0.12156862745098039);
    color: #fff;
    .one_title {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .one-2 {
        text-align: right;
      }
    }
  }
  .two {
    height: 160px;
    overflow: hidden;
    padding: 50px 0px;
    .el-image {
      float: left;
      width: 60px;
      height: 60px;
    }
    span {
      float: left;
      height: 60px;
      line-height: 60px;
      margin: 0 10px;
      color: #2d64b3;
      font-size: 36px;
      font-family: cursive;
      text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
      font-weight: 600;
    }
  }
  .two:hover {
    cursor: pointer;
  }
  .thr {
    height: 50px;
    overflow: hidden;
    :deep(.el-menu-item) {
      width: 16.7%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-right: 1px solid #fff;
      font-size: 20px;
    }
    :deep(.el-menu-item:last-child) {
      width: 16.7%;
      border-right: none;
    }
    .el-menu--horizontal > .el-menu-item {
      border-bottom: none;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      background-color: #fe950e !important;
    }
  }
}
</style>
