<template>
  <n-card :bordered="false" class="rounded-16px shadow-sm">
    <div class="flex-y-center justify-between">
      <div class="flex-y-center">
        <icon-local-avatar class="text-70px" />
        <div class="pl-12px">
          <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.username }}, 今天又是充满活力的一天！</h3>
          <p class="leading-30px text-#999">每天进步, 日拱一卒</p>
        </div>
      </div>
      <n-space :size="24" :wrap="false">
        <n-statistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item"></n-statistic>
      </n-space>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { dashboardWorkbench } from '@/service';
import { useAuthStore } from '@/store';

defineOptions({ name: 'DashboardWorkbenchHeader' });

const auth = useAuthStore();

interface StatisticData {
  id: number;
  label: string;
  value: number;
}

const statisticData = ref<StatisticData[]>([
  {
    id: 0,
    label: '...',
    value: 0
  },
  {
    id: 1,
    label: '...',
    value: 0
  },
  {
    id: 2,
    label: '...',
    value: 0
  }
]);

dashboardWorkbench().then(result => {
  if (result.data) {
    statisticData.value[0] = {
      id: 0,
      label: '总课时',
      value: result.data.alltotal
    };
    statisticData.value[1] = {
      id: 1,
      label: '今日待上课',
      value: result.data.alltotal
    };
    statisticData.value[2] = {
      id: 2,
      label: '待录入考勤',
      value: result.data.attendance
    };
  }
});
</script>

<style scoped></style>
