<template>
	<view class="history-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="form-style" style="border-radius: 20px;width: 700rpx;height: 900rpx;background-color: #fff;">
			<u-form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;">
				<u-form-item
					label=""
					prop="selectTime"
					@click="
						showCalendar = true;
						hideKeyboard();
					"
				>
					<view class="u-flex" style="flex-direction: row;">
						<!-- #ifdef MP -->
						<view style="margin-left: -63rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/can-der.png" mode=""></image></view>
						<view style="margin-left: 23rpx;">
							<u--input v-model="timeData.selectTime" disabled disabledColor="#ffffff" placeholder="请选择日期" border="none"></u--input>
						</view>
						<!-- #endif -->

						<!-- #ifdef APP -->
						<view style="margin-left: 60rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/can-der.png" mode=""></image></view>
						<view style="margin-left: 46rpx;">
							<u--input v-model="timeData.selectTime" disabled disabledColor="#ffffff" placeholder="请选择日期" border="none"></u--input>
						</view>
						<!-- #endif -->
					</view>
				</u-form-item>
				<u-form-item label="" prop="getTimeGap" @click="openTimeGap">
					<view class="u-flex" style="flex-direction: row;">
						<!-- #ifdef MP -->
						<view style="margin-left: -63rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/time.png" mode=""></image></view>
						<view style="margin-left: 23rpx;">
							<u--input v-model="timeData.getTimeGap" disabled disabledColor="#ffffff" placeholder="请选择时间区间" border="none"></u--input>
						</view>
						<!-- #endif -->

						<!-- #ifdef APP -->
						<view style="margin-left: 60rpx;"><image style="width: 30rpx;height: 30rpx;" src="../../../static/time.png" mode=""></image></view>
						<view style="margin-left: 46rpx;">
							<u--input v-model="timeData.getTimeGap" disabled disabledColor="#ffffff" placeholder="请选择时间区间" border="none"></u--input>
						</view>
						<!-- #endif -->
					</view>
				</u-form-item>
				<u-form-item label="" prop="getType" @click="openOther">
					<!-- #ifdef MP -->
					<view style="width: 638rpx;height: 80rpx;border-radius: 40px;background: rgba(55, 125, 255, 0.03);margin-left:-60rpx">
						<u--input shape="circle" v-model="timeData.getType" placeholder="请选择类型"></u--input>
					</view>
					<!-- #endif -->

					<!-- #ifdef APP -->
					<view style="width: 638rpx;height: 80rpx;border-radius: 40px;background: rgba(55, 125, 255, 0.03);margin-left:60rpx">
						<u--input shape="circle" v-model="timeData.getType" placeholder="请选择类型"></u--input>
					</view>
					<!-- #endif -->
				</u-form-item>
			</u-form>
			<view style="height: 800rpx;width: 750rpx;margin-left: 20rpx;">
				<!-- 区域折线图 -->
				<view class="charts-box"><qiun-data-charts type="tarea" :chartData="chartData" :echartsH5="true" :echartsApp="true" :canvas2d="true" background="none" /></view>
				<!-- 区域折线图 -->
			</view>
		</view>
		<view style="border-radius: 20px;margin-top: 30rpx;width: 700rpx;height: 700rpx;background-color: #fff;">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index"><u-cell :value="item.value" :title="item.name"></u-cell></u-list-item>
			</u-list>
		</view>
		<u-calendar
			:show="showCalendar"
			mode="range"
			@confirm="calendarConfirm"
			@close="calendarClose"
			startText="开始时间"
			endText="结束时间"
			confirmDisabledText="请选择日期"
			:formatter="formatter"
		></u-calendar>
		<u-picker @confirm="confirmTimeGap" :show="showTimeGap" :columns="columns" keyName="label"></u-picker>
		<u-picker @confirm="confirmOtherGap" :show="showOtherType" :columns="columnOther" keyName="label"></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';

export default {
	components: {
		fTabbar,
		qiunDataCharts
	},
	data() {
		return {
			chartData: {
				categories: [],
				series: []
			},
			indexList: [
				{
					name: '变量值',
					value: '更新时间'
				},
				{
					name: '1',
					value: '2022-03-01 18:16:33'
				},
				{
					name: '69',
					value: '2022-03-01 18:16:33'
				},
				{
					name: '12',
					value: '2022-03-01 18:16:33'
				},
				{
					name: '49',
					value: '2022-03-01 18:16:33'
				},
				{
					name: '95',
					value: '2022-03-01 18:16:33'
				},
				{
					name: '95',
					value: '2022-03-01 18:16:33'
				}
			],
			showTimeGap: false,
			showOtherType: false,
			showCalendar: false,
			timeData: {
				selectTime: '',
				getTimeGap: '',
				getType: ''
			},
			columnOther: [
				[
					{
						label: 'CO2',
						id: 1
					},
					{
						label: 'PH',
						id: 2
					}
				]
			],
			columns: [
				[
					{
						label: '5分钟',
						id: 5
					},
					{
						label: '10分钟',
						id: 10
					},
					{
						label: '15分钟',
						id: 15
					},
					{
						label: '30分钟',
						id: 30
					},
					{
						label: '1个小时',
						id: 60
					},
					{
						label: '2个小时',
						id: 120
					},
					{
						label: '6个小时',
						id: 360
					}
				]
			]
		};
	},
	onReady() {
		setTimeout(() => {
			this.getServerData();
		}, 1000);
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		getServerData() {
			this.chartData.categories = [];
			this.chartData.series = [
				{
					name: '14:52',
					data: [[10000, 55], [30000, 25], [50000, 55], [70000, 25], [90000, 55]]
				}
			];
		},
		hideKeyboard() {
			uni.hideKeyboard();
		},
		calendarConfirm(e) {
			this.showCalendar = false;
			this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
		},
		calendarClose() {
			this.showCalendar = false;
		},
		openTimeGap() {
			this.showTimeGap = true;
		},
		openOther() {
			this.showOtherType = true;
		},
		confirmTimeGap(e) {
			this.timeData.getTimeGap = e.value[0].label;
			this.showTimeGap = false;
		},
		confirmOtherGap(e) {
			this.timeData.getType = e.value[0].label;
			this.showOtherType = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.history-page {
	padding-top: -12rpx;
	padding-left: 23rpx;
}
.form-style {
	/deep/.u-form {
		.u-form-item {
			margin-left: -57rpx !important;
		}
	}
}
.charts-box {
	width: 650rpx;
	height: 600rpx;
}
</style>