<script setup lang="ts">
import { computed, ref } from 'vue';

import { useAccessStore, useUserStore } from '@vben/stores';

import { $t } from '@/locales';

import { useLoginModalStore } from '#/store';

const userStore = useUserStore();
const accessStore = useAccessStore();
const isLogin = computed(() => !!userStore.userInfo);
const logOutShow = ref(false);
const loginModalStore = useLoginModalStore();

function handleLogout() {
  userStore.setUserInfo(null);
  accessStore.setAccessToken(null);
  logOutShow.value = false;
}

function openLogin() {
  loginModalStore.open();
}

function handleEditProfile() {
  window.open('/Views/Home/userSet.html', '_blank');
}
</script>

<template>
  <div
    class="relative h-[217px] rounded-[30px] bg-white px-[18px] py-[20px] shadow-md"
  >
    <div class="relative w-[52px]">
      <img
        v-if="userStore.userInfo?.avatar"
        :src="`/File/Download?fileId=${userStore.userInfo?.avatar}`"
        alt=""
        class="h-[52px] w-[52px] object-contain"
      />
      <img
        v-else
        alt="user"
        class="h-[52px] w-[52px] object-cover"
        src="@/assets/image/user.png"
      />
      <div
        v-if="isLogin"
        class="absolute bottom-[-15px] left-1/2 flex h-[23px] w-[60px] -translate-x-1/2 items-center justify-center rounded-[30px] bg-[#fff] px-[4px] text-center text-[9px] text-[#8B0046] shadow-md"
      >
        {{ userStore.userInfo?.account }}
      </div>
    </div>
    <div
      v-if="isLogin"
      class="more-btn absolute right-[20px] top-[20px] flex h-[25px] w-[25px] cursor-pointer items-center justify-center gap-[6px] rounded-full bg-[#A8A8A8] text-[12px] text-white"
      @click="logOutShow = !logOutShow"
    >
      <img alt="" class="h-[3px] w-[15px]" src="@/assets/image/more.png" />
    </div>
    <div v-if="logOutShow" class="more-bg" @click="handleLogout">
      {{ $t('auth.logout') }}
    </div>
    <div v-if="!isLogin">
      <h2 class="mb-[5px] mt-[15px] text-[15px] font-bold">
        {{ $t('homeModule.helloWelcome') }}
      </h2>
      <p class="w-[249px] text-sm text-xs leading-relaxed">
        {{ $t('homeModule.helloWelcomeIntroduction') }}
      </p>
      <div
        class="m-auto mt-[12px] flex h-[32px] w-[185px] cursor-pointer items-center justify-center rounded-[25px] bg-gradient-to-b from-[#8B0046] to-[#460023] text-[10px] text-white"
        @click="openLogin"
      >
        {{ $t('auth.login') }}
        <img
          alt=""
          class="ml-[6px] h-[11.05px] w-[10.51px]"
          src="@/assets/image/login.png"
        />
      </div>
    </div>
    <div v-else>
      <h2 class="mb-[5px] mt-[25px] text-[15px] font-bold">
        {{ userStore.userInfo?.realName }}
      </h2>
      <p class="mb-[4px] flex w-[249px] items-center gap-2 text-[12px] text-xs">
        <img class="h-[12px] w-[12px]" src="@/assets/image/phone.png" />
        {{ userStore.userInfo?.cellPhone || $t('auth.noPhone') }}
      </p>
      <p class="flex w-[249px] items-center gap-2 text-[12px] text-xs">
        <img class="h-[8.77px] w-[14.61px]" src="@/assets/image/email.png" />
        {{ userStore.userInfo?.email || $t('auth.noEmail') }}
      </p>
    </div>
    <div
      v-if="isLogin"
      class="ml-auto mt-[5px] flex h-[32px] w-[99px] cursor-pointer items-center justify-center gap-[2px] rounded-[25px] bg-gradient-to-r from-[#8B0046] to-[#460023] text-[10px] font-medium text-white"
    >
      <img
        alt=""
        class="h-[12.95px] w-[12.95px]"
        src="@/assets/image/edit.png"
      />
      <span @click="handleEditProfile">{{ $t('homeModule.editProfile') }}</span>
    </div>
  </div>
</template>

<style scoped>
.more-bg {
  position: absolute;
  top: 45px;
  right: 16px;
  width: 73px;
  height: 33px;
  padding-top: 8px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: url('@/assets/image/more-bg.png') no-repeat center center;
  background-size: 100% 100%;
}
</style>
