<template>
	<view class="historyData">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="historyData-top">
			<u-form :label-style="{ 'font-size': '0rpx' }">
				<u-form-item @click="openCalendar">
					<u-input v-model="timeData.selectTime" disabled disabledColor="#fff" placeholder="请选择日期" border="none">
						<template slot="prefix">
							<image class="icon" src="../../../static/can-der.png"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item @click="openTimeGap">
					<u-input v-model="timeData.getTimeGap" disabled disabledColor="#fff" placeholder="请选择时间区间" border="none">
						<template slot="prefix">
							<image class="icon" src="../../../static/time.png"></image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item @click="openType"><u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" /></u-form-item>
			</u-form>
			<!-- <qiun-data-charts type="tarea" :chartData="chartData" canvas2d /> -->
		</view>
		<view class="historyData-bottom">
			<view class="table">
				<view class="tr bg-w">
					<view class="th">变量值</view>
					<view class="th">更新时间</view>
				</view>
				<view class="tr bg-g">
					<view class="td">10</view>
					<view class="td">2022-03-01 18:16:33</view>
				</view>
				
			</view>
		</view>
		<u-calendar
			:show="showCalendar"
			closeOnClickOverlay
			mode="range"
			startText="开始时间"
			endText="结束时间"
			confirmDisabledText="请选择日期"
			@confirm="calendarConfirm"
			@close="calendarClose"
		></u-calendar>
		<u-picker :show="showTimeGap" :columns="columns" keyName="label" closeOnClickOverlay @confirm="confirmTimeGap" @cancel="cancelTimeGap" @close="cancelTimeGap"></u-picker>
		<u-picker :show="showSelectType" :columns="keys" closeOnClickOverlay @confirm="confirmTypeGap" @cancel="cancelTypeGap" @close="cancelTypeGap"></u-picker>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
import { getDeviceKeys, getHistroyData } from '../../../pages/device/api/index';
export default {
	components: {
		fTabbar,
		qiunDataCharts
	},
	props:{
		keys:{
			type:Array,
			default:()=>[]
		}
	},
	data() {
		return {
			showCalendar: false,
			showTimeGap: false,
			showSelectType: false,
			columns: [
				[
					{
						label: '5分钟',
						value: 300
					},
					{
						label: '10分钟',
						value: 600
					},
					{
						label: '15分钟',
						value: 900
					},
					{
						label: '30分钟',
						value: 1800
					},
					{
						label: '1小时',
						value: 3600
					},
					{
						label: '2小时',
						value: 7200
					},
					{
						label: '6小时',
						value: 21600
					}
				]
			],
			timeData: {
				selectTime: '',
				getTimeGap: '',
				getType: ''
			}
		};
	},
	methods: {
		openCalendar() {
			this.showCalendar = true;
		},
		openTimeGap() {
			this.showTimeGap = true;
		},
		openType() {
			this.showSelectType = true;
		},
		calendarConfirm(date) {
			this.showCalendar = false;
			this.timeData.selectTime = `${date[0]} 至 ${date[1]}`;
		},
		calendarClose() {
			this.showCalendar = false;
		},
		confirmTimeGap(time) {
			this.showTimeGap = false;
			this.timeData.getTimeGap = time.value[0].label;
		},

		cancelTimeGap() {
			this.showTimeGap = false;
		},
		confirmTypeGap(time) {
			this.showSelectType = false;
			this.timeData.getType = time.value[0];
		},
		cancelTypeGap() {
			this.showSelectType = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.historyData {
	margin: 30rpx;
	.historyData-top {
		padding: 30rpx;
		background-color: #fff;
		height: 870rpx;
		border-radius: 20rpx;
		.icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 15rpx;
		}
	}
	.historyData-bottom {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.table {
			border: 0px solid darkgray;
			.tr {
				display: flex;
				width: 100%;
				justify-content: center;
				height: 3rem;
				align-items: center;
				.th {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					color: #333;
					font-weight: 500;
				}
				.td {
					color: #999;
					width: 50%;
					display: flex;
					justify-content: center;
					text-align: center;
				}
			}
		}
	}
}
.odd {
	background-color: #f9fcff;
}
</style>