<template>
  <el-main
    v-loading="loading"
    element-loading-text="正在加载"
    class="page-main !flex"
    :class="[!smLess ? 'justify-center' : 'page-main--mobile flex-col']"
  >
    <template v-if="!smLess">
      <div
        v-if="!loading"
        class="p-20px w-950px flex flex-col"
        :class="[{ 'gap-10px': userInfo }, !userInfo ? 'justify-center items-center' : '']"
      >
        <template v-if="userInfo">
          <el-card body-class="h-150px flex gap-20px relative">
            <el-avatar :size="80" :src="getAvatarURL(userInfo.avatar)"></el-avatar>
            <user-information class="gap-5px" :user-info="userInfo" />
            <el-button
              v-if="userStore.isSelf(userInfo.id)"
              class="absolute bottom-20px right-20px"
              @click="$router.push({ name: 'UserEdit' })"
            >
              编辑资料
            </el-button>
          </el-card>
          <div class="flex gap-10px">
            <el-card class="aside w-200px self-start">
              <user-menu :user-info="userInfo" />
            </el-card>
            <el-card class="main flex-1">
              <router-view v-slot="{ Component }">
                <keep-alive>
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </el-card>
          </div>
        </template>
        <template v-else>
          <div class="font-bold text-30px">无法获取用户信息</div>
          <div class="flex">
            <el-button type="primary" @click="$router.back()">返回上页</el-button>
            <el-button type="primary" @click="loadUserInfo">刷新</el-button>
          </div>
        </template>
      </div>
    </template>
    <div class="m-t-150px flex-1 flex flex-col bg-light gap-10px rounded-t-20px" v-else>
      <template v-if="userInfo">
        <div class="relative flex h-200px bg-white p-20px rounded-t-20px">
          <el-avatar
            class="absolute border-2 border-solid border-light top--50px left-25px"
            :size="100"
            :src="getAvatarURL(userInfo.avatar)"
          ></el-avatar>
          <div class="p-t-60px">
            <user-information :user-info="userInfo" />
          </div>
        </div>
        <div class="flex-1 flex flex-col overflow-hidden">
          <div class="user-menu-h-outer w-auto">
            <user-menu :user-info="userInfo" mobile />
          </div>
          <div class="main flex-1 bg-white">
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </template>
    </div>
  </el-main>
</template>
<style lang="scss" scoped>
.page-main {
  background-image: url('/bg5.jpg');
  background-size: cover;
}
.el-card {
  transition: none;
}
.aside {
  --el-card-padding: 10px 0;
  .el-menu-item {
    @apply justify-center;
  }
}
:deep(.el-divider) {
  margin: 10px 0;
}
.main {
  --el-card-padding: 10px 0;
  --main-h-padding: 10px;
  &:not(.el-card) {
    padding: var(--el-card-padding);
  }
}
.user-menu-h-outer {
  overflow: scroll;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
<script lang="ts" setup>
import { getAvatarURL, getUserInfo } from '@/api';
import UserInformation from '@/components/user/UserInformation.vue';
import UserMenu from '@/components/user/UserMenu.vue';
import { type UserInfo } from '@/schemas/response';
import { useMediaStore } from '@/stores/media';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const { smLess } = storeToRefs(useMediaStore());
const route = useRoute();
const userStore = useUserStore();
const loading = ref(true);
const userInfo = ref<UserInfo>();
async function loadUserInfo() {
  loading.value = true;
  userInfo.value = undefined;
  const userID = Number(route.params.id as string);
  try {
    if (isNaN(userID)) {
      ElMessage.error('参数错误');
      return;
    }
    let data: UserInfo;
    if (userStore.isSelf(userID)) {
      data = userStore.userInfo!;
    } else {
      const resp = await getUserInfo({ userID });
      if (!resp) return;
      if (!resp.data) {
        ElMessage.error('用户不存在');
        return;
      }
      ({ data } = resp);
    }
    userInfo.value = data;
  } finally {
    loading.value = false;
  }
}
watch(() => [route.params.id, userStore.userInfo], loadUserInfo, { immediate: true });
</script>
