<template>
	<view>
		<view>
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchstart"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas :canvas-id="canvasId" :id="canvasId" class="charts" @touchend="touchend" disable-scroll=true @touchmove="touchmove"  @touchstart="touchstartChange"></canvas>
			<!--#endif-->
		</view>
	</view>
</template>

<script>
	import uCharts from './lib/u-charts.js'
	import lineJson from './json/line.json'
	import {
		isJSON
	} from './lib/checker.js'
	var _self
	export default {
		props: {
			type: {
				default: 'line'
			},
			dataModel: {}
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				canvasId: '',
				canvaColumn: null
			}
		},
		created() {
			_self = this
			let randomNum = new Date().getTime().toString().substring(6, 13)
			this.canvasId = 'canvas' + randomNum
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.init()
		},
		methods: {
			init() {
				lineJson.width = this.cWidth * this.pixelRatio
				lineJson.height = this.cHeight * this.pixelRatio
				lineJson.categories = this.dataModel.categories
				lineJson.series = this.dataModel.series
				lineJson.type = this.type
				lineJson.extra.column.width = this.cWidth * this.pixelRatio * 0.45 / lineJson.categories.length
				this.showColumn(this.canvasId, lineJson)
			},
			showColumn(canvasId, chartData) {
				this.canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					...chartData
				})

			},
			touchstartChange(e){
				this.canvaColumn.scrollStart(e)
			},
			touchmove(e) {
				this.canvaColumn.scroll(e)
			},
			touchend(e) {
				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>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}
</style>
