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

<script>
	export default {
		name: 'BaseBar',
		props: {
			barId: {
				type: String,
				default: ''
			},
			total: {
				type: Number,
				default: NaN
			},
			noAnswerdCount: {
				type: Number,
				default: NaN
			},
		},
		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: '#6c6c6c',
							fontSize: 14,
							fontWeight: 'bold'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{b} : {c} ({d}%)"
					},
					series: [{
						type: 'pie',
						radius: '50%',
						center: ['50%', '50%'],
						color: ['#eeeeee', '#1fb06d'],
						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 b.value - a.value
						}),
						label: {
							normal: {
								formatter: ['{c|{c}}' + that.$t('unit.text7'), '{b|{b}}'].join(' '),
								rich: {
									c: {
										color: '#1fb06d',
										fontSize: 12,
										fontWeight: 'bold',
										lineHeight: 2
									},
									b: {
										color: 'rgb(26, 109, 112)',
										fontSize: 12,
										height: 40
									},
								},
								textStyle: {
									color: '#1fb06d',
									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,
							}
						}
					}]
				};

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

				window.addEventListener('resize', function() {
					myBar.resize()
				})
			}
		},
		mounted() {
			if (!this.total) return
			this.drawLine()


		},
		watch: {
			noAnswerdCount: {
				handler(val) {
					console.log('ssss', val)
					this.$nextTick(() => {
						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>
