<template>
  <div class="ma-content-block p-3 mt-3" v-if="xAxis.length > 0">
    <a-card
      :bordered="false"
      class="general-card"
      :header-style="{ paddingTop: '10px', paddingBottom: 0 }"
      :body-style="{
        paddingTop: '20px',
      }"
      title="一周数据">
      <sa-chart height="300px" :option="chartOptions" />
    </a-card>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { graphic } from 'echarts'
import welcome from '@/views/v1/api/welcome'

function graphicFactory(side) {
  return {
    type: 'text',
    bottom: '8',
    ...side,
    style: {
      text: '',
      textAlign: 'center',
      fill: '#4E5969',
      fontSize: 12,
    },
  }
}

const xAxis = ref([])
const chartsData = ref([])
const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])

const chartOptions = ref({})

const getData = async () => {
  const res = await welcome.chartDataApi()
  xAxis.value = res.data.days
  // chartsData.value = res.data.data.login_count

  chartOptions.value = {
    legend: {
      data: ['注册', '登录', '消耗', '充值'],
    },
    grid: {
      left: '2.6%',
      right: '0',
      top: '10',
      bottom: '30',
    },
    xAxis: {
      type: 'category',
      offset: 2,
      data: xAxis.value,
      boundaryGap: false,
      axisLabel: {
        color: '#4E5969',
        formatter(value, idx) {
          if (idx === 0) return ''
          if (idx === xAxis.value.length - 1) return ''
          return `${value}`
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        interval: (idx) => {
          if (idx === 0) return false
          if (idx === xAxis.value.length - 1) return false
          return true
        },
        lineStyle: {
          color: '#E5E8EF',
        },
      },
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#23ADFF',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisLabel: {
        formatter(value, idx) {
          if (idx === 0) return value
          return `${value}`
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E5E8EF',
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      // formatter(params) {
      //   return `<div class="login-chart">
      //     <p class="tooltip-title">${params[0].axisValueLabel}</p>
      //     <div class="content-panel"><span>登录次数</span><span class="tooltip-value">${Number(
      //       params[0].value
      //     ).toLocaleString()}</span></div>
      //   </div>`
      // },
    },

    graphic: {
      elements: graphicElements.value,
    },
    series: [
      {
        name: '注册',
        type: 'line',
        stack: '总数',
        data: res.data.reg,
      },
      {
        name: '登录',
        type: 'line',
        stack: '总数',
        data: res.data.login,
      },
      {
        name: '消耗',
        type: 'line',
        stack: '金额',
        data: res.data.cost,
      },
      {
        name: '充值',
        type: 'line',
        stack: '金额',
        data: res.data.pay,
      },
    ],
  }
}

onMounted(() => {
  getData()
})
</script>

<style lang="less" scoped>
.general-card {
  border-radius: 4px;
  border: none;

  :deep(.arco-card-header) {
    height: auto;
    padding: 20px;
    border: none;
  }
}
</style>
