<template>
	<div :id="barId" class="myBar"></div>
</template>

<script>
	export default {
		name: 'BaseBar',
		props: ['barId','total', 'noAnswerdCount'],
		data() {
			return {
				barDatas: []
			}
		},
		methods: {

			drawLine(data) {
				console.log('饼图表接受',this.noAnswerdCount)
				let that = this
				// 基于准备好的dom，初始化echarts实例
				let myBar = this.$echarts.init(document.getElementById(this.barId), 'chalk')
				let option = {
					title: {
						text: that.$t('survey.questionaire.joinNum'),
						top: 25,
						left:'center',
						textStyle: {
							color: '#f3f3f3',
							fontSize:12,
							fontWeight:'bold'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
					},
					series: [{
						type: 'pie',
						radius: '50%',
						center: ['50%', '50%'],
						color: ['#08ffb5', '#879c93'],
						data: [{
								value: this.total - this.noAnswerdCount,
								name: that.$t('survey.questionaire.finished')
							},
							{
								value: this.noAnswerdCount,
								name: that.$t('survey.questionaire.unfinished')
							},
						].sort(function(a, b) {
							return a.value - b.value
						}),
						label: {
							normal: {
								formatter: ['{c|{c}}' + that.$t('unit.text7'), '{b|{b}}'].join('\n'),
								rich: {
									c: {
										color: 'rgb(246, 246, 246)',
										fontSize: 12,
										fontWeight: 'bold',
										lineHeight: 2
									},
									b: {
										color: 'rgb(43, 163, 169)',
										fontSize: 12,
										height: 40
									},
								},
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: 'rgb(98,137,169)',
								},
								smooth: 0.2,
								length: 10,
								length2: 20,

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

				// 绘制图表
				myBar.setOption(option)

				window.addEventListener('resize', function() {
					myBar.resize()
				})
			}
		},
		mounted() {
			let arr = []
			if (!this.noAnswerdCount) return
			this.drawLine()


		},
		watch: {
			noAnswerdCount: {
				handler(val) {
					this.drawLine()
				}
			}
		}

	}
</script>

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