<template>
	<div class="bar-block" style="width: 100%; height: 100%;">
		<echart :ref="barRefName" autoresize="true" :options="comObjOption" style="width: 100%; height: 100%;"></echart>
	</div>
</template>

<script>
module.exports = {
	components: { 
		"echart" : VueECharts,
	},
	props: {
		"chartName": {
			required: true
		},
		"barData": {
			required: true
		},
		"refreshRate": {
			default: 0,
			type: Number,
			required: true
		},
		"softValues": {
			default: {},
			required: true
		},
		"xAxisData" : {
			required: true
		},
		"lineData": {
			default: {}
		}
	},
	data: () => {
		return {
			comObjOption : {
				animation: false,
				calculable: true,
				grid: {
					left: 64,
					right: 64,
					top: 64,
					bottom: 48
				},
				color: ["#123456"],
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							fontSize: 20,
							backgroundColor: "#123456"
						}
					}
				},
				dataZoom: {
					show: false,
					start: 0,
					end: 100
				},
				legend: {
					data:["預設"],
					top: 10,
					textStyle: {
						fontSize: 20,
						fontFamily: "Microsoft JhengHei",
						fontWeight: "600",
						padding: [0, 12, 0, 2]
					},
					icon: "roundRect"
				},
				xAxis: [{
					boundaryGap: true,
					axisLabel: {
						fontWeight: "600",
						fontSize: 12
					},
					splitArea: {
						show: false,
						areaStyle: {
							color: ["#eaeaea", "#fff"]
						}
					},
					z: -1
				}],
				yAxis: [{
					type: "value",
					name: "預設",
					splitNumber: 4,
					nameTextStyle: {
						fontWeight: "600",
						fontSize: 20
					},
					axisLabel: {
						fontWeight: "600",
						fontSize: 16
					}
				}],
				series: [{
					name: "預設",
					type: "bar",
					yAxisIndex: 0,
					data: [0]
				}]
			},
			comIntRefreshRate: 0,
			comObjTimer: null
		}
	},
	mounted () {
		if (this.xAxisData) { 
			this.$set(this.comObjOption.xAxis[0], "type", "category");
			this.$set(this.comObjOption.xAxis[0], "data", this.xAxisData);
		}
		this.comUpdateOption(this.barData, 0);
		this.comUpdateOption(this.lineData, 1);
		this.comIntRefreshRate = this.refreshRate;
		this.comFnDrawing();
	},
	computed: {
		barRefName () {
			return "bar_" + this.chartName;
		}
	},
	watch: {
		"comIntRefreshRate": {
			handler (nv, ov) {
				if (nv == 0) {
					clearTimeout(this.comObjTimer);
				} else if (nv > 0) {
					this.comFnInfiniteDrawing();
				}
			}
		}
	},
	methods: {
		comUpdateOption (nv, index) {
			if (Object.keys(nv).length) {
				var obj = nv[Object.keys(nv)[0]];
				this.$set(this.comObjOption.legend.data, index, obj.Desc[0]);
				this.$set(this.comObjOption.color, index, obj.Icon[0]);
				
				var _yAxis = {
					type: "value",
					name: obj.Desc[0],
					position: (index ? "right" : "left"),
					splitNumber: 4,
					splitLine: {
						show: (index ? false : true),
					},
					nameTextStyle: {
						fontWeight: "600",
						fontSize: 20,
					},
					axisLabel: {
						fontWeight: "600",
						fontSize: 16,
					}
				};
				this.$set(this.comObjOption.yAxis, index, _yAxis);
				
				var _series = {
					name: obj.Desc[0],
					type: obj.Type,
					xAxisIndex: 0,
					yAxisIndex: index,
					symbol: "circle",
					symbolSize: 8,
					itemStyle: {
						shadowColor: "rgba(20%, 20%, 40%, 0.4)",
						shadowBlur: 4,
						shadowOffsetX: 2,
						shadowOffsetY: 0
					},
					lineStyle: {
						width: 5,
						shadowColor: "rgba(20%, 20%, 40%, 0.4)",
						shadowBlur: 4,
						shadowOffsetX: 1,
						shadowOffsetY: 1
					},
					data: (Object.keys(nv)).fill(0)
				};
				if (!index) {
					_series["barWidth"] = "48%";
				}
				this.$set(this.comObjOption.series, index, _series);
				this.comFnUnitSetting(obj.Unit, index);
			}
		},
		comFnUnitSetting (unit, index) {
			switch (unit) {
				case "%":
					Object.assign(this.comObjOption.yAxis[index], {
						max: 100,
						min: 0,
						interval: 25
					});
					break;
				case "Hr":
				case "hr":
					Object.assign(this.comObjOption.yAxis[index], {
						max: 24,
						min: 0,
						interval: 6
					});
					break;
			}
		},
		comFnInfiniteDrawing () {
			var self = this;
			self.comObjTimer = setTimeout(function(){
				self.comFnDrawing();
				self.comFnInfiniteDrawing();
			}, self.refreshRate * 1000);
		},
		comFnDrawing () {
			var self = this;
			var bar_data = [];
			Object.keys(self.barData).forEach(function(k){
				bar_data.push(Number(self.softValues[self.barData[k].Soft[0]].value));
			});
			self.$set(self.comObjOption.series[0], "data", bar_data);
			if (Object.keys(self.lineData).length) {
				var line_data = [];
				Object.keys(self.lineData).forEach(function(k){
					line_data.push(Number(self.softValues[self.lineData[k].Soft[0]].value));
				});
				self.$set(self.comObjOption.series[1], "data", line_data);
			}
			console.log(self.comObjOption);
		}
	}
}
</script>