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

<script>
	export default {
		name: 'BasePointPie',
		props: ['pieId', 'echartsData'],
		data() {
			return {
				pieData: [],
				types: this.$GLOBAL.EXERCISE_DIFFS()
			}
		},
		methods: {
			
			getColorRandom(num){
			    var colorarr = [];
			    //构成颜色的字符元素
			    var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
			    for(var i=0;i<num;i++){
			    	var color = "#";
			    	for(var j=0;j<6;j++){
			   	        var  cIndex = Math.round(Math.random()*15);
			   	   	    color+=cArray[cIndex];
			   	    }
			    	colorarr[i] = color;
			    }
			    return colorarr;
			},
			


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

				// 指定图表的配置项和数据
				var option = {
					title: {
						'text': this.$t('evaluation.echarts.pointPie'),
						'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:that.getColorRandom(50),
					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 tempArr = []
			this.echartsData.item.forEach(i => {
				if (i.type === 'compose' && i.children.length) {
					tempArr.push(...i.children)
				} else {
					tempArr.push(i)
				}
			})
			let typeList = this._.groupBy(tempArr, 'knowledge')
			for (let key in typeList) {
				let newKey = key === 'undefined' || !key ? this.$t('evaluation.noPoints') : key
				let isExistIndex = arr.map(i => i.name).indexOf(newKey)
				if (arr.length && isExistIndex > -1) {
					arr[isExistIndex].value = arr[isExistIndex].value + typeList[key].length
				} else {
					arr.push({
						value: typeList[key].length,
						name: newKey
					})
				}

			}
			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>
	#myPointPie {
		width: 100%;
		height: 320px;
		margin: 20px auto;
		display: block;
	}
</style>
