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

<script>
    export default {
        name: 'BaseObjectivePie',
        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('myObjectivePie'), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        'text': this.$t('evaluation.echarts.objectivePie'),
                        'left': 'center',
                        'textStyle': {
                            'fontSize': 14,
                            'color': '#595959'
                        }
                    },
					legend: {
						left: 'center',
						bottom: 0,
						type: 'scroll',
						formatter: function (name,val) {
						    return name + ' (' + data.filter(i => i.name === name)[0].value + that.$t('unit.text10') + ')';
						}
					},
                    color: ['#ff9f7f', '#37d2da','#37d2da', '#ff9f7f', '#d4e676', '#ff9f7f', '#fb7293'],
                    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')
			let subjectiveCount = 0
			let objectiveCount = 0
			for(let key in typeList){
				if(key === 'single' || key === 'multiple' || key === 'judge'){
					objectiveCount += typeList[key].length
				}else if(key === 'compose'){
					console.log(typeList[key])
					typeList[key][0].children.forEach(item => {
						if(item.type === 'single' || item.type === 'multiple' || item.type === 'judge'){
							subjectiveCount++
						}else{
							objectiveCount++
						}
					})
				}else{
					subjectiveCount += typeList[key].length
				}
			}
			arr = [{
				name:this.$t('evaluation.type1'),
				value:subjectiveCount
			},{
				name:this.$t('evaluation.type2'),
				value:objectiveCount
			}]
			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>

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