<template>
	<view class="page" :style="{height: `${height}px`}">
		<view class="qiun-columns">
			<view class="bd-name u-line-2 text-center margin-top">{{title}}</view>
			<view class="qiun-charts">
				<!-- 	<uchar  canvasId="priceLine" :maxy="max" :opts="opts" chartType="liney"></uchar> -->
				<canvas :id="canvasId" :canvasId="canvasId" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
				 @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import uCharts from "../../components/u-charts/u-charts.min.js"
	export default {
		components: {

		},
		data() {
			return {
				title: '',
				canvasId: 'priceLine',
				max: 180,
				height:0,
				pixelRatio: 1.1,
				cWidth: 375,
				cHeight: 250,
				canvases: null,
				opts: {
					categories: [],
					series: [{
						name: "",
						data: [],
						color: '#409eff'
					}]
				}
			};
		},
		onLoad(options) {
			//this.$refs.priceLine.init();
		
			let that=this;
			wx.getSystemInfo({
			    success: function(res) {
			        that.height =  res.windowHeight;
			    }
			})
			uni.setNavigationBarTitle({
				title: "价格走势"
			})
			this.title = options.title
			this.getData(options.id||'15326',options.signid||'2:3')
		},
		methods: {
			touchStart(e) {
				this.canvases.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				this.canvases.scrollStart(e);
			},
			touchMove(e) {
				this.canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				this.canvases.scrollEnd(e);
			},
			error(e) {
				uni.showToast({
					title: e.errMsg,
					icon: 'none'
				})
			},
			getData(goods_id, sign_id) {
				let that = this;
				this.$request({
					url: this.$api.goods.PriceMove,
					data: {
						goods_id: goods_id,
						sign_id: sign_id
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {

						that.max = response.data.max;
						let categories = [];
						let seriesData = [];
						response.data.priceMove.forEach((value) => {
							let tempTime = value.created_at.split(" ")[0];
							let time = tempTime.split("-");
							categories.push(time[1] + '/' + time[2])
							seriesData.push(value.price)
						})
						that.categories = categories;
						that.series = [{
							name: "",
							data: seriesData,
							color: '#409eff'
						}]
						that.canvases = new uCharts({
							$this: that,
							canvasId: that.canvasId,
							type: 'line',
							fontSize: 7,
							legend: true,
							dataLabel: true,
							dataPointShape: true,
							background: '#FFFFFF',
							pixelRatio: that.pixelRatio,
							categories: categories,
							series: that.series,
							animation: true,
							enableScroll: true,
							xAxis: {
								type: 'line',
								gridColor: '#CCCCCC',
								gridType: 'line',
								dashLength: 8,
								itemCount: that.categories.length,
								scrollShow: true
							},
							yAxis: {
								gridType: 'line',
								gridColor: '#CCCCCC',
								dashLength: 8,
								splitNumber: 6,
								min: 10,
								max: that.max,
								format: (val) => {
									return '￥' + val.toFixed(0)
								}
							},
							width: that.cWidth,
							height: that.cHeight,
							extra: {
								line: {
									type: 'straight'
								}
							}
						});

					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #FFFFFF;
		background: #FFFFFF;
	}

	.qiun-charts {
		width: 800upx;
		height: 600upx;
		background-color: #FFFFFF;
		margin-top:250upx;
	}

	.charts {
		width: 800upx;
		height: 600upx;
		background-color: #FFFFFF;
	}
</style>
