<template>
  <div>
    <t-popup
      placement="left-bottom"
      overlayClassName="user-popup"
      destroy-on-close
      trigger="click"
      v-model:visible="user_popup_visible"
    >
      <template #content>
        <div class="s-header-user-info-dropdown">
          <div class="small-userinfo">
            <div class="header">
              <img
                class="avatar"
                :src="userInfo.avatar ? userInfo.avatar : imgs.avatar"
                alt=""
              />
              <span class="user-name">{{ userInfo.name ?? '---' }}</span>
            </div>
            <div class="user-options-box">
              <template v-for="item in OptionsList" :key="item.value">
                <div class="user-option" @click="gotoMember(item)">
                  <div
                    class="real-option"
                    :class="{
                      active: route.path == item.value,
                    }"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </template>
            </div>
            <div class="line"></div>
            <div class="logout-box" @click="logout">退出登录</div>
          </div>
        </div>
      </template>
      <div class="user-info">
        <img :src="userInfo.avatar ? userInfo.avatar : imgs.avatar" alt="" />
      </div>
    </t-popup>
  </div>
</template>

<script setup lang="ts">
import { Popup as TPopup } from 'tdesign-vue-next';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const imgs = {
  avatar: new URL('../assets/svg/header/avatar.svg', import.meta.url).href,
};
const route = useRoute();
const router = useRouter();
const store = useStore();
const user_popup_visible = ref(false);
const userToken = computed(() => store.getters['user/token']);
// 用户信息对象
const userInfo = computed(() => store.getters['user/userInfo']);
// 选项列表
const OptionsList = [
  {
    label: '个人信息',
    value: '', //UserInfo
  },
  {
    label: '创作记录',
    value: '/CreationRecord', //CreationRecord
  },
  {
    label: '产品订单',
    value: '', //    /PayRecord
  },
  {
    label: '合作咨询',
    value: '', //CooperationConsulting
  },
];
// 点击不同选项
const gotoMember = (item: any) => {
  if (!item.value) {
    return;
  }
  const resUrl = router.resolve({
    path: item.value,
  });
  window.open(resUrl.href);
  user_popup_visible.value = false;
};

const logout = async () => {
  if (userToken.value) {
    await store.dispatch('user/Logout');
    user_popup_visible.value = false;
  }
};
// 获取用户信息
const getInfo = async () => {
  store.dispatch('user/UserInfo');
};

onMounted(() => {
  getInfo();
});
</script>

<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
.user-info {
  .da();
  cursor: pointer;
  .up-icon {
    padding-left: 12px;
  }
  img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
}
.user-popup {
  .t-popup__content {
    padding: 0;
    margin: 0;
    border-radius: @main-border-radius;
    background: #181818;
    box-shadow: none;
    border: none;
  }
}
.s-header-user-info-dropdown {
  width: 200px;
  background: #181818;
  border: 1px solid #464646;
  border-radius: @main-border-radius;
  .small-userinfo {
    height: 100%;
    .header {
      width: 100%;
      height: 45px;
      border-bottom: 1px solid #464646;
      display: flex;
      align-items: center;
      padding: 0 12px;
      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .user-name {
        padding-left: 8px;
        color: white;
        font-weight: 600;
        font-size: @font-size-14;
      }
    }
    .user-options-box {
      padding: 4px 0;
      .user-option {
        font-weight: 600;
        font-size: @font-size-14;
        padding: 6px;
        box-sizing: border-box;
        color: white;
        height: 45px;
        .real-option {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 12px;
          cursor: pointer;
          &:hover {
            background: #393939;
            border-radius: 8px;
          }
        }
        .active {
          background: #393939;
          border-radius: 8px;
        }
      }
    }
    .line {
      display: flex;
      justify-content: center;
      height: 1px;
      &::after {
        content: '';
        display: inline-block;
        width: 125px;
        border: 1px solid #464646;
      }
    }
    .logout-box {
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #d6d6d6;
      font-weight: 600;
      font-size: @font-size-14;
      cursor: pointer;
    }
  }
}
</style>
