<template>
	<view class="bg-wh" style="background-color: #FFFFFF;">
		<view class="bd-name u-line-2 text-center margin-top">{{title}}</view>
		<view class="qiun-columns">
				<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'}"></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,
				pixelRatio:1,
				cWidth:375,
				cHeight:250,
				canvases:null,
				opts:{
					categories:[],
					series:[{
							name:"价格曲线",
							data:[],
							color:'#409eff'
						}]
				}
			};
		},
		onLoad(options){
			 //this.$refs.priceLine.init();
			 uni.setNavigationBarTitle({
			 	title:"价格走势"
			 })
			 this.title=options.title
			 this.getData(options.id,options.signid)
		},
		methods:{
			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: 11,
						legend: true,
						dataLabel: true,
						dataPointShape: true,
						background: '#FFFFFF',
						pixelRatio: 1,
						categories: that.categories,
						series: that.series,
						animation: true,
						enableScroll: true,
						xAxis: {
							type: 'grid',
							gridColor: '#CCCCCC',
							gridType: 'dash',
							dashLength: 8,
							itemCount: that.categories.length,
							scrollShow: true
						},
						yAxis: {
							gridType: 'dash',
							gridColor: '#CCCCCC',
							dashLength: 8,
							splitNumber: 6,
							min: 10,
							max: that.max,
							format: (val) => {
								return '￥'+val.toFixed(0) 
							}
						},
						width: 375,
						height: 250 ,
						extra: {
							line: {
								type: 'straight'
							}
						}
					});
					  
				    } else {
				        uni.showToast({
				            title: response.msg,
				            icon: 'none'
				        });
				    }
				}).catch(() => {
				    this.$hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
		bottom:100upx;
		position: absolute;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
