<template>
  <div class="statistics-wrapper" v-loading="loading">
    <statistics-card
      class="stat-item"
      :value="stat.user.balance"
      label="账户余额"
      icon="el-icon-wallet"
      start-color="#FA709A"
      end-color="#FEE140"
      :height="height"
      :precision="2"
      sub-label="未入账"
      :sub-value="stat.bonus.waitDivideAmount"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      :value="stat.order.payAmount - stat.orderRefund.amount"
      label="订单实收"
      icon="el-icon-money"
      start-color="#36B3F9"
      end-color="#3E64FF"
      :height="height"
      :precision="2"
      sub-label="累计分成"
      :sub-value="stat.bonus.amount - stat.bonusRefund.amount"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      :value="stat.device.count"
      label="车辆数"
      icon="el-icon-bicycle"
      start-color="#45B7D1"
      end-color="#2F80ED"
      :height="height"
      sub-label="订单数"
      :sub-value="stat.order.count"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      :value="stat.areaJoin.joinCount"
      label="加盟商"
      icon="el-icon-office-building"
      start-color="#FFB199"
      end-color="#FF0844"
      :height="height"
      sub-label="合伙人"
      :sub-value="stat.areaJoin.partnerCount"
      :show-value-change="false"
    />
    <statistics-card
      class="stat-item"
      label="运营区"
      :value="stat.area.count"
      :sub-value="stat.userAgent.mchCount"
      sub-label="下属运营商"
      icon="el-icon-location"
      start-color="#43E695"
      end-color="#3BB2B8"
      :height="height"
      :show-value-change="false"
    />
  </div>
</template>

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

export default {
  name: 'UserStatistics',
  components: {
    StatisticsCard
  },
  props: {
    userId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      height: 120,
      stat: {
        user: {
          balance: 0,
        },
        userAgent:{
          mchCount: 0
        },
        order: {
          payAmount: 0,
          count: 0
        },
        orderRefund: {
          amount: 0
        },
        bonus: {
          amount: 0
        },
        bonusRefund: {
          amount: 0
        },
        device: {
          count: 0
        },
        area: {
          count: 0
        },
        areaJoin: {
          joinCount: 0,
          partnerCount: 0
        }
      }
    }
  },
  created() {
    this.getStat()
  },
  methods: {
    async getStat() {
      this.loading = true
      try {
        const res = await getStat({
          userId: this.userId,
          bonusUserId: this.userId,
          keys: [
            StatKeys.USER_BALANCE,
            StatKeys.ORDER_PAY_AMOUNT,
            StatKeys.ORDER_REFUND_AMOUNT,
            StatKeys.ORDER_COUNT,
            StatKeys.BONUS_AMOUNT,
            StatKeys.BONUS_REFUND_AMOUNT,
            StatKeys.DEVICE_COUNT,
            StatKeys.AREA_COUNT,
            StatKeys.AREA_JOIN_COUNT,
            StatKeys.AREA_JOIN_PARTNER_COUNT,
            StatKeys.USER_MCH_COUNT
          ]
        })
        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>
