<style lang='scss' scoped>
	.canvas-leakage{
		width: 100%;
	}
</style>
<template>
	<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
		<template v-if="has_data">
			<canvas :canvas-id="canvasId" :style="{height: height+'rpx'}" class="canvas-leakage" disable-scroll="true" 
			@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
		</template>
		<template v-else>
			<u-empty text="数据为空" mode="data"></u-empty>
		</template>
	</view>
</template>
<script>
	let _self;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		data() {
			return {
				canvaLineA:null,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				has_data: false
			}
		},
		props:{
			// 曲线curve，直线straight
			extraLineType:{
				type:String,
				default:"straight"
			},
			yAxisTitle:{
				type:String,
				default:""
			},
			canvasId:{
				type:String,
				default:"canvasLine"
			},
			width:{
				type:[String,Number],
				default:750
			},
			height:{
				type:[String,Number],
				default:550
			},
			// 数据
			chartData:{
				type:[Object],
				default:null
			},
			reshowStatus:{
				type:Boolean,
				default() {
					return false
				}
			}
		},
		watch:{
			chartData(newVal){
				if(Object.keys(newVal).length > 0){
					if(this.canvaLineA){
						this.canvaLineA.updateData(newVal);
					} else {
						this.showLineA(this.canvasId,this.chartData);
					}
					
				}
				this.has_data = Object.keys(newVal).length > 0 ? true : false;
			},
			reshowStatus(val){
				console.log("this.chartData",this.chartData)
				if(Object.keys(this.chartData).length > 0){
					this.has_data = true;
					this.showLineA(this.canvasId,this.chartData);
				} else {
					this.has_data = false;
				}
			}
			
		},
		created() {
			_self = this;			
			this.cWidth=uni.upx2px(this.width);
			this.cHeight=uni.upx2px(this.height);
		},
		mounted() {
			if(Object.keys(this.chartData).length > 0){
				this.has_data = true;
				this.showLineA(this.canvasId,this.chartData);
			} else {
				this.has_data = false;
			}
		},
		methods: {
			toJSON(){},
			showLineA(canvasId,chartData){
				// console.log("render");
				this.canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					reshow:_self.reshowStatus,
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						// showTitle:!!_self.yAxisTitle?true:false,
						// title:!!_self.yAxisTitle?_self.yAxisTitle:"",
						// //disabled:true
						gridType:'dash',
						// splitNumber:8,
						// min:10,
						// max:180,
						format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: _self.extraLineType
						}
					},
				});
				this.canvaLineA.addEventListener('renderComplete', () => {
					this.$emit("onRenderComplete",true)
				});
				
			},
			touchLineA(e){
				this.canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				this.canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				this.canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.canvaLineA.touchLegend(e);
				this.canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>
