<template>
  <!-- 头部组件 -->
  <div class="header flex-row-center">
    <div class="header-bos flex-row-between">
      <div class="flex-row-start mr-[20px]">
        <div class="positioning flex-row-start" @click="onPath('/')">
          <el-icon size="20"><HomeFilled /></el-icon>
          <div class="ml-[10px]">首页</div>
        </div>
        <div class="positioning flex-row-start ml-[20px]">
          <img src="@/assets/images/layout/layout1.png" alt="" />
          <div>武汉</div>
        </div>
      </div>

      <div class="header-box flex-row-start">
        <el-dropdown v-if="userInfo.customerName">
          <div class="dropdow header-text hig">
            {{ userInfo.customerName }}
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <span></span>
                <span class="hig">{{ userInfo.customerName }}</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span>姓名:{{ userInfo.nickName }}</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click="onlogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div v-if="!userInfo.nickName" class="header-text" @click="onPath('/login')" style="cursor: pointer">请登录</div>
        <div v-if="!userInfo.nickName" class="header-text hig" @click="onPath('/breg')">免费注册</div>
        <div class="header-text" @click="onPath('/order/orderManage')">我的订单</div>
        <div class="header-text" @click="onPath('/enterprise/companyInfo')">会员中心</div>
        <div class="header-text" @click="onPath('/theme?id=1')">人才招聘</div>
        <div class="header-text">帮助中心</div>
        <div class="header-text end">在线客服</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { computed } from 'vue';
import { onPath } from '@/utils/siteConfig';
import Cookies from 'js-cookie';
import { getInfo } from '@/api/login';
const userInfo = ref<any>({});

onMounted(() => {
  const token = Cookies.get('Authorization');
  if (token) {
    getInfo().then((res) => {
      if (res.code == 200) {
        userInfo.value = res.data.user;
        userInfo.value.customerName = res.data.customerName || '';
      }
    });
  }
});

const router = useRouter();
const userStore = useUserStore();

// 判断是否已登录
const isLoggedIn = computed(() => !!userStore.token);

const goToLogin = () => {
  router.push('/login');
};

const goToMyOrder = () => {
  onPath('/order/orderManage');
};

const onlogout = () => {
  useUserStore()
    .logout()
    .then(() => {
      onPath('/login');
    });
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 40px;
  background-color: #efefef;
  .header-bos {
    width: 1200px;
    height: 100%;
    .positioning {
      font-weight: 400;
      font-size: 14px;
      color: #322b2b;
      cursor: pointer;
      img {
        height: 20px;
        width: 20px;
        margin-right: 10px;
      }
    }
    .header-box {
      font-weight: 400;
      font-size: 14px;
      color: #101828;
      .header-text {
        padding-right: 14px;
        margin-right: 14px;
        position: relative;
        cursor: pointer;
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 12px;
          background-color: #b7b7b7;
          right: 0;
          top: 4px;
        }
        &.end {
          padding-right: 0;
          margin-right: 0;
          &::after {
            display: none;
          }
        }
        &.hig {
          color: #e7000b;
        }
      }

      .dropdow {
        margin-top: 2px;
      }
    }
  }
}
</style>
