<template>
  <div class="h-full flex flex-col">
    <div class="flex justify-between p-4">
      <div class="text-[#999] text-sm">门店分类</div>
    </div>
    <div class="flex-1" ref="sortRef"></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 sortRef = ref(null)
const datas = ref([])
const { setOptions } = useECharts(sortRef)

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

const getData = async () => {
  const resData = await http.get('/admin-api/api/cockpit/store-category')
  datas.value = resData
  chatInit()
}

const chatInit = () => {
  setOptions({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        name: '门店',
        type: 'pie',
        radius: '90%',
        center: ['50%', '50%'],
        clockwise: false,
        data: datas.value.map(e=>{
          return {
            name: e.name,
            value: e.stores_count
          }
        }),
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            
            borderColor: '#ffffff',
          },
          emphasis: {
            borderWidth: 0,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
}
</script>
