<template>
	<view class="alarm-detail-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="alarm-detail-column">
			<view class="u-flex detail-column">
				<view class="u-flex column">
					<text class="text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>
					<image class="image" src="/static/alarm-device.png"></image>
				</view>
				<view class="column">
					<text class="text-org-bold ">告警级别：</text>
					<text class="text-device-muted" style="color:#DE4437">
						{{
							list.severity == 'CRITICAL'
								? '危险'
								: list.severity == 'MAJOR'
								? '重要'
								: list.severity == 'MINOR'
								? '次要'
								: list.severity == 'WARNING'
								? '警告'
								: '不确定'
						}}
					</text>
				</view>
				<view class="column">
					<text class="text-org-bold">所属组织：</text>
					<text class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text>
				</view>
				<view class="column">
					<text class="text-org-bold">告警值：</text>
					<text class="text-device-muted">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>
				</view>
				<view class="column">
					<text class="text-org-bold">告警时间：</text>
					<text class="text-device-muted">{{ list.createdTime }}</text>
				</view>
				<view class="column">
					<text class="text-org-bold">告警状态：</text>
					<text class="text-device-muted" style="color: #DE4437;">
						{{
							list.status == 'CLEARED_UNACK'
								? '清除未确认'
								: list.status == 'ACTIVE_UNACK'
								? '激活未确认'
								: list.status == 'CLEARED_ACK'
								? '清除已确认'
								: '激活已确认'
						}}
					</text>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<view class="handle-result text-org-bold" style="">处理结果</view>
		<view class="hanle-main">
			<u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1">
				<u-form-item label="." prop="result" ref="item3">
					<view style="position: relative;left: -60rpx;">
						<u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="handle-result text-org-bold">处理结果</view>
		<view class="hanle-main">
			<view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view>
		</view>
		<!-- #endif -->
		<view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;">
			<view
				:style="[
					{ position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' },
					{ right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' }
				]"
				v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'"
				class="u-flex"
				style="width: 260rpx"
			>
				<u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
			</view>
			<view style="width: 30rpx;"></view>
			<view
				:style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]"
				v-if="list.status == 'ACTIVE_ACK'"
				class="u-flex"
				style="width: 260rpx"
			>
				<u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formModel: {
				result: ''
			},
			list: {}
		};
	},
	onLoad(e) {
		if (e.data !== null) {
			let params = JSON.parse(e.data);
			this.list = params;
		}
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		//处理
		handleSubmit() {
			if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
			else
				uni.$u.http
					.post(`/alarm/${this.list.id}/ack`)
					.then(res => {
						if (res == '') {
							uni.showToast({
								title: '处理成功~',
								icon: 'none'
							});
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length - 1]; //当前页页面实例
							let prevPage = pages[pages.length - 2]; //上一页页面实例
							prevPage.$vm.detailStatus = true;
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 500);
						}
					})
					.catch(e => {
						uni.$u.toast(e.data?.message);
					});
		},
		// 清除
		handleRemove() {
			uni.$u.http
				.post(`/alarm/${this.list.id}/clear`)
				.then(res => {
					if (res == '') {
						uni.showToast({
							title: '清除成功~',
							icon: 'none'
						});
						let pages = getCurrentPages(); //获取所有页面栈实例列表
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.detailStatus = true;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					}
				})
				.catch(e => {
					uni.$u.toast(e.data?.message);
				});
		},
		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/alarmDetail.scss';
/deep/ .u-button--primary {
	background-color: #377dff !important;
	border-color: #377dff !important;
}
</style>