<script setup lang="ts">
  useSystemStore().currentPage = 'calendar';
  const avatarURL = ref('');
  onMounted(async () => {
    try {
      avatarURL.value = (await useUserStore().getAvatarURL())!;
    } catch (e) {
      await MessagePlugin.error(e as string);
    }
  });
</script>

<template>
  <div class="p-6">
    <div class="flex md:flex-row flex-col">
      <div
        class="flex-[1] m-2 h-[700px] bg-white rounded-xl border-gray-200 border-2 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 rounded-xl border-gray-200 border-2">
        <t-calendar class="h-[698px]"> </t-calendar>
      </div>
    </div>
  </div>
</template>
