<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';
import { getstatisticsInfo } from '#/api/core/statistics';
import { AccessControl } from '@vben/access';
import { useAccess } from '@vben/access';

const { hasAccessByRoles } = useAccess();
import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';

import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisits from './analytics-visits.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';

const overviewItems = ref<AnalysisOverviewItem[]>([
  {
    icon: 'lets-icons:user',
    title: '今日注册',
    totalTitle: '总用户量',
    totalValue: 100,
    value: 100,
  },
  {
    icon: 'icon-park-solid:paper-money',
    title: '今日充值',
    totalTitle: '总充值',
    totalValue: 100,
    value: 100,
    decimals: 2,
  },
  {
    icon: 'fluent:people-money-24-regular',
    title: '今日充值人数',
    totalTitle: '总充值人数',
    totalValue: 0,
    value: 0,
  },
  {
    icon: 'iconamoon:sign-percent',
    title: '次留',
    totalTitle: 'ARPU',
    totalValue: 31.02,
    value: 0.12,
    decimals: 2,
  },
]);


onMounted(async () => {
  const data = await getstatisticsInfo({ AppId: 0 });
  if (data) {
    if (overviewItems.value[0]) {
      overviewItems.value[0].value = data.register;
      overviewItems.value[0].totalValue = data.totalRegister;
    }
    if (overviewItems.value[1]) {
      overviewItems.value[1].value = data.recharge;
      overviewItems.value[1].totalValue = data.totalRecharge;
    }
    if (overviewItems.value[2]) {
      overviewItems.value[2].value = data.rechargeUser;
      overviewItems.value[2].totalValue = data.totalRechargeUser;
    }
    if (overviewItems.value[3]) {
      overviewItems.value[3].value = data.remain;
      overviewItems.value[3].totalValue = data.totalRecharge / data.totalRegister;
    }
  }

});
const chartTabs: TabOption[] = [
  {
    label: '热度趋势',
    value: 'trends',
  },
  {
    label: '月访问量',
    value: 'visits',
  },
];
</script>

<template>
  <div class="p-5">
    <AccessControl :codes="['super', 'admin']" type="role">
      <AnalysisOverview :items="overviewItems" />

      <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>
    </AccessControl>
  </div>
</template>
