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

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

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

				// 指定图表的配置项和数据
				var option = {
					legend: {
						y: 'bottom',
						textStyle: {
							color: '#c3cad9'
						},
					},
					title: {
						text: that.$t('vote.optionPieTitle'),
						left: 'center',
						top: 20,
						textStyle: {
							color: 'White',
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
					},

					visualMap: {
						show: false,
						min: 500,
						max: 600,
						inRange: {
							//colorLightness: [0, 1]
						}
					},
					series: [{
						type: 'pie',
						radius: '50%',
						selectedMode: 'single',
						selectedOffset: 10,
						clockwise: true,
						center: ['50%', '50%'],
						color: ['#567c94', '#11d8ff', '#FCC708', '#03B48E'], //'#FBFE27','rgb(11,228,96)','#FE5050'
						data: [{
							name: that.$t('vote.noVote'),
							value: this.noChooseNum
						}, {
							name: that.$t('vote.alreadyVote'),
							value: this.chooseNum
						}],

						label: {
							normal: {
								rich: {
									b: {
										color: '#d9efff',
										fontSize: 15,
										height: 40
									},
									c: {
										color: '#fff',
										fontSize: 14,
										fontWeight: 'bold',
										lineHeight: 5
									},
								},
							}
						},
						itemStyle: {
							borderWidth: '5',
						},
						labelLine: {
							normal: {
								backgroundColor: 'yellow',
								borderColor: 'skyblue',
								borderWidth: 10,
								lineStyle: {
									borderColor: 'skyblue',
									borderWidth: 10,
									backgroundColor: 'yellow',
								}
							},
						}
					}]
				};

				// 绘制图表
				myPie.setOption(option)
				this.$nextTick(() => {
					myPie.resize()
				})
				window.addEventListener('resize', function() {
					myPie.resize()
				})
			}
		},
		mounted() {

			if (this.pieData.length) {
				let val = this.pieData
				this.noChooseNum = val.filter(item => item.option === null).length
				this.chooseNum = val.length - this.noChooseNum
				this.drawLine(val)
			}
		},
		computed: {
			// 获取最新知识点占比饼图数据
			getPieData() {
				return this.$store.state.totalAnalysis.knowledgeData
			}
		},
		watch: {
			pieData: {
				deep: true,
				handler(val) {
					if (val.length) {
						this.noChooseNum = val.filter(item => item.option === null).length
						this.chooseNum = val.length - this.noChooseNum
						this.drawLine(val)
					}
				}
			}
		}

	}
</script>

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