<template>
  <div id="header-1">
    <el-row>
      <el-col :span="24" class="header">
        <el-col :span="8" class="one">
          <span>{{ siteInfo.zhTitle }}</span>
        </el-col>
        <el-col :span="16" class="two">
          <el-button
            size="small"
            plain
            v-for="(item, index) in moduleList"
            :key="index"
            @click="modulePath(item)"
            :class="[active == item.active ? 'active' : '']"
            >{{ item.name }}</el-button
          >
          <el-dropdown @command="toDrop">
            <el-button type="danger" plain>
              {{ user && user._id ? user.name || user.unit_name || user.nick_name : '暂无昵称' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="User">个人中心</el-dropdown-item>
                <el-dropdown-item :icon="SwitchButton">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import store from '@/stores/counter';
import { studio_style_Info, project_module_menus } from '../../../layout/site';
import { ArrowDown, User, SwitchButton } from '@element-plus/icons-vue';
const router = useRouter();
let siteInfo = studio_style_Info.webInfo;
let active = 3;
let moduleList: Ref<any[]> = ref(project_module_menus);
let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
// 模块跳转
const modulePath = async (item: { path: string }) => {
  window.location.href = `${item.path}`;
};
const toDrop = async (e: string) => {
  if (e == 'logout') {
    localStorage.removeItem('token');
    window.location.href = `${import.meta.env.VITE_APP_HOST}`;
  } else if (e == 'center') {
    router.push({ path: '/userInfo/center' });
  }
};
onMounted(async () => {
  user.value = store.state.user;
});
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  .one {
    span {
      display: inline-block;
      background-color: #ffc000;
      padding: 8px 10px;
      border: 1px solid #ffffff;
    }
  }
  .two {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    button {
      margin: 0 0 0 10px;
    }
    .el-button {
      margin: 0 0 0 10px;
    }
    .active {
      color: #07c4a8;
    }
  }
}
</style>
