<template>
	<div class="temp-block" style="position: relative">
		<div class="temp-area" style="width: 100%; height: 100%;">
			<echart :ref="'Temp'" autoresize="true" :options="comObjOption" style="width: 100%; height: 100%;"></echart>
		</div>
		<template v-if="$slots.default"><div style="position: absolute; width: 60%; top: 0; left: 0;"><slot></slot></div></template>
	</div>
</template>

<script>
module.exports = {
	components: { 
		"echart" : VueECharts,
	},
	props: {
		"max": {
			type: Number,
			required: true,
			default: 100
		},
		"min": {
			type: Number,
			required: true,
			default: 0
		},
		"interval": {
			type: Number,
			required: true,
			default: 20
		},
		"fontPx": {
			type: Number,
			required: true,
			default: 14
		},
		"datumPx": {
			type: Number,
			required: true,
			default: 14
		},
		"backgroundColor": {
			type: String,
			required: true,
			default: "#eceff1"
		},
		"scaleColor": {
			type: String,
			required: true,
			default: "#333"
		},
		"upper": {
			type: Number,
			required: true,
			default: 75
		},
		"lower": {
			type: Number,
			required: true,
			default: 15
		},
		"descText": {
			type: String,
			default: "Temperature"
		},
		"upperText": {
			type: String,
			default: "High"
		},
		"lowerText": {
			type: String,
			default: "Low"
		},
		"normalText": {
			type: String,
			default: "Normal"
		},
		"upperColor": {
			type: String,
			default: "#c62828"
		},
		"lowerColor": {
			type: String,
			default: "#1976d2"
		},
		"normalColor": {
			type: String,
			default: "#388e3c"
		}
	},
	data: () => {
		return {
			comNowPV: -60,
			comIntRefreshRate: 0,
			comObjTimer: null
		}
	},
	computed: {
		// 總刻度長度
		comIntMax () {
			var max = parseInt(this.max);
			var min = parseInt(this.min);
			if (this.comFnIncludesZero(max, min)) {
				return max + Math.abs(min) + 15
			} else if (Math.abs(max) > Math.abs(min)) {
				return min - max + 15
			} 
			return max - min + 15
		},
		comOffset () {
			var min = parseInt(this.min);
			return min < 0 ? Math.abs(min) + 10 : min - 10
		},
		comStatusText () {
			if (this.comNowPV > this.upper) {
				return this.upperText
			} else if (this.comNowPV < this.lower) {
				return this.lowerText
			}
			return this.normalText
		},
		comGradients () {
			var gradients = []
			if (this.comNowPV > this.upper) {
				gradients.push({
					offset: 0,
					color: "#ef5350"
				}, {
					offset: 1,
					color: "#db2828"
				})
			} else if (this.comNowPV < this.lower) {
				gradients.push({
					offset: 1,
					color: "#027be3"
				})
			} else {
				gradients.push({
					offset: 0.5,
					color: "#9ccc65"
				}, {
					offset: 1,
					color: "#21ba45"
				})
			}
			return gradients
		},
		comArrScales () {
			var arr = [];
			for(var i = 0; i <= this.comIntMax; i++) {
				if(i < 10 || i > (this.comIntMax - 5)) {
					arr.push("")
				} else {
					if((i - 10) % this.interval === 0) {
						arr.push("-3")
					} else if((i - 10) % 4 === 0) {
						arr.push("")
					} else {
						arr.push("")
					}
				}
			}
			return arr;
		},
		comObjOption () {
			var self = this;
			return {
				animation: false,
				calculable: true,
				grid: {
					left: "85%",
					right: 0,
					top: "20%",
					bottom: "10%"
				},
				title: {
                    text: this.descText,
                    show: false
                },
                yAxis: [{
                    show: false,
                    data: [],
                    min: 0,
                    max: this.comIntMax,
                    axisLine: {
                        show: false
                    }
                }],
                xAxis: [{
					// 實際溫度
                    show: false,
                    min: -(this.datumPx * 0.5),
                    max: 100,
                    data: []
                }, {
					// 底層
                    show: false,
                    min: -(this.datumPx * 0.5),
                    max: 100,
                    data: []
                }, {
					// 外框
                    show: false,
                    min: -(this.datumPx * 0.5),
                    max: 100,
                    data: []
                }, {
					// 刻度
                    show: false,
                    min: this.datumPx * 0.75,
                    max: 100
				}],
                series: [{
                    name: "實際溫度",
                    type: "bar",
                    xAxisIndex: 0,
                    data: [{
                        value: this.comNowPV + this.comOffset,
                        label: {
                            normal: {
                                show: true,
                                position: "insideTopRight",
								width: 120,
                                formatter: "{back|" + this.comNowPV + "} {unit|°C}\n {downTxt|" + this.comStatusText + "}",
                                textStyle: {
									fontSize: (this.fontPx * 1.5),
									fontFamily: "Microsoft JhengHei",
									fontWeight: "600",
									color: "#666",
								},
								rich: {
                                    back: {
                                        fontFamily: "Microsoft JhengHei",
										fontSize: (this.fontPx * 1.5),
										fontWeight: "600",
										textAlign: "center",
										lineHeight: (this.fontPx * 1.5),
                                        color: this.comFnGradientLastColor()
                                    },
                                    downTxt: {
										fontFamily: "Microsoft JhengHei",
                                        fontSize: (this.fontPx * 1.5),
										fontWeight: "600",
										textAlign: "center",
										lineHeight: (this.fontPx * 1.5),
                                        color: this.comFnGradientLastColor()
                                    },
									unit: {
                                        fontFamily: "Microsoft JhengHei",
                                        fontSize: (this.fontPx * 1.25),
										fontWeight: "600",
										textAlign: "center",
                                        lineHeight: (this.fontPx * 1.5),
                                        color: this.comFnGradientLastColor()
                                    }
                                }
                            }
                        }
                    }],
					barWidth: this.datumPx,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.comGradients)
                        }
                    },
                    z: 2
                }, {
                    name: "間距框",
                    type: "bar",
                    xAxisIndex: 1,
                    barGap: "-100%",
                    data: [this.comIntMax - 5],
                    barWidth: (this.datumPx * 1.35),
                    itemStyle: {
                        normal: {
                            color: this.backgroundColor,
                            barBorderRadius: 50,
                        }
                    },
                    z: 1
                }, {
                    name: "外層框",
                    type: "bar",
                    xAxisIndex: 2,
                    barGap: "-100%",
                    data: [this.comIntMax - 3],
                    barWidth: (this.datumPx * 1.75),
                    itemStyle: {
                        normal: {
                            color: "#0C2E6D",
                            barBorderRadius: 50,
                        }
                    },
                    z: 0
                }, {
                    name: "實際圓",
                    type: "scatter",
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 0,
                    symbolSize: (this.datumPx * 1.6),
                    itemStyle: {
                        normal: {
                            color: this.comGradients[0].color,
                            opacity: 1,
                        }
                    },
                    z: 2
                }, {
                    name: "間距圆",
                    type: "scatter",
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 1,
                    symbolSize: (this.datumPx * 1.9),
                    itemStyle: {
                        normal: {
                            color: this.backgroundColor,
                            opacity: 1,
                        }
                    },
                    z: 1
                }, {
                    name: "外層圓",
                    type: "scatter",
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 2,
                    symbolSize: (this.datumPx * 2.3),
                    itemStyle: {
                        normal: {
                            color: "#0C2E6D",
                            opacity: 1,
                        }
                    },
                    z: 0
                }, {
                    name: "刻度",
                    type: "bar",
                    yAxisIndex: 0,
                    xAxisIndex: 3,
                    label: {
                        normal: {
                            show: true,
                            position: "left",
                            distance: (this.datumPx * 0.25),
                            color: this.scaleColor,
                            fontSize: this.datumPx,
                            formatter: function(params) {
                                if (params.dataIndex < 10 || params.dataIndex > (self.comIntMax - 5)) {
									return ""
								} else {
                                    if ((params.dataIndex - 10) % self.interval === 0) {
                                        return params.dataIndex - self.comOffset
                                    } else {
										return ""
									}
                                }
                            }
                        }
                    },
                    barGap: "-100%",
                    data: this.comArrScales,
                    barWidth: 1,
                    itemStyle: {
                        normal: {
                            color: this.scaleColor,
                        }
                    },
                    z: 0
                }]
            };
		},
		
	},
	methods: {
		comFnIncludesZero (a, b) {
			return (parseInt(a) > 0 && parseInt(b) < 0) ? true : false
		},
		comFnGradientLastColor () {
			return this.comGradients[this.comGradients.length - 1].color;
		}
	}
}
</script>