<style lang='scss' scoped>
	.warningTrend-content {
		padding: 40rpx 25rpx;
	
		.canvas-warningTrend {
			width: 100%;
			height: 300rpx;
		}
		&.hide{
				position: absolute;
				left: -999rpx;
				min-height: 300rpx;
		}
	}
</style>
<template>
	<view class="alarmTrend">
		<view class="warningTrend-content" :class="hide?'hide':''" v-if="trendData">
			<!-- disable-scroll=true  @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" -->
			<canvas canvas-id="warningTrendId" class="canvas-warningTrend" disable-scroll=true  
			@touchstart.stop="touchLineA" @touchmove.stop="moveLineA" @touchend.stop="touchEndLineA"></canvas>
		</view>
		<view v-else>
			<view class="pt30"></view>
			<u-empty class="" text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
	
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	let _self;
	export default {
		data() {
			return {
				showCurveA:null,
				warningTrendWidth: "",
				warningTrendHeight: "",
				pixelRatio:1,
				// trendData:{
				// 	alarm: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				// 	name: ["12-14", "12-13", "12-12", "12-11", "12-10", "12-09", "12-08", "12-07", "12-06", "12-05", 
				// 	"12-04","12-03","12-02","12-01","11-30","11-29","11-28","11-27","11-26","11-25","11-24","11-23",
				// 	"11-22","11-21","11-20","11-19","11-18","11-17","11-16","11-15"],
				// 	warning: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
				// }
			}
		},
		props:{
			trendData:{
				type:Object,
				default:null
			},
			hide:{
				type:Boolean,
				default:false
			},
		},
		watch:{
			trendData(newVal){
				console.log(newVal,"newVal");
				this.getCurveDataFn();
			}
		},
		created() {
			_self=this;
			this.warningTrendWidth = uni.upx2px(622);
			this.warningTrendHeight = uni.upx2px(300);
			this.getCurveDataFn();
		},
		methods: {
			toJSON(){},
			getCurveDataFn(){
				if (this.trendData) {
					let LineA = {
						categories: this.trendData.name,
						series: [{
							name: "报警",
							data: this.trendData.alarm || new Array(this.trendData.name.length).fill(0)
						}, { 
							name: "预警",
							data: this.trendData.warning || new Array(this.trendData.name.length).fill(0)
						}]
					};
					this.showCurve("warningTrendId", LineA);
				}
			},
			// 曲线图
			showCurve(canvasId, chartData) {
				
				this.showCurveA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 20, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.warningTrendWidth * _self.pixelRatio,
					height: _self.warningTrendHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			touchLineA(e) {
				this.showCurveA.scrollStart(e);
			},
			moveLineA(e) {
				this.showCurveA.scroll(e);
			},
			touchEndLineA(e) {
				this.showCurveA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.showCurveA.touchLegend(e);
				this.showCurveA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>
