<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-clip device-name 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 text-clip">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>
				</view>
				<view class="column">
					<text class="text-org-bold">告警场景：</text>
					<text
						class="text-device-muted text-clip">{{ list.type == null ? '暂无数据' : list.type }}</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>
	import {
		mapActions
	} from 'vuex'
	import api from '@/api/index.js'

	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: {
			//处理
			async handleSubmit() {
				if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
				const res = await api.alarmApi.postAlarmAckApi(this.list.id)
				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);
				}
			},
			// 清除
			async handleRemove() {
				const res = await api.alarmApi.postAlarmClearApi(this.list.id)
				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(async () => {
						uni.navigateBack({
							delta: 1
						});
						const res = await uni.$u.http.get('/yt/homepage/app?login=true');
						if (res) {
							//异步实时更新告警徽标数
							await this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
						}
					}, 500);
				}
			},
			...mapActions(['updateBadgeTotal']),
			formatDetailText(e) {
				//去除字符串双引号
				const jsonStr = JSON.stringify(e);
				const str = jsonStr.substring(1, jsonStr.length - 1);
				const newStr = str.replace(/\"/g, '');
				return newStr.slice(0,26);
			}
		}
	};
</script>

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

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