<template>
    <div id="myTypePie"></div>
</template>

<script>
    export default {
        name: 'BaseTypePie',
        props: ['pieId','echartsData'],
        data() {
            return {
                pieData: [],
				types:this.$GLOBAL.EXERCISE_TYPES()
            }
        },
        methods: {

            drawLine(data) {
                let that = this
                // 基于准备好的dom，初始化echarts实例
                let myPie = this.$echarts.init(document.getElementById('myTypePie'), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        'text': this.$t('evaluation.echarts.typePie'),
                        'left': 'center',
                        'textStyle': {
                            'fontSize': 14,
                            'color': '#595959'
                        }
                    },
					legend: {
						left: 'center',
						bottom: 0,
						type: 'scroll',
						formatter: function (name,val) {
						    if(data.length){
						    	return name + ' (' + data.filter(i => i.name === name)[0].value + that.$t('unit.text10') + ')';
						    }
						}
					},
                    color: ['#37a2da', '#e7bcf3', '#9fe6b8', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    calculable: true,
                    series: [
                        {
                            name: that.$t('evaluation.typePieTitle'),
                            type: 'pie',
                            radius: [0, 80],
                            data: data
                        }
                    ]
                }

                // 绘制图表
                myPie.setOption(option)

                window.addEventListener('resize', function() {
                    myPie.resize()
                })
            }
        },
        mounted() {
			let arr = []
			let typeList = this._.groupBy(this.echartsData.item, 'type')
			for(let key in typeList){
				arr.push({
					value:typeList[key].length,
					name:this.types[key]
				})
			}
			this.drawLine(arr)
        },
        computed: {
            // 获取最新知识点占比饼图数据
            getPieData() {
                return this.$store.state.totalAnalysis.knowledgeData
            }
        },
        watch: {
            echartsData(val) {

            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    #myTypePie {
        width: 100%;
        height: 320px;
        margin: 20px auto;
        display: block;
    }
</style>
