<template>
	<view class="alert-page" :class="show ? 'pop-no-scroll' : ''">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 吸顶组件 -->
		<u-sticky>
			<view class="device-top">
				<view class="search">
					<view>
						<view class="search-left">
							<u--input prefixIcon="search" placeholder="请输入告警名字" shape="circle" @change="inputChanged">
							</u--input>
						</view>
					</view>
					<view @click="openSearchDialog" class="search-right">
						<text>筛选</text>
						<image src="../../static/shaixuan.png" />
					</view>
				</view>
				<u-line />
				<view class="org">
					<u-cell @click="openOrg" isLink title="组织关系" :border="false">
						<view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;">
							<image src="../../static/org.png" style="width: 24rpx;height: 28rpx;"></image>
							<view style="margin-left: 10rpx; color: #666;">
								告警数:
								<text style="margin-left: 20rpx;">{{ alertTotal }}</text>
							</view>
						</view>
					</u-cell>
				</view>
			</view>
		</u-sticky>
		<!-- 吸顶组件 -->
		<!-- 自带分页组件 -->
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<view class="device-list">
				<view @click="openAlertDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
					<view class="u-flex item">
						<view class="item-text text-clip">
							<text class="text-bold">{{ item.deviceName == null ? '暂无数据' : item.deviceName }}</text>
						</view>
						<view class="item-text text-clip">
							<text
								class="text-muted">{{ item.details == null ? '暂无数据' : formatDetailText(item.details.data) }}</text>
						</view>
						<view class="item-text">
							<text class="text-muted">
								告警状态：{{
									item.status == 'CLEARED_UNACK'
										? '清除未确认'
										: item.status == 'ACTIVE_UNACK'
										? '激活未确认'
										: item.status == 'CLEARED_ACK'
										? '清除已确认'
										: '激活已确认'
								}}
							</text>
						</view>
						<view class="item-text">
							<text class="text-secondary">{{ item.createdTime }}</text>
						</view>
					</view>
					<view class="item">
						<view class="u-flex item-right">
							<image class="right-image" :src="bindImageUrl(item.severity)"></image>
							<view class="right-text">
								<text class="text-no-color" :style="[
										item.severity == 'CRITICAL'
											? { color: '#DE4437' }
											: item.severity == 'MAJOR'
											? { color: '#DE7337' }
											: item.severity == 'MINOR'
											? { color: '#FFC107' }
											: item.severity == 'WARNING'
											? { color: '#DE4437' }
											: { color: '#00C9A7' }
									]">
									{{
										item.severity == 'CRITICAL'
											? '危险'
											: item.severity == 'MAJOR'
											? '重要'
											: item.severity == 'MINOR'
											? '次要'
											: item.severity == 'WARNING'
											? '警告'
											: '不确定'
									}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<mescroll-empty v-if="!list.length" />
		</mescroll-body>
		<!-- 自带分页组件 -->
		<view style="height: 20rpx"></view>
		<!-- 告警筛选-->
		<u-popup @close="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>
						<view class="popup-alarm-text"><text class="text">告警状态</text></view>
						<view class="u-flex popup-alarm-child">
							<view class="alarm-text" @click="getAlertStatus(item, index)"
								:style="[index == current1 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }]"
								v-for="(item, index) in alertStatus" :key="index">
								<text :class="[index == current1 ? 'select-text' : 'un-select-text']"
									class="text">{{ item.name }}</text>
							</view>
						</view>
						<view style="margin-top: 169rpx;">
							<view class="popup-alarm-text"><text class="text">设备类型</text></view>
							<view class="u-flex popup-alarm-child">
								<view class="alarm-text" @click="getTypeStatus(item, index)" :style="[
										index == current2 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
									]" v-for="(item, index) in deviceType" :key="index">
									<text :class="[index == current2 ? 'select-text' : 'un-select-text']"
										class="text">{{ item.name }}</text>
								</view>
							</view>

							<view style="margin-top: 169rpx;">
								<view class="popup-alarm-text"><text class="text">告警等级</text></view>
								<view class="u-flex popup-alarm-child">
									<view class="alarm-text" @click="getLevelStatus(item, index)" :style="[
											index == current3 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
										]" v-for="(item, index) in alertLevel" :key="index">
										<text :class="[index == current3 ? 'select-text' : 'un-select-text']"
											class="text">{{ item.name }}</text>
									</view>
								</view>
								<view style="margin-top: 169rpx;">
									<view class="popup-alarm-text"><text class="text">选择时间</text></view>
									<view class="u-flex popup-alarm-child">
										<view class="alarm-text" @click="getTimeStatus(item, index)" :style="[
												index == current4
													? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' }
													: { background: '#F6F6F6' }
											]" v-for="(item, index) in timeArea" :key="index">
											<text :class="[index == current4 ? 'select-text' : 'un-select-text']"
												class="text">{{ item.name }}</text>
										</view>
									</view>
									<view style="margin-top: 169rpx;margin-left: 22rpx;">
										<view class="u-flex popup-alarm-child">
											<view class="home-text-muted">选择日期</view>
											<view
												style="width: 623rpx;margin-left: 5rpx;margin-right: 70rpx;margin-top: 35rpx;">
												<uni-datetime-picker v-model="range" type="datetimerange"
													rangeSeparator="至" />
											</view>
										</view>
									</view>
									<view style="height: 130rpx;"></view>
									<view class="u-flex"
										style="position: fixed;bottom: 10rpx;z-index: 9999;flex-direction: row; margin-top: 128rpx; margin-left: 10rpx">
										<view style="width: 300rpx">
											<u-button @click="resetData" type="info" shape="circle" text="重置">
											</u-button>
										</view>
										<view style="width: 300rpx; margin-left: 46rpx">
											<u-button @click="queryData" type="primary" shape="circle" text="确认">
											</u-button>
										</view>
									</view>
									<view style="height: 90rpx;"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		alertStatus,
		deviceType,
		alertLevel,
		timeArea
	} from './static/data.js';
	import api from '@/api/index.js'

	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			fTabbar
		},
		data() {
			return {
				range: [],
				alertStatusVal: '',
				deviceTypeVal: '',
				alertLevelVal: '',
				selectTimeVal: '',
				current1: 0,
				current2: 0,
				current3: 0,
				current4: 0,
				page: {
					num: 0,
					size: 10
				},
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 不自动加载
				},
				timeData: {
					selectTime: [],
					getTimeGapS: '',
					getTimeGapE: ''
				},
				show: false,
				list: [],
				alertStatus,
				deviceType,
				alertLevel,
				timeArea,
				ordId: '',
				detailStatus: false,
				alertTotal: 0,
				searchAlarmText: '',
				startTimeVa: '',
				endTimeVa: '',
				startTimeArea: '',
				endTimeArea: '',
				type: null
			};
		},
		onShow() {
			this.page.num = 1;
			if (this.detailStatus) {
				this.loadData(1, null, null, null, null, null, null);
			}
			if (this.ordId) {
				this.loadData(1, null, null, null, null, null, this.ordId);
			}
		},
		onHide() {
			this.ordId = '';
			this.detailStatus = false;
			this.type = null;
		},
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			if (e.type == undefined) {
				this.loadData(1, null, null, null, null, null, null);
			} else {
				let params = JSON.parse(e.type);
				if (Array.isArray(params)) {
					this.type = params.join(',');
				} else {
					this.type = params;
				}
				this.loadData(1, this.type, null, null, null, null, null);
			}
		},
		watch: {
			range(newval) {
				this.timeData.selectTime = this.range;
			}
		},
		methods: {
			moveHandle() {
				return false;
			},
			inputChanged(e) {
				this.resetData();
				this.topBack();
				this.searchAlarmText = e;
				this.page.num = 1;
				this.loadData(1, null, null, null, null, null, null, e);
			},
			getAlertStatus(e, i) {
				this.current1 = i;
				this.alertStatusVal = e.value;
			},
			getTypeStatus(e, i) {
				this.current2 = i;
				this.deviceTypeVal = e.value;
			},
			getLevelStatus(e, i) {
				this.current3 = i;
				this.alertLevelVal = e.value;
			},
			getTimeStatus(e, i) {
				this.current4 = i;
				this.selectTimeVal = e.value;
				let curTime = new Date();
				const formatS = curTime.getTime();
				let addMinute = new Date(curTime.setMinutes(curTime.getMinutes() - this.selectTimeVal));
				const formatE = addMinute.getTime();
				this.timeData.getTimeGapS = formatS;
				this.timeData.getTimeGapE = formatE;
			},
			queryData() {
				this.topBack();
				this.page.num = 1;
				let date1 = new Date(this.timeData.selectTime[0]);
				let date2 = new Date(this.timeData.selectTime[1]);
				if (this.timeData.selectTime.length == 0) {
					this.startTimeVa = '';
					this.endTimeVa = '';
				} else {
					this.startTimeVa = date1.getTime();
					this.endTimeVa = date2.getTime();
				}
				if (this.timeData.getTimeGapS == '') {
					this.startTimeArea = '';
					this.endTimeArea = '';
				} else {
					this.startTimeArea = this.timeData.getTimeGapE;
					this.endTimeArea = this.timeData.getTimeGapS;
				}
				this.loadData(
					1,
					this.alertStatusVal,
					this.startTimeVa ? this.startTimeVa : this.startTimeArea,
					this.endTimeVa ? this.endTimeVa : this.endTimeArea,
					this.alertLevelVal,
					this.deviceTypeVal
				);
				this.show = false;
			},
			resetData() {
				this.current1 = 0;
				this.alertStatusVal = '';
				this.current2 = 0;
				this.deviceTypeVal = '';
				this.current3 = 0;
				this.alertLevelVal = '';
				this.current4 = 0;
				this.selectTimeVal = '';
				this.timeData.selectTime = [];
				this.timeDatagetTimeGapS = '';
				this.timeDatagetTimeGapE = '';
				this.range = [];
				this.searchAlarmText = '';
				this.startTimeVa = '';
				this.endTimeVa = '';
				this.startTimeArea = '';
				this.endTimeArea = '';
				this.ordId = '';
				this.type = null;
			},
			bindImageUrl(e) {
				switch (e) {
					case 'CRITICAL':
						return '../../static/danger.png';
						break;
					case 'MAJOR':
						return '../../static/major.png';
						break;
					case 'MINOR':
						return '../../static/secondary.png';
						break;
					case 'WARNING':
						return '../../static/danger.png';
						break;
					case 'INDETERMINATE':
						return '../../static/noshue.png';
						break;
					default:
						return '';
						break;
				}
			},
			//筛选数据让它回到顶部
			topBack() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0
					duration: 10 // 滚动动画的时长
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.list.length = 0;
				this.page.num = 1;
				this.loadData(this.page.num, null, null, null, null, null, null, null);
				this.resetData();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				if (
					this.type != null ||
					this.alertStatusVal != '' ||
					this.searchAlarmText != '' ||
					this.deviceTypeVal != '' ||
					this.alertLevelVal != '' ||
					this.startTimeVa != '' ||
					this.startTimeArea != '' ||
					this.ordId != ''
				) {
					//联网加载数据
					this.page.num += 1;
					this.loadData(
						this.page.num,
						this.alertStatusVal ? this.alertStatusVal : this.type,
						this.startTimeVa,
						this.endTimeVa,
						this.alertLevelVal,
						this.deviceTypeVal,
						this.ordId,
						this.searchAlarmText
					);
				} else {
					//联网加载数据
					this.page.num += 1;
					this.loadData(this.page.num);
				}
			},
			async loadData(pageNo, statusV, startTimeV, endTimeV, severityV, deviceTypeV, organizationV, alarmName) {
				let that = this;
				let httpData = {
					page: pageNo,
					pageSize: 10,
					status: statusV,
					startTime: startTimeV,
					endTime: endTimeV,
					severity: severityV,
					deviceType: deviceTypeV,
					organizationId: organizationV,
					alarmType: alarmName
				};
				if (statusV == '') {
					delete httpData.status;
				}
				if (severityV == '') {
					delete httpData.severity;
				}
				const res = await api.alarmApi.getAlarmApi({
					params: httpData,
					custom: {
						load: false
					}
				})
				if (res) {
					uni.stopPullDownRefresh();
					that.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
					that.alertTotal = res.total;
					if (pageNo == 1) {
						that.list = res.items;
					} else {
						that.list = that.list.concat(res.items);
					}
				}
			},
			openOrg() {
				uni.navigateTo({
					url: './org/org'
				});
			},
			close() {
				this.show = false;
			},
			openSearchDialog() {
				this.show = true;
				this.resetData();
			},
			//跳转告警详情
			openAlertDetail(e) {
				let obj = {
					id: e.id,
					deviceName: e.deviceName,
					severity: e.severity,
					organizationName: e.organizationName,
					details: e.details,
					createdTime: e.createdTime,
					status: e.status
				};
				uni.navigateTo({
					url: '/alarmSubPage/alarmDetailPage/alarmDetail?data=' + JSON.stringify(obj)
				});
			},
			formatDetailText(e) {
				//去除字符串双引号
				const jsonStr = JSON.stringify(e);
				const str = jsonStr.substring(1, jsonStr.length - 1);
				const newStr = str.replace(/\"/g, '');
				return newStr;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './static/alarm.scss';

	/deep/ .u-button--primary {
		background-color: #377dff !important;
		border-color: #377dff !important;
	}

	/deep/ .u-button--info {
		background-color: #e3e3e5 !important;
		border-color: #e3e3e5 !important;
	}

	/deep/ .u-cell__right-icon-wrap {
		margin-top: -55rpx !important;
	}

	/deep/ .uni-calendar--fixed {
		bottom: 172rpx !important;
	}

	.pop-no-scroll {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.device-top {
		padding: 10rpx 30rpx;
		background-color: #fff;

		.search {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10rpx;

			.search-left {
				width: 580rpx;
				background-color: #f8f9fa;
				border-radius: 200rpx;
			}

			.search-right {
				display: flex;
				align-items: center;

				text {
					color: #333;
					font-size: 14px;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>