<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
		}
	},
	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: 16,
							fontFamily: "Microsoft JhengHei",
							fontWeight: "600",
							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: true,
						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
		}
	},
	created () {
		if (this.xAxisData) { 
			this.$set(this.comObjOption.xAxis, "type", "category");
			this.$set(this.comObjOption.xAxis, "data", this.xAxisData);
		}
		this.comUpdateOption(this.barData);
	},
	mounted () {
		this.comFnDrawing();
		this.comIntRefreshRate = this.refreshRate;
	},
	computed: {
		barRefName () {
			return "bar_" + this.chartName;
		}
	},
	watch: {
		"comIntRefreshRate": {
			handler (nv, ov) {
				if (nv == 0) {
					clearTimeout(this.comObjTimer);
				} else if (nv > 0) {
					this.comFnInfiniteDrawing();
				}
			}
		},
		"xAxisData": {
			handler (nv, ov) {
				this.$set(this.comObjOption.xAxis, "type", "category");
				this.$set(this.comObjOption.xAxis, "data", this.xAxisData);
			}
		},
		"barData": {
			handler (nv, ov) {
				this.comUpdateOption(nv);
			}
		}
	},
	methods: {
		comUpdateOption (nv, index) {
			var self = this;
			if (Object.keys(nv).length > 0) {
				obj = nv[Object.keys(nv)[0]];
				this.comIntRefreshRate = 0;
				this.comObjOption.legend.data = obj.Desc;
				this.comObjOption.color = obj.Icon;
				this.comObjOption.yAxis = [{
					type: "value",
					name: obj.Unit,
					nameTextStyle: {
						fontWeight: "600",
						fontSize: 20
					},
					axisLabel: {
						fontWeight: "600",
						fontSize: 16
					}
				}];
				
				this.comObjOption.series = [];
				obj.Soft.forEach(function(pt, pi){
					self.comObjOption.series.push({
						name: obj.Desc[pi],
						type: obj.Type,
						yAxisIndex: 0,
						itemStyle: {
							shadowColor: "rgba(20%, 20%, 40%, 0.4)",
							shadowBlur: 4,
							shadowOffsetX: 2,
							shadowOffsetY: 0
						}
					});
				});

				this.comFnUnitSetting(obj.Unit, 0);
				this.comIntRefreshRate = this.refreshRate;
			}
		},
		comFnUnitSetting (unit, index) {
			switch (unit) {
				case "%":
					Object.assign(this.comObjOption.yAxis[index], {
						max: 100,
						min: 0,
						interval: 20
					});
					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 datas = [];
			if (Object.keys(self.barData).length > 0) {
				Object.keys(self.barData).forEach(function(key, seq){
					self.barData[key].Soft.forEach(function(_soft, _index){
						if (!seq) {
							datas.push([]);
						}
						datas[_index].push(Number(self.softValues[_soft].value));
					});
				});
				datas.forEach(function(_data, _index){
					self.$set(self.comObjOption.series[_index], "data", _data);
				});
			}
		}
	}
}
</script>