<template>
  <div class="h-full flex flex-col">
    <div class="flex justify-between items-center p-4">
      <div class="text-[#999] text-sm">数据排行</div>
      <div class="w-30">
        <a-select
          ref="select"
          v-model:value="day"
          class="w-full"
          @change="onChange"
        >
          <a-select-option
            v-for="item in dayList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <div class="flex-1" ref="rankRef"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useECharts } from '@/components/echarts/useECharts.js'
import echarts from '@/components/echarts/echarts.js'
import http from '@/utils/request'

const day = ref('7days')
const dayList = [
  {
    value: '7days',
    label: '近7天',
  },
  {
    value: '30days',
    label: '近30天',
  },
  {
    value: '180days',
    label: '近半年',
  },
  {
    value: '365days',
    label: '近一年',
  },
]
const rankRef = ref(null)
const { setOptions } = useECharts(rankRef)

let dataList = ref([])

onMounted(() => {
  getData()
})

const onChange = () => {
  getData()
}

const getData = async () => {
  const resData = await http.get('/admin-api/api/cockpit/store-sales-ranking', {
    params: {
      last: day.value,
    },
  })
  const arr = resData.map((e, i) => {
    return [i + 1, e.store.title, e.sales]
  })
  dataList.value = arr.splice(0, 15)
  chatInit()
}

const chatInit = () => {
  __SetOption(dataList.value)
}

let barWidth = 20
let nameFontColor = '#000'
let nameFontSize = 12
let namePosition = [0, -15]

function __getColorValue(name, val, index) {
  return {
    name: name,
    color: '#000',
    value: val,
    itemStyle: {
      normal: {
        show: true,
        color: '#0E7CE2',
        barBorderRadius: 0,
      },
    },
  }
}

function __SetOption(data) {
  let lists = []
  let values = []
  data.forEach((item, index) => {
    lists.push(item[1])
    values.push(__getColorValue(item[1], item[2], index))
  })
  const max = Math.max(...values.map((e) => e.value))
  const maxValue = new Array(values.length).fill(max)

  let option = {
    grid: {
      top: '10px',
      left: '10px',
      right: '70px',
      bottom: 0,
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false, inside: false },
        data: lists,
      },
    ],
    xAxis: {
      type: 'value',
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
    },
    series: [
      {
        show: true,
        type: 'bar',
        barGap: '-100%',
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: 'transparent',
          },
        },
        z: 1,
        data: maxValue,
      },
      {
        name: '排行',
        type: 'bar',
        barWidth: barWidth,
        data: values,
        animationDuration: 1500,
        zlevel: 2,
        label: {
          normal: {
            show: true,
            color: nameFontColor,
            show: true,
            position: 'inside',
            position: namePosition,
            textStyle: {
              fontSize: nameFontSize,
            },
            formatter: function (data) {
              return `${data.data.name}`
            },
          },
        },
      },
      {
        name: '排行数字',
        type: 'bar',
        barWidth: barWidth,
        data: values,
        barGap: '-100%',
        animationDuration: 1500,
        zlevel: 2,
        label: { normal: { show: true, position: 'right' } },
      },
    ],
  }

  setOptions(option)
}
</script>
