<!--
 * @Author: walker.liu
 * @Date: 2022-03-04 10:04:35
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <div>
    <ClientOnly>
      <t-popup
        class=""
        placement="left-bottom"
        show-arrow
        destroy-on-close
        trigger="click"
      >
        <template #content>
          <div class="s-header-user-info-dropdown">
            <div class="small-userinfo">
              <div class="small-logo">
                <userOneSvg></userOneSvg>
                <p class="small-logo-p1">{{ userInfo.name ?? '-----' }}</p>
                <p class="small-logo-p2">
                  {{ userInfo.vip_type ?? '免费会员' }}
                </p>
                <div class="post-box">
                  <div class="small-item">
                    <p class="small-p1">{{ $t('header.email') }}</p>
                    <p class="small-p2">-------</p>
                  </div>
                  <div class="small-item">
                    <p class="small-p1">{{ $t('header.wallets') }}</p>
                    <p class="small-p2">-------</p>
                  </div>
                </div>
              </div>
              <div class="small-info">
                <div
                  class="small-iconData"
                  @click="gotoMember('/user/personal')"
                >
                  <userTwo class="icon"></userTwo>
                  <p>{{ $t('user.PersonalInfo') }}</p>
                </div>
                <div class="small-iconData" @click="gotoMember('/user/member')">
                  <VipSvg class="icon"></VipSvg>
                  <p>{{ $t('user.MemberCenter') }}</p>
                </div>
                <div
                  class="small-iconData"
                  @click="gotoMember('/user/InviteWelfare')"
                >
                  <InvitationSvg class="icon"></InvitationSvg>
                  <p>{{ $t('user.InvitationCenter') }}</p>
                </div>
                <div class="small-iconData" @click="gotoMember('install')">
                  <InstallSvg class="icon"></InstallSvg>
                  <p>{{ $t('header.settings') }}</p>
                </div>
                <div class="small-iconData" @click="logout">
                  <logoutSvg
                    v-if="mode === 'light'"
                    class="icon last-icon"
                  ></logoutSvg>
                  <HomeLogoutSvg v-else class="icon last-icon"></HomeLogoutSvg>
                  <p v-if="Cookie">{{ $t('header.logout') }}</p>
                  <p v-else>{{ $t('header.goLogin') }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="user-info">
          <DefaultAvatar></DefaultAvatar>
          <upDownSvg class="up-icon"></upDownSvg>
        </div>
      </t-popup>
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import userTwo from '/public/images/svg/header/userTwo.svg';
import DefaultAvatar from '/public/images/svg/header/default-avatar.svg';
import upDownSvg from '/public/images/svg/header/upDown.svg';
import VipSvg from '/public/images/svg/header/vip.svg';
import InvitationSvg from '/public/images/svg/header/invitation.svg';
import InstallSvg from '/public/images/svg/header/install.svg';
import logoutSvg from '/public/images/svg/header/logout.svg';
import HomeLogoutSvg from '/public/images/svg/header/homeLogout.svg';
import userOneSvg from '/public/images/svg/header/userOne.svg';
import { MessagePlugin } from 'tdesign-vue-next';

const router = useRouter();
const userInfo = useTokenInfo();
// 当前主题
const mode = useCurTheme();
// 用户token
const Cookie = useCookie('userCookie');
// 点击不同选项
const gotoMember = (label: string) => {
  if (label === 'install') {
    return;
  }
  const resUrl = router.resolve({
    path: label,
  });
  window.open(resUrl.href);
};
// 退出登录和去登陆
const logout = () => {
  if (!Cookie.value) {
    router.push({
      path: '/login',
    });
  } else {
    // 退出
    if (Cookie.value) {
      Cookie.value = '';
      MessagePlugin.success('退出成功');
    }
  }
};
</script>

<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
.user-info {
  .da();
  cursor: pointer;
  .up-icon {
    padding-left: 12px;
  }
}
.s-header-user-info-dropdown {
  height: 200px;
  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05),
    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .small-userinfo {
    display: flex;
    height: 100%;
    .small-logo {
      height: 100%;
      .da();
      flex-direction: column;
      position: relative;
      padding: 12px;
      .small-logo-p1 {
        font-size: @font-size-xl;
        font-weight: bold;
        margin: 0;
        height: 27px;
        line-height: 27px;
      }
      .small-logo-p2 {
        color: #257bfb;
        font-size: 12px;
        font-weight: bold;
        margin: 9px 0;
        height: 13px;
        line-height: 13px;
      }
      .post-box {
        font-size: @font-size-s;
        .small-item {
          width: 100%;
          padding: 0 10px;
          margin: 5px 0;
          height: 14px;
          white-space: nowrap;
          .da();
          .small-p1 {
            color: var(--td-Search-info-color-1);
            height: 14px;
            line-height: 14px;
            margin: 0;
          }
          .small-p2 {
            color: var(--td-Search-info-color-1);
            height: 14px;
            line-height: 14px;
            margin: 0;
          }
        }
      }
    }
    .small-info {
      flex: 1;
      border-left: 1px solid #e4e4e4;
      flex-direction: column;
      padding: 0 12px;
      .small-iconData {
        cursor: pointer;
        .da();
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e4e4e4;
        &:hover {
          background: rgba(40, 126, 255, 0.1);
          transition: all 0.3s;
        }
        .icon {
          fill: var(--td-Search-info-color-1);
          margin: 0 10px;
          path {
            fill: var(--td-Search-info-color-1);
          }
        }
        .last-icon {
          fill: var(--td-Search-info-color-1);
          path {
            fill: none;
          }
        }
        p {
          height: 100%;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
