<template>
	<view class="page">
		<u-navbar is-back="false" title="历史走势" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' :title-bold='true' height='45' id="navbar">
		</u-navbar>
	   
	   
	    <view class="echarts_box">
	    	<view class="echarts_top">
	    		<view class="top_left">
	    			重量
	    			<image style="width: 28rpx;height: 33rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD" mode=""></image>
	    		</view>
	    		<view class="top_cont">
	    			最近30日
	    		</view>
	    		<view class="top_right">
	    			<view style="width: 1rpx;">
	    
	    			</view>
	    			<view class="txt">
	    				<!-- 历史走势<view class="iconfont icon-xiangyou1"></view> -->
	    			</view>
	    
	    		</view>
	    	</view>
	    	<view class="echarts">
	    		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas3" canvas-id="uni-ec-canvas"
	    			:ec="ec">
	    		</uni-ec-canvas>
	    	</view>
	    </view>
	    <view class="echarts_box">
	    	<view class="echarts_top">
	    		<view class="top_left">
	    			进出量
	    			<image style="width: 33rpx;height: 33rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy" mode=""></image>
	    		</view>
	    		<view class="top_cont">
	    			最近30日
	    		</view>
	    		<view class="top_right">
	    			<view style="width: 1rpx;">
	    
	    			</view>
	    			<view class="txt">
	    				<!-- 历史走势<view class="iconfont icon-xiangyou1"></view> -->
	    			</view>
	    
	    		</view>
	    	</view>
	    	<view class="echarts">
	    		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas4" canvas-id="uni-ec-canvas"
	    			:ec="ec">
	    		</uni-ec-canvas>
	    	</view>
	    </view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				ec: {
					lazyLoad: true
				},
                chartday: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                chartData: [120, 200, 150, 80, 70, 110, 130],
				chartData1: [],
				chartData2: [],
				chartData3: [],
				chartData4: [],
				chartData5: [],
				chartData6: [],
				chartData7: [],
				chartData8: [],
				yeartime: {
					year: '',
					month: '',
					day: ''
				},
				yeartimes: {
					year: '',
					month: '',
					day: ''
				},
				num:'',
				beehiveId:'',
				modelTags:[],
				
				height:false,
				io:false,
				xnwd:false,
				xnsd:false,
				sypl:false,
				eyht:false,
			}
		},
		onLoad(option) {
			this.beehiveId = option.beehiveId
		},
		onShow() {
            setTimeout(() => {
					this.$refs.canvas3.init(this.initChart3)
					this.$refs.canvas4.init(this.initChart4)
            }, 1000)
            let now = new Date();
            let previousDay = new Date(now)
            this.yeartime.year = now.getFullYear()
            this.yeartime.month = String(previousDay.getMonth() + 1).padStart(2, '0')
            this.yeartime.day = String(now.getDate()).padStart(2, '0')
            
            
            previousDay.setDate(now.getDate() - 30)
            this.yeartimes.year = previousDay.getFullYear()
            this.yeartimes.month = String(previousDay.getMonth() + 1).padStart(2, '0')
            this.yeartimes.day = String(previousDay.getDate()).padStart(2, '0')
			
			this.getchartData3()
			this.getchartData4()
			
		},
		methods: {
			
			// 重量图表
			getchartData3() {
				let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
				let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
				this.$u.get(`/farmer/report/weightDay?dateRange=${times},${time}&apiaryId=${this.beehiveId}`).then(
				res => {
					if (res.code == 200) {
						this.chartData3 = res.data.map(item => item.value)
					}
				})
			},
			// 进出量图表
			getchartData4() {
				let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
				let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
				this.$u.get(`/farmer/report/ioCount?dateRange=${times},${time}&apiaryId=${this.beehiveId}`).then(res => {
					if (res.code == 200) {
						this.chartData4 = res.data.map(item => item.value)
					}
				})
			},

			//重量图表
			initChart3(canvas, width, height, canvasDpr) {
				let that = this
			
				const option = {
					grid: {
						left: '4%',
						right: '4%',
						bottom: '3%',
						top: '4%',
						containLabel: true
					},
					xAxis: {
						show: true,
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false // 隐藏X轴线
						},
						axisTick: {
							show: false // 隐藏X轴刻度
						},
						axisLabel: {
							show: false // 隐藏X轴标签
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						// data: that.chartday,
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return (value / 1000).toFixed(1) + 'Kg'
							},
						},
						splitLine: {
							show: true, // 显示X轴网格线
							lineStyle: {
								type: 'dashed', // 设置网格线为虚线
								color: '#ccc', // 可以设置虚线的颜色
								width: 1 // 可以设置虚线的宽度
							}
						}
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 0,
						seriesIndex: 0,
						pieces: [{
								gt: 1,
								lt: 3,
								color: 'RGBA(255, 241, 201, 1)',
							},
							{
								gt: 5,
								lt: 7,
								color: 'RGBA(255, 241, 201, 1)',
							},
						],
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#FFE28C',
							width: 1,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#FFF1C9'
								}, ]),
							},
						},
						data: that.chartData3,
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
			
				option.series[0].data = that.chartData3
				canvas.setChart(chart)
				chart.setOption(option)
				return chart
			},
			// 进出量图表
			initChart4(canvas, width, height, canvasDpr) {
				let that = this
			
				const option = {
					grid: {
						left: '4%',
						right: '4%',
						bottom: '3%',
						top: '4%',
						containLabel: true
					},
					xAxis: {
						show: true,
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false // 隐藏X轴线
						},
						axisTick: {
							show: false // 隐藏X轴刻度
						},
						axisLabel: {
							show: false // 隐藏X轴标签
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						// data: that.chartday,
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return Math.ceil(value) + '只'
							},
						},
						splitLine: {
							show: true, // 显示X轴网格线
							lineStyle: {
								type: 'dashed', // 设置网格线为虚线
								color: '#ccc', // 可以设置虚线的颜色
								width: 1 // 可以设置虚线的宽度
							}
						}
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 0,
						seriesIndex: 0,
						pieces: [{
								gt: 1,
								lt: 3,
								color: 'RGBA(255, 241, 201, 1)',
							},
							{
								gt: 5,
								lt: 7,
								color: 'RGBA(255, 241, 201, 1)',
							},
						],
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#FFE28C',
							width: 1,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#FFF1C9'
								}, ]),
							},
						},
						data: that.chartData4,
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
			
				option.series[0].data = that.chartData4
				canvas.setChart(chart)
				chart.setOption(option)
				return chart
			},
		
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFDFD;
	}     
    .input-placeholder{
		color: red;
	}
	.page {
		// position: relative;
		width: 750rpx;
		// padding-bottom: 200rpx;
		padding: 38rpx;
		box-sizing: border-box;
        .echarts_box {
        	margin-top: 26rpx;
        	padding: 18rpx 36rpx;
        	width: 674rpx;
        
        	background: #FFFFFF;
        	box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
        	border-radius: 28rpx 28rpx 28rpx 28rpx;
        
        	.echarts {
        
        		margin-top: 24rpx;
        		// width: 100%;
        		// height: 80%;
        		width: 100%;
        		height: 330rpx;
        	}
        
        	.echarts_top {
        		display: flex;
        		align-items: center;
        
        		// justify-content: space-between;
        		.top_left {
        			width: 38.33%;
        			display: flex;
        			align-items: center;
        			font-weight: 500;
        			font-size: 36rpx;
        			color: #3D3D3D;
                    padding-left: 24rpx;
        			image {
        				margin-left: 10rpx;
        				width: 25.03rpx;
        				height: 34rpx;
        			}
        		}
        
        		.top_cont {
        			width: 33.33%;
        			text-align: center;
        			font-weight: 600;
        			font-size: 36rpx;
        			color: #3D3D3D;
        		}
        
        		.top_right {
        			width: 33.33%;
        			display: flex;
        			align-items: center;
        
        			.txt {
        				display: flex;
        				align-items: center;
        				flex-wrap: nowrap;
        				margin-left: auto;
        				font-weight: 400;
        				font-size: 32rpx;
        				color: #4D4D4D;
        
        				.icon-xiangyou1 {
        					margin-top: 4rpx;
        					margin-left: 8rpx;
        				}
        			}
        		}
        	}
        }

	}
</style>