<template>
  <div class="statistics-wrapper" v-loading="loading">
    <statistics-card
      class="stat-item"
      :value="stat.orderActualAmount"
      label="订单实收"
      icon="el-icon-money"
      start-color="#36B3F9"
      end-color="#3E64FF"
      :height="height"
      sub-label="订单数"
      :sub-value="stat.orderCount"
      :precision="2"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      :value="stat.storeCount"
      label="店铺数"
      icon="el-icon-bicycle"
      start-color="#45B7D1"
      end-color="#2F80ED"
      :height="height"
      sub-label="设备数"
      :sub-value="stat.deviceCount"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      :value="stat.userLightingNum"
      label="爆灯次数"
      icon="el-icon-bicycle"
      start-color="#45B7D1"
      end-color="#2F80ED"
      :height="height"
      sub-label="总消费金额"
      :sub-value="stat.userConsumeAmount"
      :show-value-change="false"
    />
  </div>
</template>

<script>
import StatisticsCard from '@/components/StatisticsCard'
import { getRevenueStat } from '@/api/dashboard/dashboard'
import { StatKeys } from '@/utils/enums'

export default {
  name: 'UserStatistics',
  components: {
    StatisticsCard
  },
  props: {
    mchId: {
      type: String,
      default: null,
    },
    userId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      height: 120,
      stat: {
        orderUserCount :0,
        orderActualTotalAmount :0,
        orderActualAmount :0,
        orderCount :0,
        orderRefundAmount :0,
        storeCount :0,
        deviceCount :0,
        deviceStatusMap :0,
        deviceOnlineStatusMap :0,
        userLightingNum :0,
        userConsumeAmount :0,
      }
    }
  },
  created() {
    this.getRevenueStat()
  },
  methods: {
    async getRevenueStat() {
      this.loading = true
      try {
        const res = await getRevenueStat({
          mchId: this.mchId,
          userId: this.userId,
          keys: [
            StatKeys.ORDER_USER_COUNT,
            StatKeys.ORDER_COUNT,
            StatKeys.ORDER_PAY_AMOUNT,
            StatKeys.ORDER_REFUND_AMOUNT,
            StatKeys.ORDER_ACTUAL_TOTAL_AMOUNT,
            StatKeys.DEVICE_COUNT,
            StatKeys.DEVICE_STATUS_COUNT,
            StatKeys.DEVICE_ONLINE_STATUS_COUNT,
            StatKeys.STORE_COUNT,
            StatKeys.CURRENT_LIGHTING_NUM_COUNT,
            StatKeys.USER_REFUND_AMOUNT,
            StatKeys.USER_RECHARGE_AMOUNT,
          ]
        })
        if (res.code === 200) {
          this.stat = res.data
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-wrapper {
  display: flex;
  gap: 10px;
  .stat-item {
    flex: 1;
  }
}
</style>
