<template>
	<view class="history-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="form-style" style="width: 700rpx;height: 800rpx;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;">
						<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>
					</view>
				</u-form-item>
				<u-form-item label="." prop="getTimeGap" @click="openTimeGap">
					<view class="u-flex" style="flex-direction: row;">
						<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>
					</view>
				</u-form-item>
				<u-form-item label="." prop="getType" @click="openOther">
					<u--input v-model="timeData.getType" disabled disabledColor="#ffffff" placeholder="请选择类型" border="none"></u--input>
					<!-- <view style="width: 638rpx;height: 50rpx;border-radius: 40px;background-color: #377DFF;border:1px solid #377DFF;margin-left:-60rpx">
					<u--input v-model="timeData.getType" disabled disabledColor="#ffffff" placeholder="请选择类型" border="none"></u--input>
					</view> -->
				</u-form-item>
			</u-form>
			<view class="charts-box"><qiun-data-charts type="column" :chartData="chartData" /></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';
export default {
	components: {
		fTabbar
	},
	data() {
		return {
			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'
				}
			],
			chartData: {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [
					{
						name: '目标值',
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: '完成量',
						data: [18, 27, 21, 24, 6, 28]
					}
				]
			},
			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
					}
				]
			]
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		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;
}
.charts-box {
	width: 100%;
	height: 600rpx;
}
.form-style {
	/deep/.u-form {
		.u-form-item {
			margin-left: -57rpx !important;
		}
	}
}
</style>