<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce, randNum } from '@/utils'

export default {
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '27vh',
		},
		autoResize: {
			type: Boolean,
			default: true,
		},

		// 设备传感器
		gourpData: {
			type: Object,
			default: {},
		}
	},
	data() {
		return {
			chart: null,
			sidebarElm: null,
			chartData: {
				visitsData: [],
				ipData: [],
			},
			weekDays: [],
		}
	},
	mounted() {
		setTimeout(() => {
			console.log(this.gourpData)
			this.initChart()
		}, 1000 )
		
		if (this.autoResize) {
			this.__resizeHandler = debounce(() => {
				if (this.chart) {
					this.chart.resize()
				}
			}, 100)
			window.addEventListener('resize', this.__resizeHandler)
		}

		// 监听侧边栏的变化
		this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
		this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		if (this.autoResize) {
			window.removeEventListener('resize', this.__resizeHandler)
		}

		this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

		this.chart.dispose()
		this.chart = null
	},
	methods: {
		sidebarResizeHandler(e) {
			if (e.propertyName === 'width') {
				this.__resizeHandler()
			}
		},
		setOptions() {
			var labelData = ['控制器在线', '控制器离线', '设备在线', '设备离线']
			let total = [10, 10, 10, 5]
			let data_a = [this.gourpData.controller_onLine, this.gourpData.controller_offLine, this.gourpData.facility_onLine, this.gourpData.facility_offLine]
			const option = {
				title: {
					text: '设备状态预览',
					textStyle: {
						color: '#000',
						fontSize: 16,
						fontWeight: 800,
					},
					top: 10,
					left: 10,
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '0%',
					top: '18%',
					containLabel: true,
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: [
					{
						type: 'category',
						inverse: true,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},

						data: labelData,
					},
					// {
					// 	type: 'category',
					// 	inverse: true,
					// 	axisTick: 'none',
					// 	axisLine: 'none',
					// 	show: true,
					// 	axisLabel: {
					// 		textStyle: {
					// 			color: '#000',
					// 			fontSize: '12',
					// 		},
					// 		formatter: function(e) {
					// 			return e + '台'
					// 		},
					// 	},
					// 	data: total,
					// },
				],
				series: [
					{
						type: 'bar',
						zlevel: 1,
						label: {
							show: true,
							color: '#000',
							offset: [10, 0],
							formatter: function(e) {
								return `${e.value}台`
							},
							// position: 'center' //每一条的数据位置
						},

						itemStyle: {
							normal: {
								barBorderRadius: 20,
								color: function(val) {
									let dataIndex = val.dataIndex
									if (dataIndex % 2 == 0) {
										return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
											{
												offset: 0,
												color: '#0CF4FD',
											},
											{
												offset: 1,
												color: '#0954FD',
											},
										])
									} else {
									  return	new echarts.graphic.LinearGradient(0, 0, 1, 0, [
											{
												offset: 0,
												color: '#FD9909',
											},
											{
												offset: 1,
												color: '#FD3109',
											},
										])
									}
								},
							},
						},
						barWidth: 18,
						data: data_a,
					},
					// {
					// 	name: '背景',
					// 	type: 'bar',
					// 	barWidth: 18,
					// 	barGap: '-100%',
					// 	data: total,
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#095cfd33',
					// 			barBorderRadius: 30,
					// 		},
					// 	},
					// },
				],
			}

			this.chart.setOption(option)
		},
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons')
			this.setOptions(this.chartData)
		},
	},
}
</script>
