<template>
  <div class="art-card h-105 p-4 box-border mb-5 max-sm:mb-4">
    <div class="art-card-header">
      <div class="title">
        <h4>{{ $t('console.activeUser.title') }}</h4>
      </div>
    </div>
    <ArtBarChart
      class="box-border p-2"
      barWidth="50%"
      height="calc(100% - 40px)"
      :showAxisLine="false"
      :data="yData"
      :xAxisData="xData"
    />
  </div>
</template>

<script setup lang="ts">
  import { fetchRechargeBarChart } from '@/api/dashboard'
  import { getChannelDeptRequestParams, useChannelDeptReload } from '@/composables/useChannelDeptScope'

  /**
   * 充值金额数据
   */
  const yData = ref<number[]>([])

  /**
   * 月份数据
   */
  const xData = ref<string[]>([])

  const loadChart = () => {
    fetchRechargeBarChart(getChannelDeptRequestParams()).then((data: any) => {
      yData.value = data?.recharge_amount ?? []
      xData.value = data?.recharge_month ?? []
    })
  }

  useChannelDeptReload(loadChart)
</script>
