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

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

			drawLine(data) {
				let that = this
				// 基于准备好的dom，初始化echarts实例
				let myBar = this.$echarts.init(document.getElementById(this.barId), 'chalk')
				var color = ['#12a568', '#12a568', '#17d988']
				let option = {
					// backgroundColor: 'rgba(255,255,255,0.05)',
					title: {
						text: (((this.total - this.noAnswerdCount) / this.total) * 100).toFixed(2)+ '%',
						textStyle: {
							color: color[2],
							fontSize: 20
						},
						itemGap: 20,
						left: 'center',
						top: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							return `${ that.$t('survey.questionaire.progress') }:${ (((that.total - that.noAnswerdCount) / that.total) * 100).toFixed(2) }%`
						}
					},
					angleAxis: {
						max: 100,
						clockwise: false, // 逆时针
						// 隐藏刻度线
						show: false,
						boundaryGap: ['40%', '40%'],
						startAngle: 90,
					},
					radiusAxis: {
						type: 'category',
						show: true,
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,

						},
						axisTick: {
							show: false
						},
					},
					polar: [{
						center: ['50%', '50%'], //中心点位置
						radius: '80%' //图形大小
					}],
					series: [{
							name: '小环',
							type: 'gauge',
							splitNumber: 0,
							radius: '32%', //中间装饰环
							center: ['50%', '50%'],
							startAngle: 0,
							endAngle: 359.9999,
							axisLine: {
								show: false
							},
							axisTick: {
								show: true,
								lineStyle: {
									color: "#0BF4E4",
									width: 2,
									shadowBlur: 1,
									shadowColor: color[1],
								},
								length: 20,
								splitNumber: 2
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: true,
								offsetCenter: ['0%', '-230%'],
								color: '#f3f3f3',
								formatter: function(params) {
									return that.$t('survey.questionaire.progress')
								},
								textStyle: {
									fontSize: 14,
									fontWeight:'bold'
								}
							}
						}, {
							type: 'bar',
							z: 10,
							data: [((this.total - this.noAnswerdCount) / this.total).toFixed(2) * 100 ],
							showBackground: false,
							backgroundStyle: {
								color: "blue",
								borderWidth: 5,
								width: 10
							},
							coordinateSystem: 'polar',
							roundCap: true,
							barWidth: 18, //大的占比环
							itemStyle: {
								normal: {
									opacity: 1,
									color: new that.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
										offset: 0,
										color: '#13d67d'
									}, {
										offset: 1,
										color: '#8ddcac'
									}])
								}
							},
						},
						{
							type: 'pie',
							name: '内层细圆环',
							radius: ['50%', '30%'],
							// radius: '50%',
							startAngle: 90,
							hoverAnimation: false,
							clockWise: false,
							itemStyle: {
								normal: {
									color: new that.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
										offset: 0,
										color: 'rgba(151,179,166,0.74)'
									}, {
										offset: 1,
										color: 'rgba(151,179,166,0.74)'
									}]),
									shadowBlur: 5,
									shadowColor: '#66666a',
								}
							},
							tooltip: {
								show: false,
							},
							label: {
								show: false
							},
							data: [100],
							
						}
					]
				};

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

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


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