<template>
	<u-popup @close="$emit('close')" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
		<view class="popup-page">
			<view class="popup-text"><text class="text">告警筛选</text></view>
			<view class="popup-alarm-page u-flex">
				<view>
					<query-item ref="queryItemAlarmStatusRef" :leftText="leftAlarmStatusText" :queryStatus="alertStatus"
						@currentClick="getAlarmStatus"></query-item>
					<query-item ref="queryDeviceTypeStatusRef" :leftText="leftDeviceTypeText" :queryStatus="deviceType"
						@currentClick="getDeviceType"></query-item>
					<query-item ref="queryItemAlarmLevelRef" :leftText="leftAlarmLevelText" :queryStatus="alertLevel"
						@currentClick="getAlarmLevel"></query-item>
					<query-item ref="queryItemSelectTimeRef" :leftText="leftSelectTimeText" :queryStatus="timeArea"
						@currentClick="getSelectTime"></query-item>
					<view class="select-date">
						<view class="home-text-muted">选择日期</view>
						<view class="datetime-picker">
							<uni-datetime-picker return-type="timestamp" v-model="range" type="datetimerange"
								rangeSeparator="至" />
						</view>
					</view>
					<view class="u-flex bottom-button">
						<view class="button-item">
							<u-button @click="resetQuery" type="info" shape="circle" text="重置">
							</u-button>
						</view>
						<view class="button-item" style="margin-left: 46rpx">
							<u-button @click="confirmQuery" type="primary" shape="circle" text="确认">
							</u-button>
						</view>
					</view>
					<view style="height: 90rpx;"></view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		alertStatus,
		deviceType,
		alertLevel,
		timeArea
	} from '../config/data.js';
	import queryItem from './query-item.vue'

	export default {
		components: {
			queryItem
		},
		props: {
			show: Boolean
		},
		data() {
			return {
				totalText: '告警数:',
				leftAlarmStatusText: '告警状态',
				leftDeviceTypeText: '设备类型',
				leftAlarmLevelText: '告警等级',
				leftSelectTimeText: '选择时间',
				range: [],
				alertStatus,
				deviceType,
				alertLevel,
				timeArea,
				queryCondition: {
					status: '',
					deviceType: '',
					severity: '',
					startTime: 0,
					endTime: 0,
				},

			};
		},
		computed: {
			hignLightColor() {
				return `background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)'`
			},
			unHighlightColor() {
				return `background: '#F6F6F6'`
			}
		},
		methods: {
			getAlarmStatus(e) {
				this.queryCondition.status = e.value;
			},
			getDeviceType(e) {
				this.queryCondition.deviceType = e.value;
			},
			getAlarmLevel(e) {
				this.queryCondition.severity = e.value;
			},
			getSelectTime(e, i) {
				const curTime = new Date();
				const getStartTs = curTime.getTime();
				const calcDate = new Date(curTime.setMinutes(curTime.getMinutes() - e.value));
				const getEndTs = calcDate.getTime();
				this.queryCondition.startTime = getEndTs
				this.queryCondition.endTime = getStartTs
			},
			confirmQuery() {
				if (Array.isArray(this.range) && this.range.length > 0) {
					this.queryCondition.startTime = this.range[0]
					this.queryCondition.endTime = this.range[1]
				}
				this.$emit('queryCondition', this.queryCondition)
			},
			resetQuery() {
				for (let i in this.queryCondition) Reflect.set(this.queryCondition, i, '')
				this.range = []
				this.$refs.queryItemAlarmStatusRef.reset()
				this.$refs.queryDeviceTypeStatusRef.reset()
				this.$refs.queryItemAlarmLevelRef.reset()
				this.$refs.queryItemSelectTimeRef.reset()
			},
		}
	};
</script>


<style lang="scss" scoped>
	.popup-page {
		height: 1100rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow-y: scroll;
		overflow-x: hidden;

		.popup-text {
			text-align: center;
			position: relative;
			top: 68rpx;
			margin-top: -40rpx;

			.text {
				font-size: 16px;
				color: #333333;
			}
		}

		.popup-alarm-page {
			margin-top: 97rpx;
			margin-left: 98rpx;
			flex-direction: column;
			justify-content: space-between;

			.select-date {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.datetime-picker {
				width: 640rpx;
				margin-left: 5rpx;
				margin-right: 70rpx;
				margin-top: 35rpx;
			}

			.bottom-button {
				position: fixed;
				bottom: 10rpx;
				z-index: 9999;
				flex-direction: row;
				margin-top: 128rpx;
				margin-left: 10rpx;

				.button-item {
					width: 300rpx
				}
			}
		}
	}
</style>