<style lang='scss' scoped>
	.canvas{
		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',width:width+'rpx'}" class="canvas" :disable-scroll="true" 
			@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></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 {
				canvaColumn:null,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				has_data: false,
			}
		},
		props:{
			canvasId:{
				type:String,
				default:"canvasColumn"
			},
			width:{
				type:[String,Number],
				default:750
			},
			height:{
				type:[String,Number],
				default:550
			},
			chartData:{
				type:[Object],
				default() {
					return {}
				}
			},
			reshowStatus:{
				type:Boolean,
				default() {
					return false
				}
			}
		},
		watch:{
			chartData(newVal){
				if(Object.keys(newVal).length > 0){
					if(this.canvaColumn){
						this.canvaColumn.updateData(newVal);
					} else {
						this.showColumn(this.canvasId,this.chartData);
					}
					
				}
				this.has_data = Object.keys(newVal).length > 0 ? true : false;
			},
			reshowStatus(val){
				if(Object.keys(this.chartData).length > 0){
					this.has_data = true;
					this.showColumn(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.showColumn(this.canvasId,this.chartData);
			} else {
				this.has_data = false;
			}
		},
		methods: {
			toJSON(){},
			showColumn(canvasId,chartData){
				// console.log(canvasId,"canvasIdcanvasIdcanvasId");
				// console.log(chartData,"chartData");
				this.canvaColumn = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					fontSize:11,
					padding:[5,15,15,15],
					legend:{
						show:true,
						position:'top',
						float:'center',
						itemGap:30,
						padding:5,
						margin:5,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth :1
					},
					dataLabel:true,
					dataPointShape:true,
					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: {
						//disabled:true
						gridType:'dash',
						// splitNumber:4,
						// min:10,
						// max:180,
						format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
							width:20
						}
					},
				});
				// 监听图表渲染完成
				this.canvaColumn.addEventListener('renderComplete', () => {
				    // your code here
						_self.$emit("onRenderFinsh","ok");
						console.log("onRenderFinsh","onRenderFinsh");
				});
			},
			touchColumn(e){
				if(!this.canvaColumn) return;
				this.canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				if(!this.canvaColumn) return;
				this.canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				if(!this.canvaColumn) return;
				this.canvaColumn.scrollEnd(e);
				this.canvaColumn.touchLegend(e, {
					animation:true,
				});
				this.canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>
