<template>
  <el-main>
    <template v-if="userInfo !== undefined">
      <div class="banner">
        <div class="banner-inner">
          <el-avatar :size="60"></el-avatar>
          <div>
            <div class="username">{{ userInfo.name }}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-else></template>
  </el-main>
</template>
<style lang="scss" scoped>
.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner {
  position: relative;
  height: 190px;
  // background-image: url('@/assets/banner.jpg');
  background-size: cover;
}

.banner-inner {
  position: absolute;
  bottom: 10px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

.el-avatar {
  margin-right: 10px;
}

.username {
  font-size: 30px;
  line-height: 60px;
  font-weight: bold;
  color: white;
}
</style>
<script lang="ts" setup>
import axiosInstance from '@/api';
import { type UserInfo, userInfoResponseSchema } from '@/schemas';
import { useUserStore } from '@/stores/user';
import { computed, onBeforeMount, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const userStore = useUserStore();
const initialized = ref(false);
const userInfo = ref<UserInfo>();
const isSelf = computed(() =>
  userStore.userInfo === null ? false : userStore.userInfo.id === userInfo.value?.id,
);
const route = useRoute();
const id = route.params.id as string | undefined;
const avatar = ref<string>();

async function getAvatar(sha1: string) {
  const avatarResp = await axiosInstance.get(`/api/user/avatar${sha1}`);
}
watch(
  () => userStore.userInfo,
  (info) => {
    userInfo.value = info ?? undefined;
  },
);
onBeforeMount(async () => {
  if (id == undefined) {
    userInfo.value = userStore.userInfo!;
    initialized.value = true;
  } else {
    try {
      const userInfoResponse = userInfoResponseSchema.parse(
        (await axiosInstance.get(`/api/user/info/${id}`)).data,
      );
      if (userInfoResponse.type === 'error') {
        return;
      }
      userInfo.value = userInfoResponse.data;
      if (!userInfo.value.avatar) {
        /* empty */
      }
    } catch (e) {
      /* empty */
    } finally {
      initialized.value = true;
    }
  }
});
</script>
