<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" suffixIcon="arrow-down">
						<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" suffixIcon="arrow-down">
						<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" suffixIcon="arrow-down" />
				</u-form-item>
			</u-form>

			<view class="charts-box" v-show="historyData.length">
				<qiun-data-charts
					type="area"
					canvas2d
					canvasId="daskujdhasljkdcnzjkdfhuoqwlqwjhkdsamjczxnmdasd123321"
					:chartData="chartData"
					:opts="{ xAxis: { disabled: true }, legend: { show: false } }"
				/>
			</view>
			<mescroll-empty v-if="!historyData.length"/>
		</view>
		<view class="historyData-bottom">
			<view class="table">
				<view class="tr bg-w" v-if="historyData.length">
					<view class="th">变量值</view>
					<view class="th">更新时间</view>
				</view>
				<view class="tr bg-g" :class="{ odd: index % 2 === 0 }" v-for="(item, index) in historyData" :key="index">
					<view class="td">{{ item.value }}</view>
					<view class="td">{{ item.ts }}</view>
				</view>
				<mescroll-empty v-if="!historyData.length"/>
			</view>
		</view>
		<u-calendar
			:show="showCalendar"
			:defaultDate="defaultDate"
			closeOnClickOverlay
			mode="range"
			startText="开始时间"
			endText="结束时间"
			confirmDisabledText="请选择日期"
			:minDate="minDate"
			:maxDate="maxDate"
			@confirm="calendarConfirm"
			@close="calendarClose"
		></u-calendar>
		<u-picker
			:show="showTimeGap"
			:columns="columns"
			keyName="label"
			closeOnClickOverlay
			@confirm="confirmTimeGap"
			@cancel="cancelTimeGap"
			@close="cancelTimeGap"
			:defaultIndex="[3]"
		></u-picker>
		<u-picker :show="showSelectType" :columns="keys" closeOnClickOverlay @confirm="confirmTypeGap" @cancel="cancelTypeGap" @close="cancelTypeGap"></u-picker>
	</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 { getHistoryData } from '../api/index.js';
import { formatToDate } from '@/plugins/utils.js';
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate();
export default {
	components: {
		fTabbar,
		qiunDataCharts
	},
	props: {
		keys: {
			type: Array,
			default: () => []
		},
		yesterday: {
			type: String,
			default: ''
		},
		today: {
			type: String,
			default: ''
		},
		timeDiff: {
			type: String,
			default: ''
		},
		historyData: {
			type: Array,
			default: () => []
		},
		entityId: {
			type: String,
			required: true
		},
		start: {
			type: String,
			required: true
		},
		end: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			startTs: this.start,
			endTs: this.end,
			showCalendar: false,
			showTimeGap: false,
			showSelectType: false,
			minDate: `${year}-${month - 1}-${date}`,
			maxDate: `${year}-${month}-${date + 1}`,
			defaultDate: [this.yesterday, this.today],
			chartData: {
				categories: this.historyData.map(item => item.ts),
				series: [
					{
						name: this.keys[0][0],
						data: this.historyData.map(item => Number(item.value))
					}
				]
			},
			columns: [
				[
					{
						label: '5分钟',
						value: 300000
					},
					{
						label: '10分钟',
						value: 600000
					},
					{
						label: '15分钟',
						value: 900000
					},
					{
						label: '30分钟',
						value: 1800000
					},
					{
						label: '1小时',
						value: 3600000
					},
					{
						label: '2小时',
						value: 7200000
					}
				]
			],
			timeData: {
				selectTime: this.yesterday + ' 至 ' + this.today,
				getTimeGap: this.timeDiff,
				getType: this.keys[0][0]
			}
		};
	},
	watch: {
		historyData(newValue) {
			if (!newValue.length) {
				this.chartData.categories = [];
				this.chartData.series = [];
			} else {
				this.chartData.categories = newValue.map(item => item.ts);
				this.chartData.series = [
					{
						name: this.keys[0][0],
						data: this.getHistoryData.map(item => Number(item.value))
					}
				];
			}
		}
	},
	methods: {
		// 动态生成Columns
		generateColumns(value) {
			if (value < 604800000) {
				// 小于7天
				return [
					[
						{
							label: '5分钟',
							value: 300000
						},
						{
							label: '10分钟',
							value: 600000
						},
						{
							label: '15分钟',
							value: 900000
						},
						{
							label: '30分钟',
							value: 1800000
						},
						{
							label: '1小时',
							value: 3600000
						},
						{
							label: '2小时',
							value: 7200000
						}
					]
				];
			} else if (value < 2592000000) {
				// 小于30天
				return [
					[
						{
							label: '30分钟',
							value: 1800000
						},
						{
							label: '1小时',
							value: 3600000
						},
						{
							label: '2小时',
							value: 7200000
						},
						{
							label: '5小时',
							value: 18000000
						},
						{
							label: '10小时',
							value: 36000000
						},
						{
							label: '12小时',
							value: 43200000
						},
						{
							label: '1天',
							value: 86400000
						}
					]
				];
			} else if (value >= 2592000000) {
				// 大于30天
				return [
					[
						{
							label: '2小时',
							value: 7200000
						},
						{
							label: '5小时',
							value: 18000000
						},
						{
							label: '10小时',
							value: 36000000
						},
						{
							label: '12小时',
							value: 43200000
						},
						{
							label: '1天',
							value: 86400000
						}
					]
				];
			}
		},
		openCalendar() {
			this.showCalendar = true;
		},
		openTimeGap() {
			this.showTimeGap = true;
		},
		openType() {
			this.showSelectType = true;
		},
		calendarConfirm(date) {
			this.showCalendar = false;
			this.timeData.selectTime = `${date[0]} 至 ${date[date.length - 1]}`;
			// 选择的日期时间差(时间戳)
			const timeDiff = formatToDate(date[date.length - 1], 'x') - formatToDate(date[0], 'x');
			const genColumns = this.generateColumns(timeDiff);
			this.columns = genColumns;
			this.timeData.getTimeGap = '';
			this.timeData.getType = '';
			this.startTs = formatToDate(date[0], 'x');
			this.endTs = formatToDate(date[date.length - 1], 'x');
		},
		calendarClose() {
			this.showCalendar = false;
		},
		confirmTimeGap(time) {
			this.showTimeGap = false;
			this.timeData.getTimeGap = time.value[0].label;
			this.timeData.getType = '';
		},

		cancelTimeGap() {
			this.showTimeGap = false;
		},
		async confirmTypeGap(time) {
			this.showSelectType = false;
			this.timeData.getType = time.value[0];
			const interval = this.columns[0].find(item => item.label === this.timeData.getTimeGap);
			const data = await getHistoryData({
				startTs: this.startTs,
				endTs: this.endTs,
				keys: this.timeData.getType,
				interval: interval.value,
				entityId: this.entityId
			});
			this.$emit('update', data[this.timeData.getType]);
		},
		cancelTypeGap() {
			this.showSelectType = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.charts-box {
	width: 100%;
	height: 550rpx;
}
.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>