<template>
  <div class="headers">
    <div class="headers-top">
      <div class="content">
        <div style="display: flex; align-items: center; margin-right: 32px; cursor: pointer">
          <img src="@/assets/img/icon-shou.png" />
          网站首页
        </div>
        <div style="display: flex; align-items: center; cursor: pointer">
          <img src="@/assets/img/icon-yi.png" />
          移动端
        </div>
      </div>
    </div>
    <div class="headers-bottom">
      <div class="content">
        <img src="../assets/img/logo.jpg" width="150" height="60" />
        <div class="menu-list">
          <template v-for="item in menuList" :key="item.link">
            <router-link
              :to="{ path: item.link }"
              style="text-decoration: none"
              @click="handleClick(item)"
            >
              <el-link
                class="item"
                :underline="false"
                :type="activeName === item.link ? 'primary' : ''"
                target=""
                >{{ item.name }}</el-link
              >
            </router-link>
            <el-link
              v-if="item.id === 7"
              class="item"
              style=""
              :underline="false"
              type="primary"
              target=""
              @click="login"
              >{{ token ? '已登录' : '登录/注册' }}</el-link
            >
          </template>
        </div>
        <div class="info-name">
          <el-dropdown>
            <div v-if="isPersonalOrCompany && token" style="color: #177cfa">
              欢迎{{ companyInfo?.FNAME }}
            </div>
            <div
              v-if="!isPersonalOrCompany && token"
              class="flx-align-center"
              style="color: #177cfa"
            >
              <el-avatar :src="baseURL + '/' + personalInfo?.F_LQKJ_Photos" />
              <span
                style="margin-left: 8px; width: 95px"
                class="nowrap-ellipsis"
                :title="'欢迎' + personalInfo?.FNAME"
                >欢迎{{ personalInfo?.FNAME }}</span
              >
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
  <loginVue v-model:show="show" />
</template>

<script lang="ts" setup>
import { menuList } from './config'
import { useGlobalStore } from '@/stores/modules/global'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { baseURL } from '@/services'
import loginVue from '@/views/login/index.vue'

const route = useRoute()
const router = useRouter()
const globalStore = useGlobalStore()
const userInfoStore = useUserInfoStore()

const activeName = ref('')
const show = ref(false)

const token = computed(() => globalStore.getToken)
const isPersonalOrCompany = computed(() => userInfoStore.isPersonalOrCompany)
const personalInfo = computed(() => userInfoStore.getPersonalInfo)
const companyInfo = computed(() => userInfoStore.getCompanyInfo)

watch(
  () => route.fullPath,
  (newPath: any) => {
    activeName.value = '/' + newPath.split('/')[1].split('?')[0]
  },
  { immediate: true }
)

const login = () => {
  if (token.value) return
  show.value = true
}
const logout = () => {
  userInfoStore.$reset()
  globalStore.$reset()
  router.push('/home')
}

const handleClick = (item: any) => {
  // console.log(item)
}
</script>

<style lang="scss" scoped>
.headers {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .headers-top {
    width: 100%;
    background-color: #022756;
    display: flex;
    justify-content: center;
    text-align: start;

    .content {
      min-width: 1316px;
      height: 32px;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .headers-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #ffffff;

    .content {
      width: 1316px;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      img {
        margin: 10px 16px 10px 0;
      }
      .menu-list {
        .item {
          font-size: 14px;
          padding: 10px 24px 9px;
        }
      }
      .info-name {
        width: 150px;
        white-space: nowrap;
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }
  }

  :deep(.el-tooltip__trigger) {
    outline: 0;
  }
}
</style>
