<template>
	<view class="uni-container">
		<view style="background-color: white;">
			<uni-datetime-picker v-model="dateRange" type="daterange" @change="dateRangeHander" />
			<uni-data-select v-model="query.item" :localdata="itemList" :clear="false" @input="loadData"
				style="text-align: center"></uni-data-select>
			<uni-search-bar v-model="query.name" class="uni-mt-10 margin0" radius="5" placeholder="输入设备名查询"
				 cancelButton="none" @confirm="loadData" />
		</view>
		<uni-card v-for="(item,index) in dataList" :title="item.name" :key='index' :isFull="true"
			:sub-title="'检测项：'+item.item" :extra="'检测值：'+item.data" :thumbnail="incoDic[item.item]" @click="getChartsData(item)">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="demo-uni-col">监测时间：</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col">{{item.time}}</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<view v-if="!dataList.length" style="text-align:center;margin-top:55upx;color:#999;font-weight:bolder;">未查询的传感器数据</view>
		<uni-popup ref="chartPopup" background-color="#fff">
			<view class="popup-view">
				<view class="popup-title">近12个小时监测变化曲线 </view>
				<canvas canvas-id="canvasLine" id="canvasLine" class="charts" @touchmove="moveLine"
					@touchend="moveLine"></canvas>
				<!-- <uni-datetime-picker v-model="chartDateRange" type="daterange" /> -->
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import online from '@/icon/online.png'
	import offline from '@/icon/offline.png'
	import wendu from '@/icon/wendu.png'
	import uCharts from './u-charts.js'
	import m1 from '@/icon/m1.png'
	import m2 from '@/icon/m2.png'
	import m3 from '@/icon/m3.png'
	import m4 from '@/icon/m4.png'
	import m5 from '@/icon/m5.png'
	import m6 from '@/icon/m6.png'
	import m7 from '@/icon/m7.png'
	import m8 from '@/icon/m8.png'

	var _self; //用于全局使用this
	var canvaLineIns = null
	export default {
		data() {
			return {
				iconList: [online, offline],
				incoDic: {
					'光照': m1,
					'光照2': m1,
					'雨雪': m2,
					'土壤温度': m3,
					'温度': m3,
					'温度2': m3,
					'土壤湿度': m4,
					'湿度': m4,
					'湿度2': m4,
					'风速': m5,
					'风向': m6,
					'二氧化碳': m7,
					'TSP': m8
				},
				itemList: [{
						value: '',
						text: '全项监测'
					},
					{
						value: 'TMP',
						text: '温度'
					},
					{
						value: 'HR',
						text: '湿度'
					},
					{
						value: 'TMP2',
						text: '温度2'
					},
					{
						value: 'HR2',
						text: '湿度2'
					},
					{
						value: 'ILL',
						text: '光照'
					},
					{
						value: 'ILL2',
						text: '光照2'
					},
					{
						value: 'CO2',
						text: '二氧化碳'
					},
					{
						value: 'sHR',
						text: '土壤湿度'
					},
					{
						value: 'FS',
						text: '风速'
					},
					{
						value: 'YX',
						text: '雨雪'
					},
				],
				dateRange: [this.getDate(Date.now()), this.getDate(Date.now())],
				chartDateRange: [],
				query: {
					name: '',
					item: '',
					startTime: '',
					endTime: ''
				},
				page: 0,
				pageSize: 10,
				devInfo: {
					onNum: 26,
					offNum: 13,
				},
				dataList: [],
				showpopup: true,
				cWidth: '',
				cHeight: '', //画布的宽高
			}
		},
		watch: {
		},
		onShow() {
			this.$refs.chartPopup.close()
			this.dateRange = [this.getDate(Date.now()), this.getDate(Date.now())]
			this.loadData()
		},
		onReachBottom() {
			this.pageSize += 10
			this.loadData()
		},
		methods: {
			dateRangeHander(e){
				this.dateRange = e
				this.loadData()
			},
			getDate(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${this.addZero(month)}-${this.addZero(day)}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			initCharts(item) {
				_self = this
				this.$refs.chartPopup.open('bottom')
				this.cWidth = uni.upx2px(750)
				this.cHeight = uni.upx2px(500-40)
				
				// this.chartDateRange = [
				// 	this.getDate(new Date(this.dateRange[0])), 
				// 	this.getDate(new Date(this.dateRange[1])) 
				// ]
			},
			loadData() {
				// this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				const currProInfo = JSON.parse(uni.getStorageSync('currProInfo'))
				uni.setNavigationBarTitle({
					title: `历史数据-${currProInfo.text}`
				});
				
				this.$API.call({
					url: '/api/historyData/loadHistoryDataByUserid',
					method: "GET",
					data:{
						page: this.page,
						pageSize: this.pageSize,
						proId: currProInfo.value,
						item: this.query.item,
						startTime: this.dateRange[0],
						endTime: this.dateRange[1],
						deviceName: this.query.name||''
					},
					cb: (res) => {
						this.dataList = res.data.dataList
					}
				})
			},
			getChartsData(item){
				this.initCharts()
				
				this.$API.call({
					url: '/api/historyData/historyDataTrendChart',
					method: "GET",
					data:{
						deviceId: item.deviceId,
						time: item.time
					},
					cb: (res) => {
						this.showLine("canvasLine", res.data)
					}
				})
			},
			showLine(canvasId, chartData) {
				canvaLineIns = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					// colors: ['#1e90ff'], //每一条的颜色
					fontSize: 11, //字体大小
					padding: [10, 10, 0, 10], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});	
			},
			moveLine(e) {
				canvaLineIns.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import '../../../common/uni-nvue.css';

	::v-deep .uni-icons {
		display: none;
	}

	.margin0 {
		margin: 0;
	}

	.scroll-view {
		width: 100vw;
		height: 45vh;
		overflow: hidden;
		white-space: nowrap;
	}

	.view {
		display: inline-block;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.popup-view {
		height: 540upx
	}

	.popup-title {
		width: 100%;
		font-size: 26rpx;
		margin-top: 10upx;
		text-align: center;
	}
</style>
