<script setup lang="tsx">
  import { ExampleUserInfo } from '~/stores/user';

  const { avatarUrl, showWelcome, data } = defineProps({
    avatarUrl: {
      type: String,
      default: '',
    },
    showWelcome: {
      type: Boolean,
      default: true,
    },
    data: {
      type: ExampleUserInfo,
      default: () => ({}),
    },
  });

  function doShow(x: string) {
    const notShow = [
      'userAvatarPath',
      'userAvatarUrl',
      '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="m-2">
      <slot name="header"></slot>
    </div>
    <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 dark:bg-zinc-800 dark:border-zinc-600"
      >
        <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
            v-if="showWelcome"
            class="text-2xl ml-auto mr-auto md:mt-6 mt-20 mb-6"
            >欢迎 {{ data.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] dark:bg-[rgb(36,36,36)] dark:border-zinc-600"
      >
        <t-card
          title="个人信息"
          class="w-10/12 max-w-[700px]"
          :bordered="false"
        >
          <t-row v-for="(value, key) of data" :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 dark:border-zinc-600"
                >{{ toChinese(key) }}</t-col
              >
              <t-col
                class="flex-[2] border-2 flex items-center dark:border-zinc-600"
              >
                <span class="ml-4">
                  <component :is="getIcon(key)" />
                  {{ value }}
                </span>
              </t-col>
            </div>
          </t-row>
        </t-card>
      </div>
    </div>
    <slot />
  </div>
</template>

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