<template>
    <chart-el :chartOpt="chartConf" />
</template>

<script>
import mixinChart from 'runner/common/mixins/mixinChart'

export default {
    name: 'PieChart',

    mixins: [mixinChart],

    data () {
        return {
            chartConf: {}
        }
    },

    props: {
        // 图表布局配置 - width, height
        layout: {
            type: Object,
            default () {
                return {
                    width: '100%',
                    height: '130px'
                }
            }
        },

        // 图表配置
        option: {
            type: Object,
            default () {
                return {
                    base: {},
                    seriesData: []
                }
            }
        }
    },

    mounted () {
        this.initComponents()
    },

    methods: {
        initComponents () {
            const { width = '', height = '' } = this.layout
            const option = this.getChartOption() || {}
            this.chartConf = {
                width,
                height,
                option
            }
        },

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData () {
            const defSeriesOpts = {
                name: '学历情况',
                type: 'pie',
                center: ['38%', '52%'],
                radius: ['58%', '78%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#001626',
                    borderWidth: 5
                },
                label: {
                    formatter: item => {
                        return item.percent.toFixed(0) + '%'
                    },
                    fontSize: 16,
                    fontFamily: 'CenturyGothic',
                    color: '#ffffff'
                },
                labelLine: {
                    show: false,
                    length: 0,
                    length2: 0
                },
                data: []
            }

            let result = [defSeriesOpts]
            const { seriesData = [] } = this.option
            if (seriesData.length) {
                const temp = []
                seriesData.forEach(item => {
                    temp.push(this.deepMerge({}, defSeriesOpts, item))
                })
                result = temp
            }

            return result
        },

        /**
         * @method getSeriesData 图表数据
         */
        getChartOption () {
            const defaultColors = [
                '#ffffff',
                '#00ECFF',
                '#00C0FF',
                '#00E371'
            ]
            const defaultOption = {
                color: defaultColors,
                legend: {
                    orient: 'vertical',
                    icon: 'circle',
                    itemWidth: 9,
                    itemHeight: 9,
                    right: 0,
                    top: 'center',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei'
                    }
                }
            }
            // 添加series
            const result = this.deepMerge({}, defaultOption, this.option.base)
            result.series = this.getSeriesData()

            return result
        }
    }
}
</script>
