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

<script>
    export default {
        name: 'helloLine',
        props: ['echartsId','classIndex'],
        data() {
            return {
				curClassIndex:-1,
                radarData: []
            }
        },
		created() {
		},
        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) {
                            let result = params.name
                            let pointList = that.getKnowledgeData.pointList
                            for (let i = 0; i < pointList.length; i++) {
                                result += '<br>' + params.marker + pointList[i] + '：' + params.value[i] + '%'
                            }
                            return result
                        }
                    },
                    radar: {
                        triggerEvent: true,
                        name: {
                            textStyle: {
                                color: '#fff',
                                borderRadius: 3,
                                fontSize: 14,
                                padding: [13, 15]
                            }
                        },
                        center: ['50%', '45%'],
						radius:'55%',
                        tooltip: {
                            trigger: 'item'
                        },
                        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: '#15B8C3'
                            },
                            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_title4')
                                }
                            ]
                        }
                    ]
                }

                // 绘制图表
                myRadar.setOption(option)
				window.addEventListener('resize', function() {
				    myRadar.resize()
				})
            },

            doRender(data,classIndexs) {
				let classIndex = this.getCurClassIndex
                let indicator = []
				let rateArr = classIndex === -1 ? data.stupercent.grade.map(item => (Number(item)).toFixed(2)) : data.pointList.map(pointName => data.classpercent[pointName][classIndex].toFixed(2))
				console.log(data)
				// 获取最大值 +5 设置到雷达边界最大值
				let maxNum = Math.max(...rateArr.map(i => Number(i))) + 5
                data.pointList.forEach(item => {
                    indicator.push({
                        name: item,
                        max: maxNum
                    })
                })
                this.drawLine(indicator, rateArr)
            }
        },
        mounted() {
            if (this.getKnowledgeData) {
				console.log(this)
                this.doRender(this.getKnowledgeData, this.curClassIndex)
            }
        },

        computed: {
            // 获取最新雷达图数据
            getKnowledgeData() {
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let curJson = this.echartsId === 'knowRadar' ? this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].pointKey : 
				this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].levelKey
				if(this.echartsId !== 'knowRadar'){
					let transArr = this.$GLOBAL.EXERCISE_LEVELS()
					curJson.pointList = curJson.pointList.map((i,index) => transArr[index])
					for(let key in curJson.classpercent){
						if(!isNaN(key)){
							let newKey = transArr[+key - 1]
							curJson.classpercent[newKey] = curJson.classpercent[key]
							curJson.stupercent[newKey] = curJson.stupercent[key]
						}
					}
				}
				return curJson
            },
			getCurClassIndex(){
				return this.$store.state.totalAnalysis.curClassIndex
			}
        },
		
		watch:{
			getKnowledgeData:{
				handler(n,o){
					this.doRender(this.getKnowledgeData,this.curClassIndex)
				}
			},
			classIndex(n,o){
				console.log('雷达图变化了', n - 1)
				this.curClassIndex = n - 1
				this.doRender(this.getKnowledgeData,n - 1)
			},
			immediate:true,
			deep:true
		}
    }
</script>

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

    .myRadar {
        width: 100%;
        height: 480px;
        margin: 0 auto;
        display: block;
    }
</style>
