<template>
  <div class="h-full kra-container2 overflow-auto bg-main">
    <div class="space-y-2 py-2">
      <kra-card class="rounded-xl border border-slate-200/80 bg-white px-5 py-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
        <p class="text-xs tracking-[0.2em] text-muted-foreground">DASHBOARD</p>
        <h1 class="mt-2 text-xl font-semibold text-base-text lg:text-2xl">欢迎回来，{{ userStore.userInfo.nickName }}</h1>
        <p class="mt-2 text-sm text-muted-foreground">{{ today }} · 当前展示后台实时数据</p>
      </kra-card>
      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4">
        <kra-card v-for="item in statistics" :key="item.title">
          <div class="p-2"><div class="text-sm text-muted-foreground">{{ item.title }}</div><div class="mt-3 text-3xl font-semibold text-base-text">{{ item.value }}</div></div>
        </kra-card>
      </div>
      <div class="grid grid-cols-1 items-stretch gap-2 xl:grid-cols-2">
        <kra-card title="快捷功能" show-action custom-class="min-h-[300px]"><kra-quick-link /></kra-card>
        <kra-card title="公告" show-action custom-class="min-h-[300px]"><kra-notice /></kra-card>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue'
  import { useUserStore } from '@/pinia/modules/user'
  import { getUserList } from '@/api/user'
  import { getSysOperationRecordList } from '@/api/sysOperationRecord'
  import { getFileList } from '@/api/fileUploadAndDownload'
  import { getInfoList } from '@/modules/announcement/api/info'
  import { KraNotice, KraQuickLink, KraCard } from './components'
  defineOptions({ name: 'Dashboard' })
  const userStore = useUserStore()
  const today = computed(() => new Date().toLocaleDateString('zh-CN'))
  const statistics = ref([{ title: '系统用户', value: '—' }, { title: '操作记录', value: '—' }, { title: '媒体文件', value: '—' }, { title: '系统公告', value: '—' }])
  onMounted(async () => {
    const results = await Promise.allSettled([getUserList({ page: 1, pageSize: 1 }), getSysOperationRecordList({ page: 1, pageSize: 1 }), getFileList({ page: 1, pageSize: 1 }), getInfoList({ page: 1, pageSize: 1 })])
    results.forEach((result, index) => { if (result.status === 'fulfilled' && result.value?.code === 0) statistics.value[index].value = result.value.data?.total ?? 0 })
  })
</script>
