<template>
  <div class="visit-way-pie-chart">
    <h3 class="chart-title">{{ props.tooltipTip }}</h3>
    <chartsCard
      :option="chartOption"
      :width="width"
      :height="height"
      @chart-ready="handleChartReady"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import chartsCard from './chartsCard.vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400px'
  },
  tooltipTip: {
    type: String,
    default: '拜访方式支持自定义类型添加'
  }
})

const chartOption = computed(() => {
  const legendData = props.data.map((item) => item.name)
  return {
    graphic: {
      type: 'group',
      bounding: 'raw',
      left: '30%',
      top: '46%',
      z: 100,
      children: [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: '总拜访量',
            textAlign: 'center',
            fill: '#666',
            fontSize: 14
          }
        },
        {
          type: 'text',
          left: 'center',
          top: 20,
          style: {
            text: `${props.total}`,
            textAlign: 'center',
            fill: '#000',
            fontSize: 20,
            fontWeight: 'bold'
          }
        }
      ]
    },
    tooltip: {
      trigger: 'item',
      extraCssText: 'background: #fff9cc; border: 1px solid #ffe57f; padding: 8px;',
      position: (point) => {
        const x = point[0] > 300 ? point[0] - 100 : point[0]
        const y = point[1] < 100 ? point[1] + 20 : point[1]
        return [x, y]
      },
      formatter: (params) => {
        const baseInfo = `${params.seriesName} <br/>${params.marker} ${params.name} : ${params.value} (${params.percent}%)`
        return `${baseInfo} <br/><span style="color: #999; font-size: 12px;">${props.tooltipTip}</span>`
      }
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      align: 'left',
      icon: 'circle',
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 15,
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      data: legendData
    },
    series: [
      {
        name: props.tooltipTip,
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['30%', '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: props.data.map((item: any) => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            color: item.color
          }
        })),
        emphasis: {
          label: {
            show: false
          }
        }
      }
    ]
  }
})

const handleChartReady = (chart: echarts.ECharts) => {
  // 可扩展事件或动画效果
}
</script>

<style scoped lang="scss">
.visit-way-pie-chart {
  .chart-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }
}
</style>
