<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',
						bottom: 25,
						textStyle: {
							fontWeight: 'bold',
							fontFamily: "'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif",
							color: '#878787',
							fontSize: '14'
						}
					},

					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%', '40%'],
						color: ['#eeeeee', '#1fb06d'], //'#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: {
								formatter: ['{c|{c}}' + that.$t('unit.text7'), '{b|{b}}'].join('\n'),
								rich: {
									c: {
										color: 'rgb(29, 188, 212)',
										fontSize: 12,
										fontWeight: 'bold',
										lineHeight: 2
									},
									b: {
										color: 'rgb(26, 109, 112)',
										fontSize: 12,
										height: 40
									},
								},
								textStyle: {
									color: 'rgb(29, 188, 212)',
									fontSize: '12'
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: 'rgb(47, 65, 81)',
								},
								smooth: 0.2,
								length: 10,
								length2: 20,

							}
						},
						itemStyle: {
							normal: {
								shadowColor: 'rgba(0, 0, 0, 0.8)',
								shadowBlur: 10,
							}
						}
					}]
				};

				// 绘制图表
				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) {
						console.log(val);
						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>
