<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';

import { onMounted, ref } from 'vue';

import { AnalysisOverview } from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import { dashboard } from '#/api/license/customer';

const overviewItems = ref<AnalysisOverviewItem[]>([]);

onMounted(async () => {
  const data = await dashboard();

  overviewItems.value = [
    {
      icon: SvgCardIcon,
      title: '用户量',
      totalTitle: '总用户量',
      totalValue: data.userCount || 0,
      value: data.userCount || 0,
    },
    {
      icon: SvgCakeIcon,
      title: '客户量',
      totalTitle: '总客户量',
      totalValue: data?.customerCount || 0,
      value: data?.customerCount || 0,
    },
    {
      icon: SvgBellIcon,
      title: '项目量',
      totalTitle: '总项目量',
      totalValue: data?.projectCount || 0,
      value: data?.projectCount || 0,
    },
    {
      icon: SvgDownloadIcon,
      title: 'License量',
      totalTitle: '总License量',
      totalValue: data?.licenseCount || 0,
      value: data?.licenseCount || 0,
    },
  ];
});
</script>

<template>
  <div class="p-5">
    <!-- <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
      :alt="userStore.userInfo?.nickname || '管理员'"
    >
      <template #title>
        早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
      </template>
      <template #description> 今日晴，20℃ - 32℃！ </template>
    </WorkbenchHeader> -->

    <AnalysisOverview class="mt-5" :items="overviewItems" />

    <!-- <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="客户类型">
          <AnalyticsCustomerType />
        </AnalysisChartCard>
      </div>
    </div> -->

    <!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs> -->

    <!-- <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
        <AnalyticsVisitsData />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
        <AnalyticsVisitsSource />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
        <AnalyticsVisitsSales />
      </AnalysisChartCard>
    </div> -->
  </div>
</template>
