<template>
	<div class="myLevelPie" :id="pieId"></div>
</template>

<script>
	export default {
		name: 'BasePie',
		props: ['pieId'],
		data() {
			return {
				pieData: []
			}
		},
		methods: {

			drawLine(data) {
				let that = this

				// 基于准备好的dom，初始化echarts实例
				let myLevelPie = this.$echarts.init(document.getElementById(this.pieId), 'chalk')

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					calculable: true,
					roseType: true,
					series: {
						name: that.$t('totalAnalysis.le_title1'),
						type: 'pie',
						radius: [40, 140],
						center: ['45%', '55%'],
						max: 100, // for funnel
						sort: 'ascending', // for funnel
						data: data
					}
				}

				// 绘制图表
				myLevelPie.setOption(option)
				window.addEventListener('resize', function() {
					myLevelPie.resize()
				})
			}
		},
		mounted() {
			if (this.getPieData) {
				let pointList = this.getPieData.pointList
				let valList = this.getPieData.per
				let arr = []
				pointList.forEach((item, index) => {
					let o = {}
					o.name = item
					o.value = valList[index].replace('%', '')
					arr.push(o)
				})
				this.drawLine(arr)
			}
		},
		computed: {
			// 获取最新知识点占比饼图数据
			getPieData() {
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state
					.totalAnalysis.currentSubject)
				let levelJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].levelKey
				let transArr = this.$GLOBAL.EXERCISE_LEVELS()
				levelJson.pointList = levelJson.pointList.map((i, index) => transArr[index])
				for (let key in levelJson.classpercent) {
					if (key !== 'className') {
						let newKey = transArr[+key - 1]
						levelJson.classpercent[newKey] = levelJson.classpercent[key]
					}
				}
				return levelJson
			},
			getKnowledgeData() {
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state
					.totalAnalysis.currentSubject)
				return this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].pointKey
			},
		},
		watch: {
			getKnowledgeData(val) {
				if (!val) return
				let pointList = this.getPieData.pointList
				let valList = this.getPieData.per
				let arr = []
				pointList.forEach((item, index) => {
					let o = {}
					o.name = item
					o.value = valList[index].replace('%', '')
					arr.push(o)
				})
				this.drawLine(arr)
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.myLevelPie {
		width: 100%;
		height: 380px;
		margin: 0 auto;
		display: block;
	}
</style>
