<template>
  <div>
    <ClientOnly>
      <MyLayout>
        <template #content>
          <div class="user-info-box">
            <div class="userinfo-item">
              <div class="userinfo-img">
                <img src="/images/svg/header/userOne.svg" alt="tx" />
              </div>
              <div class="userinfo-vip">
                <span style="font-size: 20px">
                  {{ userInfo.name ?? '---' }}
                </span>
                <p>{{ userInfo.vip_type ?? '免费会员' }}</p>
              </div>
            </div>
            <div style="display: none">
              <userTwoSvg />
              <vipSvg />
              <collectSvg />
              <logoutSvg />
              <BillSvg></BillSvg>
            </div>
            <t-tabs
              v-model:value="tableValue"
              placement="left"
              @change="tabchange"
              :list="tabList"
            >
              <keep-alive>
                <router-view v-if="route.meta.keepAlive"> </router-view>
              </keep-alive>
            </t-tabs>
          </div>
        </template>
      </MyLayout>
    </ClientOnly>
  </div>
</template>

<script lang="tsx" setup>
import MyLayout from '@/views/layout/layout.vue';
import PersonalCenter from '@/views/user/PersonalCenter.vue';
import MemberCenter from '@/views/user/memberCenter.vue';
import Invitation from '@/views/user/invitation.vue';
import Billing from '@/views/user/Billing.vue';
import Logout from '@/views/user/logout.vue';
import userTwoSvg from '/public/images/svg/header/userTwo.svg';
import vipSvg from '/public/images/svg/header/vip.svg';
import collectSvg from '/public/images/svg/header/collect.svg';
import BillSvg from '/public/images/svg/header/Bill.svg';
import logoutSvg from '/public/images/svg/header/logout.svg';
import request from '@/utils/request';
import { useI18n } from 'vue-i18n';
import { webLogo } from '@/constants/logo';
useHead({
  title: 'Dexfilter | User',
  meta: [
    {
      name: 'description',
      content: 'Dexfilter-用户中心，可管理自己的账户',
    },
  ],
  link: [webLogo],
});
const route = useRoute();
const Cookie = useCookie('userCookie');
const router = useRouter();
const { t } = useI18n();
const tableValue = ref(route.name);
// 获取用户信息
const userInfo = useTokenInfo();
// 需要切换的路由
const ChangeRouter = useChangeRouter();
watch(ChangeRouter.value, (v) => {
  if (v) {
    tableValue.value = v.name;
    router.push({
      path: v.path,
    });
  }
});
const tabList = [
  {
    label: () => (
      <div class="tab-label">
        <userTwoSvg />
        <p>{t('user.IndividualCenter')}</p>
      </div>
    ),
    value: 'personal',
    panel: () => <PersonalCenter></PersonalCenter>,
  },
  {
    label: () => (
      <div class="tab-label">
        <vipSvg />
        <p>{t('user.MemberCenter')}</p>
      </div>
    ),
    value: 'member',
    panel: () => <MemberCenter></MemberCenter>,
  },
  {
    label: () => (
      <div class="tab-label">
        <collectSvg />
        <p>{t('user.InvitationCenter')}</p>
      </div>
    ),
    value: 'InviteWelfare',
    panel: () => <Invitation></Invitation>,
  },
  {
    label: () => (
      <div class="tab-label">
        <BillSvg />
        <p>{t('user.BillingDetails')}</p>
      </div>
    ),
    value: 'Billing',
    panel: () => <Billing></Billing>,
  },
  {
    label: () => (
      <div class="tab-label">
        <logoutSvg />
        <p>{t('user.Logout')}</p>
      </div>
    ),
    value: 'logout',
    panel: () => <Logout></Logout>,
  },
];
const tabchange = (value: string) => {
  if (value === 'logout') {
    return;
  }
  tableValue.value = value;
  router.push({
    path: `/user/${value}`,
  });
};
// 监听路由变化--浏览器回退按钮不会触发路由事件，手动触发
watch(
  () => route.name,
  (v) => {
    tableValue.value = v;
  }
);
// 个人信息
onMounted(() => {
  getUserInfo();
});
const getUserInfo = async () => {
  const result: any = await request.get('/api/user/info', {
    headers: {
      authorization: `Bearer ${Cookie.value}`,
    },
    params: {},
  });
  if (result.code === 0) {
    userInfo.value = result.data.info;
  }
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.user-info-box {
  background: @td--right-back-color-2;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  .userinfo-item {
    width: 355px;
    height: 150px;
    border: 1px solid var(--td-Search-info-border-bottom-2);
    .da();
    .userinfo-img {
      .dja();
      width: 100px;
      height: 100px;
      margin: 0 20px;
    }
    .userinfo-vip {
      height: 100px;
      text-align: left;
      .dj(space-evenly);
      flex-direction: column;
      p {
        color: #257bfb;
        font-weight: 800;
        font-size: 20px;
      }
    }
  }

  :deep(.t-tabs) {
    overflow: visible;
    display: flex;
    .tab-label {
      width: 320px;
      height: 100%;
      .dja();
      svg {
        margin-left: 70px;
      }
      p {
        flex: 1;
      }
    }
    .t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover
      .t-tabs__nav-item-wrapper {
      background-color: transparent;
    }
    .t-tabs__nav-container.t-is-left::after {
      width: 0;
    }
    .t-tabs__nav-item.t-size-m {
      border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
      height: 65px;
      line-height: 65px;
      .t-tabs__nav-item-text-wrapper {
        .dja();
        width: 353px;
        svg {
          margin-right: 40px;
        }
      }
    }
    .t-tabs__nav-wrap {
      :not(:last-child).t-is-active {
        p {
          color: #257bfb;
        }
        span {
          color: #257bfb;
          svg {
            fill: #257bfb;
          }
        }
      }
    }
    .t-tabs__nav-container {
      border: 1px solid var(--td-Search-info-border-bottom-2);
      border-top: none;
      height: calc(100vh - 70px - 150px);
    }
    .t-tabs__nav-item-wrapper {
      height: 100%;
      padding: 0;
      margin: 0;
      .da();
      p {
        font-size: 16px;
        line-height: 40px;
        height: 40px;
      }
    }
    .t-tab-panel {
      margin: -150px 0 0 40px;
      height: calc(100vh - 70px);
    }
  }
}
</style>
