import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { PieCircleCommenConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export const includes = ['legend']


const otherConfig = {
  // 轮播动画
  isCarousel: false,
  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
}

// ECharts配置
export const option = {
  ...otherConfig,
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },

  title: {
    // text: total, /
    subtext: '总数',
    left: '30%',
    top: 'center',
    textAlign: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 35,
      fontWeight: 'bold',
      lineHeight: 40
    },
    subtextStyle: {
      color: '#ced4da',
      fontSize: 15
    },
    itemGap: 1
  },

  legend: {
    show: true,
    orient: 'vertical',
    left: '60%',
    top: 'center',
    itemGap: 15,
    itemWidth: 10,
    itemHeight: 35,
    formatter: (name: string) => name,
    icon: 'roundRect',
    textStyle: {
      rich: {
        title: {
          fontSize: 14,
          color: '#ffffff',
          align: 'left',
          padding: [0, 0, 10, 10]
        },
        detail: {
          fontSize: 14,
          color: '#ced4da',
          align: 'left',
          padding: [0, 0, 0, 10]

        }
      }
    }
  },

  series: [
    {
      // name: '总数',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false
        }
      },
      labelLine: {
        show: false
      }
    }
  ],  // 使用dataset关联数据
  dataset: { ...dataJson }
};

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = PieCircleCommenConfig.key

  public chartConfig = cloneDeep(PieCircleCommenConfig)

  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}