<template>
  <!-- <el-card shadow="never">
    <template #header>
      <CardTitle title="用户统计" />
    </template> -->
    <!-- 折线图 -->
    <Echart :height="300" :options="lineChartOptions" />
  <!-- </el-card> -->
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { EChartsOption } from 'echarts'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'

/** 会员用户统计卡片 */
defineOptions({ name: 'MemberStatisticsCard' })

const loading = ref(true) // 加载中
/** 折线图配置 */
const lineChartOptions = reactive<EChartsOption>({
  dataset: {
    dimensions: ['date', 'count'],
    source: []
  },
  legend: {
    // top:30
  },
  series: [
    { 
      name: '注册量',
      type: 'line',
      smooth: true,
      areaStyle: {} 
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    // padding: [5, 10]
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: (date: string) => formatDate(date, 'MM-DD')
    }
  },
  yAxis: {
    axisTick: {
      show: false
    },
    axisLabel: {
			margin: 2,
			formatter: function (value, index) {
					if (value >= 10000 && value < 10000000) {
							value = value / 10000 + "万";
					} else if (value >= 10000000) {
							value = value / 10000000 + "千万";
					}
					return value;
			}
		},
  },
  dataZoom: [
    {
      type: 'inside', // 内置型 dataZoom，允许通过触摸操作来缩放和平移
      start: 0,       // 初始显示区域的起始位置
      end: 100,       // 初始显示区域的结束位置
      zoomOnMouseWheel: 'shift',  // 使用 shift + 鼠标滚轮进行缩放，或在移动端用双指进行缩放
      moveOnMouseMove: true,      // 单指拖动进行平移
      moveOnMouseWheel: true      // 使用鼠标滚轮进行平移
    }
  ]

}) as EChartsOption

const getMemberRegisterCountList = async () => {
  loading.value = true
  // 查询最近一月数据
  const beginTime = dayjs().subtract(30, 'd').startOf('d')
  const endTime = dayjs().endOf('d')
  const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime)
  // 更新 Echarts 数据
  if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
    lineChartOptions.dataset['source'] = list
  }
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  getMemberRegisterCountList()
})
</script>
