<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 { ref, computed } from 'vue'
import chartsCard from './chartsCard.vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
    // 数据格式示例：
    // [
    //   { name: '电话', value: 765, color: '#5793f3' },
    //   { name: '上门', value: 560, color: '#a9d672' },
    //   { name: '社交网络', value: 400, color: '#fac858' },
    //   { name: '推广渠道', value: 200, color: '#f96c6a' },
    //   { name: '其他', value: 120, color: '#c2a6f2' },
    // ]
  },
  total: {
    type: Number,
    required: true // 总拜访量
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400px'
  },
  tooltipTip: {
    type: String,
    default: '拜访方式支持自定义类型添加' // 提示框内容
  }
})

const chartOption = computed(() => {
  // console.log(props.data,"props.data");

  const legendData = props.data.map((item) => item.name)
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
      // 自定义提示框浮层样式
      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: ['35%', '50%'], // 图表中心位置，留出右侧图例空间
        label: {
          show: false // 隐藏饼图扇区默认标签
        },
        labelLine: {
          show: false // 隐藏标签连线
        },
        data: props.data.map((item) => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            color: item.color
          }
        })),
        // 中心文字配置
        emphasis: {
          label: {
            show: false
          }
        },
        // 中心显示总拜访量
        renderItem: (params, api) => {
          if (params.name === '') {
            return {
              type: 'text',
              position: api.coord([api.value(0), api.value(1)]),
              content: `总拜访量\n${props.total}`,
              style: {
                textAlign: 'center',
                fill: '#333',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 1.4
              }
            }
          }
          return null
        }
      }
    ]
  }
})

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>
