<template>
  <div class="order-type-chart">
    <div class="chart-header">
      <h3>订单类型分布</h3>
    </div>
    <v-chart class="chart" :option="chartOption" autoresize />
    <!-- <div class="legend">
      <div class="legend-item" v-for="item in legendData" :key="item.name">
        <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
        <span class="legend-text">{{ item.name }}</span>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import RPC from '@/utils/rpc'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])

const legendData = ref([
  { name: '充值', color: '#409eff' },
  { name: '包月', color: '#67c23a' },
  { name: '包季', color: '#e6a23c' },
  { name: '包年', color: '#f56c6c' },
])

RPC.post('/dashboard/order_type_distribution').then((res) => {
  console.log('order_type_distribution', res)
  chartData.value = res.items.map((item) => {
    return {
      name: item.type,
      value: item.value_cents / 100,
    }
  })
})

const chartData = ref([
  // { value: 35, name: '充值', itemStyle: { color: '#409eff' } },
  // { value: 25, name: '包月', itemStyle: { color: '#67c23a' } },
  // { value: 25, name: '包季', itemStyle: { color: '#e6a23c' } },
  // { value: 15, name: '包年', itemStyle: { color: '#f56c6c' } },
])

const chartOption = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}% ({d}%)',
  },
  legend: {
    bottom: '0%',
    left: 'center',
  },
  series: [
    {
      name: '订单类型',
      type: 'pie',
      radius: ['50%', '80%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: chartData,
    },
  ],
})
</script>

<style lang="scss" scoped>
.order-type-chart {
  padding: 20px;

  .chart-header {
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .chart {
    height: 300px;
    width: 100%;
  }

  .legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      .legend-text {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}
</style>
