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

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

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

  /**
   * 日期数据
   */
  const xData = ref<string[]>([])

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

  useChannelDeptReload(loadChart)
</script>
