<template>
	<view class="alarm-detail-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="alarm-detail-column">
			<view class="u-flex detail-column">
				<view class="column-line" v-for="(item,index) in alarmDetail" :key="index">
					<view class="column">
						<text class="text-org-bold">{{item.label}}</text>
						<text class="text-device-muted text-clip  alarm-text"
							:style="{color:hasColor.includes(item.label)?'#DE4437':''}">
							{{item.label===hasColor[0]? setAlarmStatus(item.value):item.label===hasColor[1]?setAlarmSeverity(item.value):
							item.label==='触发值：'?formatAlarmValueText:item.label==='触发条件：'?formatAlarmConditionText
							:item.label==='触发属性：'?formatAttrText:item.label==='告警设备：'?formatDeviceText:item.value}}
						</text>
					</view>
					<view class="bottom-line"></view>
				</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 class="bottom-button">
			<view v-if="handleText.includes(alarmDetail[8].value)" class="u-flex button-item">
				<u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
			</view>
			<view v-if="clearText.includes(alarmDetail[8].value)" class="u-flex button-item">
				<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'
	import {
		alarmSeverity,
		alarmStatus,
		operationNumberOrDate,
		operationString,
		operationBoolean
	} from '@/pages/alarm/config/data.js';
	import {
		useShowToast,
		useNavigateBack
	} from '@/plugins/utils.js'

	export default {
		data() {
			return {
				handleText: ['ACTIVE_UNACK', 'CLEARED_UNACK'],
				clearText: [ 'ACTIVE_ACK'],
				hasColor: ['告警级别：', '告警状态：'],
				alarmSeverity,
				alarmStatus,
				operationNumberOrDate,
				operationString,
				operationBoolean,
				formModel: {
					result: ''
				},
				detailId: '',
				alarmDetail: [],
				formatDeviceText: '',
				formatAlarmValueText: '',
				formatAlarmConditionText: '',
				formatAttrText:'',
			};
		},
		async onLoad(e) {
			if (e.data !== null) {
				let params = JSON.parse(decodeURIComponent(e.data));
				const {deviceName,severity,organizationName,details,type,createdTime,status,id} = params
				
				this.detailId = id
				this.alarmDetail = [{label: '告警场景：',value: type},{label: '告警级别：',value: severity},{label: '所属组织：',value: organizationName},{label: '告警设备：',value: ''},{label:'触发属性：',value:''},{label: '触发条件：',value: ''},{label: '触发值：',value: ''},{label: '告警时间：',value: createdTime},{label: '告警状态：',value: status},]
				
				const keys = Object.keys(details)
				const dataFormat = await this.handleAlarmDetailFormat(keys);
				this.formatAlarmDevice(details,dataFormat)
				this.formatAlarmValue(details,dataFormat)
				this.formatAlarmCondition(details,dataFormat)
				this.formatAttr(details,dataFormat)
			}
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		methods: {
			...mapActions(['updateBadgeTotal']),
			setAlarmStatus(value) {
				return this.alarmSeverity.find(item => item.value === value).label
			},
			setAlarmSeverity(value) {
				return this.alarmStatus.find(item => item.value === value).label
			},
			returnPrevPage(title) {
				useShowToast(title)
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.detailStatus = true;
			},
			async handleSubmit() {
				if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
				const res = await api.alarmApi.postAlarmAckApi(this.detailId)
				if (res == '') {
					this.returnPrevPage('处理成功~')
					setTimeout(() => {
						useNavigateBack(1)
					}, 500);
				}
			},
			async handleRemove() {
				const res = await api.alarmApi.postAlarmClearApi(this.detailId)
				if (res == '') {
					this.returnPrevPage('清除成功~')
					setTimeout(async () => {
						useNavigateBack(1)
						const res = await uni.$u.http.get('/yt/homepage/app?login=true');
						if (res) {
							//异步实时更新告警徽标数
							await this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
						}
					}, 500);
				}
			},
			//触发值处理
			 formatAlarmValue(e,dataFormat) {
				const keys = Object.keys(e)
				const values = keys.reduce((acc, curr) => {
					const items = e[curr]?.triggerData
					dataFormat.forEach((dataItem => {
						if (dataItem.tbDeviceId === curr) {
							if(!items?.realValue) return
							acc.push(
								`${items.realValue}`
							)
						}
					}))
					return acc
				}, [])
				this.formatAlarmValueText = values.join(',')
			},
			//触发条件处理
			formatAlarmCondition(e) {
				const keys = Object.keys(e)
				const values = keys.reduce((acc, curr) => {
					acc.push({
						login: e[curr]?.triggerData?.logic,
						logicValue: e[curr]?.triggerData?.logicValue
					})
					return acc
				}, [])
				const operation = [...operationNumberOrDate, ...operationString, ...operationBoolean]
				const format = values.map(item => {
					const findOperation = operation.find(findItem => findItem.value === item.login)?.symbol
					return findOperation + item.logicValue
				})
				this.formatAlarmConditionText = format.filter(Boolean).join(',')
			},
			// 触发属性
			formatAttr(e,dataFormat){
				const keys = Object.keys(e)
				const values = keys.reduce((acc, curr) => {
					const items = e[curr]?.triggerData
					dataFormat.forEach((dataItem => {
						if (dataItem.tbDeviceId === curr) {
							const findAttribute = dataItem.attribute.find(findItem => findItem.identifier === items?.key)
							if(!findAttribute?.name && !items?.key) return
							acc.push(`${findAttribute?.name || items?.key || ' '}`)
						}
					}))
					return acc
				}, [])
				this.formatAttrText = values.join(',')
			},
			//告警设备处理
			async formatAlarmDevice(e,dataFormat) {
				if (!dataFormat) this.formatDeviceText = ''
				if (Array.isArray(dataFormat) && dataFormat.length === 0) this.formatDeviceText = ''
				this.formatDeviceText = dataFormat.map(item => item.name).join(',')
			},
			async handleAlarmDetailFormat(keys) {
				const temp = [];
				for (let item of keys) {
					if (item === 'key' || item === 'data') return; //旧数据则终止
					const deviceDetailRes = await api.deviceApi.getDeviceDetail(item);
					const { deviceProfileId } = deviceDetailRes;
					if (!deviceProfileId) return;
					const attributeRes = await api.deviceApi.getAttribute(deviceProfileId);
					const dataFormat = this.handleDataFormat(deviceDetailRes, attributeRes);
					temp.push(dataFormat);
				}
				return temp;
			},
			handleDataFormat(deviceDetail, attributes) {
				const { name,tbDeviceId } = deviceDetail;
				const attribute = attributes.map((item) => ({
					identifier: item.identifier,
					name: item.name,
					detail: item.detail
				}));
				return {
					name,
					tbDeviceId,
					attribute,
				};
			}
		}
	};
</script>

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

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