<template>
	<div>
		<div :id="echartsId" class="myRadar"></div>
	</div>
</template>

<script>
	export default {
		name: 'helloLine',
		props: ['echartsId'],
		data() {
			return {
				radarData: []
			}
		},
		mounted() {
			this.radarData = this.getRadarData
			this.drawLine(this.radarData)
		},
		methods: {
			drawLine(indicator, data) {
				// 基于准备好的dom，初始化echarts实例
				let that = this
				let myRadar = this.$echarts.init(document.getElementById(this.echartsId), 'chalk')

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						formatter: function(params) {
							var results = params.marker + that.$t('totalAnalysis.ka_text4') + '<br>'
							for (var i = 0; i < params.value.length; i++) {
								results += indicator[i].name + '：' + params.value[i] + '%<br>'
							}
							return results
						}
					},
					radar: {
						triggerEvent: true,
						name: {
							textStyle: {
								color: '#fff',
								borderRadius: 3,
								fontSize: 14,
								padding: [13, 15]
							}
						},
						center: ['50%', '50%'],
						tooltip: {

						},
						indicator: indicator,
						splitArea: {
							areaStyle: {
								// color: [
								//  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
								//  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
								//  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
								// ].reverse()
							}
						},
						axisLine: { // 指向外圈文本的分隔线样式
							lineStyle: {
								color: 'rgba(255,255,255,0.2)'
							}
						},
						splitLine: {
							lineStyle: {
								width: 2,
								color: [
									'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
									'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
									'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
								].reverse()
							}
						}
					},
					series: [{
						name: '',
						type: 'radar',
						itemStyle: {
							color: '#22CEE7'
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#2cc7cb' // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#59b2ef' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							}
						},
						lineStyle: {
							color: '#9FACE6'
						},
						data: [{
							value: data,
							name: that.$t('totalAnalysis.ka_text4')
						}]
					}]
				}

				// 绘制图表
				myRadar.setOption(option)
			},

			doRender(data) {
				let list = data
				let indicator = []
				// 获取最大值 +5 设置到雷达边界最大值
				let maxNum = Math.max(...data.per.map(i => Number(i) * 100)) + 5
				list.pointList.forEach(item => {
					indicator.push({
						name: item,
						max: maxNum
					})
				})
				this.drawLine(indicator, list.per.map(item => (Number(item) * 100).toFixed(2)))
			}
		},
		mounted() {
			if (this.getLevelData) {
				this.doRender(this.getLevelData)
			}
		},

		computed: {
			// 获取最新散点图数据
			getLevelData() {
				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
				this.doRender(this.getLevelData)
			}
		}
	}
</script>

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