<script setup lang="tsx">
  useSystemStore().currentPage = 'home';
  const avatarURL = ref('');
  onMounted(async () => {
    try {
      avatarURL.value = (await useUserStore().getAvatarURL())!;
    } catch (e) {
      console.log(e);
    }
    console.log(avatarURL.value);
  });
  function doShow(x: string) {
    const notShow = ['userAvatar', 'userId', 'usernameOrEmail', 'lastGetTime'];
    for (const i of notShow) {
      if (x === i) return false;
    }
    return true;
  }
  function toChinese(x: string) {
    const map = {
      userName: '用户名',
      userId: '用户ID',
      userEmail: '邮箱',
      phone: '手机号',
      lastGetTime: '最后登录时间',
      userAvatar: '头像',
      userAmount: '余额',
      userBirthday: '生日',
    };
    return map[x as keyof typeof map];
  }
  function getIcon(key: string) {
    const map = {
      userName: 'user',
      userEmail: 'mail',
      userAmount: 'money',
      userBirthday: 'cake',
    };
    const val = map[key as keyof typeof map];
    return <t-icon v-if="" class="t-menu__operations-icon" name={val} />;
  }
</script>

<template>
  <div class="p-6">
    <div class="flex md:flex-row flex-col">
      <div
        class="flex-[1] m-2 h-full bg-white rounded-xl border-gray-200 border-2 min-h-[300px] min-w-48"
      >
        <div class="flex flex-row md:flex-col justify-center p-4">
          <t-image
            :src="avatarURL"
            alt="头像"
            :fit="'contain'"
            shape="circle"
            class="max-h-72 max-w-72 m-auto"
          />
          <span class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
            >欢迎 {{ useUserStore().userName }}
          </span>
        </div>
      </div>

      <div
        class="flex-[2] m-2 bg-white rounded-xl border-gray-200 border-2 flex justify-center pt-8 min-w-[558px]"
      >
        <t-card
          title="个人信息"
          class="w-10/12 max-w-[700px]"
          :bordered="false"
        >
          <t-row
            v-for="(value, key) of useUserStore().$state"
            :key="key"
            class="w-full"
          >
            <div
              v-if="doShow(key)"
              class="border-collapse flex flex-row w-full h-10"
            >
              <t-col
                class="flex-[1] flex justify-center border-2 items-center"
                >{{ toChinese(key) }}</t-col
              >
              <t-col class="flex-[2] border-2 flex items-center">
                <span class="ml-4">
                  <component :is="getIcon(key)" />
                  {{ value }}
                </span>
              </t-col>
            </div>
          </t-row>
        </t-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
