import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { PieCenterConfig } 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,
}

const option = {
    ...otherConfig,
    backgroundColor: 'transparent',
    legend: {
        show: true,
        orient: 'vertical',
        left: '60%',          // 默认更靠左一点，避免截断
        top: 'center',
        icon: 'rect',
        showEmpty:false,
        // itemWidth: 10,
        itemHeight: 8,
        itemGap: 5,
        selectedMode: 'multiple',
        // padding: [15, 20, 15, 20],
        textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 16
        },
        formatter: function (name: string) {
            return name
        }
    },
    // color: ['rgba(255, 215, 0, 1)', 'rgba(74, 144, 226, 1)', 'rgba(80, 227, 194, 1)', 'rgba(126, 211, 33, 1)', 'rgba(144, 19, 254, 1)'],
    dataset: { ...dataJson },
    series: [
        // 最外浅灰细边框
        {
            type: 'pie',
            radius: ['84%', '86%'],
            center: ['30%', '48%'],
            silent: true,
            z: 1,
            data: [{ value: 1, name: '', itemStyle: { 
                color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(200, 200, 200, 0.01)' },
                            { offset: 0.5, color: 'rgba(200, 200, 200, 0.1)' },
                            { offset: 1, color: 'rgba(200, 200, 200, 0.01)' },
                        ]
                    }
            } }],
            label: { show: false },
            labelLine: { show: false }
        },
        // 中层蓝色细边框
        {
            type: 'pie',
            radius: ['73%', '75%'],
            center: ['30%', '48%'],
            silent: true,
            z: 2,
            data: [{
                value: 1, name: '', itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(58, 160, 255, 0.2)' },
                            { offset: 1, color: 'rgba(58, 160, 255, 1)' },
                        ]
                    }
                }
            }],
            label: { show: false },
            labelLine: { show: false }
        },
        // 内层（蓝->黑）渐变环：在外边框里面
        {
            type: 'pie',
            radius: ['66%', '73%'],
            center: ['30%', '48%'],
            silent: true,
            z: 3,
            data: [
                {
                    value: 1,
                    name: '',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(10, 21, 35, 0.3)' },
                                { offset: 1, color: 'rgba(127, 216, 255, 0.3)' },
                            ]
                        }
                    }
                }
            ],
            label: { show: false },
            labelLine: { show: false }
        },
        // 主数据环：内半径加大，让"最内环更薄"
        {
            type: 'pie',
            radius: ['50%', '66%'],      // 原 ['35%','65%'] -> 更薄的环
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            padAngle: 4,                 // 扇区间隙
            z: 9,
            itemStyle: {
                borderColor: 'rgba(13, 16, 22, 1)',    // 用深色细边强调间隙
                borderWidth: 2,
                borderRadius: 0
            },
            label: { show: false },
            labelLine: { show: false },
            emphasis: {
                label: {
                    show: false,
                },
                itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0, 0, 0, 0.35)' }
            },
            data: dataJson.source
        },
        // 内部渐变装饰环（在空洞边缘，提升质感）
        {
            type: 'pie',
            radius: ['48%', '50%'],      // 位于主环内侧
            center: ['30%', '50%'],
            silent: true,
            z: 0,
            data: [
                {
                    value: 1,
                    name: '',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(90, 220, 255, 0.15)' },
                                { offset: 1, color: 'rgba(90, 220, 255, 0.15)' }
                            ]
                        }
                    }
                }
            ],
            label: { show: false },
            labelLine: { show: false }
        },
        {
            type: 'pie',
            radius: ['0%', '48%'],      // 位于主环内侧
            center: ['30%', '50%'],
            //   silent: true,
            z: 10,
            label: {
                show: true,
                position: 'center',
                formatter: '{a|23211}\n\n{b|总数}',
                rich: {
                    a: {
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: 34,
                        align: 'center'
                    },
                    b: {
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: 16,
                        align: 'center'
                    }
                }
            },

            data: [
                {
                    value: 1,
                    name: '',
                    itemStyle: {
                        color: 'transparent'
                    }
                }
            ],
            labelLine: { show: false }
        }
    ],
}

export default class Config extends PublicConfigClass implements CreateComponentType {
    public key: string = PieCenterConfig.key
    public chartConfig = cloneDeep(PieCenterConfig)
    public option = echartOptionProfixHandle(option, includes)
}