<template>
	<view class="alarm-detail-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="alarm-detail-column">
			<view class="detail-column">
				<view class="column-line" v-for="(item, index) in alarmDetail" :key="index">
					<view class="column" style="display: flex;justify-content: space-between;">
						<text class="text-org-bold-alarm">{{ $t(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 === 'alarm.value' ? formatAlarmValueText : item.label === 'alarm.condition' ? formatAlarmConditionText
										: item.label === 'alarm.attribute' ? formatAttrText : item.label === 'alarm.device' ? formatDeviceText : item.value }}
						</text>
					</view>
					<view class="bottom-line"></view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<view class="handle-result text-org-bold" style="">{{ $t('alarm.processResult') }}</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="$t('alarm.pleaseResult')" 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">{{ $t('alarm.processResult') }}</view>
		<view class="hanle-main">
			<view>
				<u--textarea border="none" height="96" :placeholder="$t('alarm.pleaseResult')" 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="$t('alarm.handle')"></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="$t('alarm.cleanUp')"></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: ['alarm.level', 'alarm.status'],
			alarmSeverity,
			alarmStatus,
			operationNumberOrDate,
			operationString,
			operationBoolean,
			formModel: {
				result: ''
			},
			detailId: '',
			alarmDetail: [],
			formatDeviceText: '',
			formatAlarmValueText: '',
			formatAlarmConditionText: '',
			formatAttrText: '',
		};
	},
	onShow() {
		this.$nextTick(() => {
			uni.setNavigationBarTitle({
				title: this.$t('menu.alarmDetail')
			})
		})
	},
	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: 'alarm.scenario', value: type },
				{ label: 'alarm.level', value: severity },
				{ label: 'alarm.organization', value: organizationName },
				{ label: 'alarm.device', value: '' },
				{ label: 'alarm.attribute', value: '' },
				{ label: 'alarm.condition', value: '' },
				{ label: 'alarm.value', value: '' },
				{ label: 'alarm.time', value: createdTime },
				{ label: 'alarm.status', 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) {
			const values = this.alarmSeverity.find(item => item.value === value).label
			return values?this.$t(values):values
		},
		setAlarmSeverity(value) {
			const values = this.alarmStatus.find(item => item.value === value).label
			return values?this.$t(values):''
		},
		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(this.$t('alarm.pleaseResult'));
			const res = await api.alarmApi.postAlarmAckApi(this.detailId)
			// if (res == '') {
				this.returnPrevPage(this.$t('common.processSuccess'))
				setTimeout(() => {
					useNavigateBack(1)
				}, 500);
			// }
		},
		async handleRemove() {
			const res = await api.alarmApi.postAlarmClearApi(this.detailId)
			// if (res == '') {
				this.returnPrevPage(this.$t('common.clearSuccess'))
				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';

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