<template>
  <isp-data-load :loading="loading" :empty="!userInfo.teacherId">
    <view class="mine-main">
      <min-base-info />
    </view>
    <mine-data />
    <isp-menu current-menu="mine" />
  </isp-data-load>
</template>

<script setup lang="ts">
import MineData from '@/pages/inspector/mine/mine-data.vue';
import MinBaseInfo from '@/pages/inspector/mine/min-base-info.vue';
import { getUserInfo } from '@/api/inspector/mine';
import { onMounted, provide, ref } from 'vue';
import type { UserInfo } from '@/types/inspector/mine';
import IspMenu from '@/components/inspector/isp-menu.vue';
import IspDataLoad from '@/components/inspector/isp-data-load.vue';

const loading = ref(true);

const userInfo = ref<UserInfo>({
  teacherId: undefined,
  avatarUrl: undefined,
  nickName: undefined,
  phone: '',
  label: undefined,
  gradSchool: undefined,
  degree: undefined,
  inspectorUserNum: undefined,
  inspectorNum: undefined,
  planNum: undefined,
  role: undefined,
});
provide('userInfo', userInfo);

const queryData = async () => {
  try {
    loading.value = true;
    const { data } = await getUserInfo();
    userInfo.value = Object.assign(data, { role: '督学师' });
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  queryData();
});
</script>

<style scoped lang="scss">
.mine-main {
  background: linear-gradient(180deg, #d1d9ff 0%, rgba(210, 214, 255, 0) 100%);
  padding-top: 30rpx;
}
</style>
