<!-- 统计卡片 -->
<template>
  <a-row :gutter="16">
    <a-col
      v-bind="styleResponsive ? { lg: 6, md: 12, sm: 24, xs: 24 } : { span: 6 }"
    >
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">总销售额</div>
          <a-tooltip title="指标说明">
            <ele-tag color="green">全门店</ele-tag>
          </a-tooltip>
        </div>
        <h1 class="analysis-chart-card-num"
          >¥{{ salesAmountStatistics.totalSale }}</h1
        >
        <a-divider />
        <div class="flex justify-between">
          <span>今日销售额</span>
          <span>{{ salesAmountStatistics.dailySale }}</span>
        </div>
      </a-card>
    </a-col>
    <a-col
      v-bind="styleResponsive ? { lg: 6, md: 12, sm: 24, xs: 24 } : { span: 6 }"
    >
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">订单总数</div>
          <ele-tag color="green">全门店</ele-tag>
        </div>
        <h1 class="analysis-chart-card-num">{{
          orderStatistics.totalOrders
        }}</h1>
        <a-divider />
        <div class="flex justify-between">
          <span>今日订单数</span>
          <span>{{ orderStatistics.dailyNewOrders }}单</span>
        </div>
      </a-card>
    </a-col>
    <a-col
      v-bind="styleResponsive ? { lg: 6, md: 12, sm: 24, xs: 24 } : { span: 6 }"
    >
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">会员总数</div>
          <ele-tag color="blue">全门店</ele-tag>
        </div>
        <h1 class="analysis-chart-card-num">{{
          userStatistics.totalUsers
        }}</h1>
        <a-divider />
        <div class="flex justify-between">
          <span>今日新增会员</span>
          <span>{{ userStatistics.dailyNewUsers }}</span>
        </div>
      </a-card>
    </a-col>
    <a-col
      v-bind="styleResponsive ? { lg: 6, md: 12, sm: 24, xs: 24 } : { span: 6 }"
    >
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">设备总数</div>
          <ele-tag color="green">全门店</ele-tag>
        </div>
        <h1 class="analysis-chart-card-num">{{
          equipmentStatistics.totalEquipment
        }}</h1>
        <!--        <div class="analysis-chart-card-content" style="padding-top: 16px">-->
        <!--        </div>-->
        <a-divider />
        <div class="flex justify-between">
          <span>今日新增设备数</span>
          <span>{{ equipmentStatistics.dailyEquipment }}</span>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import {
    QuestionCircleOutlined,
    CaretUpOutlined,
    CaretDownOutlined
  } from '@ant-design/icons-vue';
  import { use } from 'echarts/core';
  import type { EChartsCoreOption } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart, BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { storeToRefs } from 'pinia';
  import { formatNumber } from 'ele-admin-pro/es';
  import { useThemeStore } from '@/store/modules/theme';
  import { getPayNumList } from '@/api/dashboard/analysis';
  import useEcharts from '@/utils/use-echarts';
  import { Count } from '@/api/shop/count/model';
  import { PayNumData } from '@/api/dashboard/analysis/model';
  import { assignObject, toDateString } from 'ele-admin-pro';
  import type { Goods } from '@/api/goods/model';

  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const orderStatistics = ref({
    dailyNewOrders: '',
    totalOrders: ''
  });
  const equipmentStatistics = ref({
    dailyEquipment: '',
    totalOrders: ''
  });
  const salesAmountStatistics = ref({
    dailyNewOrders: 0,
    totalEquipment: 0
  });
  const userStatistics = ref({
    dailyNewUsers: 0,
    totalUsers: ''
  });
  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
  }>();

  //
  const visitChartRef = ref<InstanceType<typeof VChart> | null>(null);
  const payNumChartRef = ref<InstanceType<typeof VChart> | null>(null);

  useEcharts([visitChartRef, payNumChartRef]);

  // 访问量折线图配置
  const visitChartOption: EChartsCoreOption = reactive({});

  // 支付笔数柱状图配置
  const payNumChartOption: EChartsCoreOption = reactive({});

  /* 获取支付笔数数据 */
  const getPayNumData = () => {
    getPayNumList()
      .then((data) => {
        console.log(data);
        orderStatistics.value = data.orderStatistics;
        equipmentStatistics.value = data.equipmentStatistics;
        salesAmountStatistics.value = data.salesAmountStatistics;
        userStatistics.value = data.userStatistics;
        //console.log(statistics);
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  getPayNumData();
</script>

<style lang="less" scoped>
  .analysis-chart-card {
    :deep(.ant-card-body) {
      padding: 16px 22px 12px 22px;
    }

    :deep(.ant-divider) {
      margin: 12px 0;
    }
  }

  .analysis-chart-card-num {
    font-size: 30px;
  }

  .analysis-chart-card-content {
    height: 40px;
  }

  .analysis-trend-text {
    white-space: nowrap;
  }
</style>
