<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.alarmHandling')" title-align="center" background-color="#F1F3F9"
			front-color="#000000" />
	</page-meta>

	<view class="alert-edit">
		<view class="alert-title">
			<view>
				<text class="top-title">
					{{$tt('alert.alertName')}}
				</text>
			</view>
			<view>
				<text class="top-num">
					{{ model.alertName }}
				</text>
			</view>
		</view>

		<view class="alert-info">
			<view class="title">
				<view class="info-title">
					{{$tt('alert.alertInformation')}}
				</view>
				<view class="info-tag"
					:class="{'success': model.alertLevel === 1, 'warning': model.alertLevel === 2, 'error': model.alertLevel === 3}">
					<text>
						{{ getaLertLevelDisplay(model) }}
					</text>
				</view>
			</view>
			<u--form labelPosition="left" :model="model" labelWidth="75"
				:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
				<view class="item">
					<u-form-item :label="$tt('alert.serialNumber')">
						{{ model.serialNumber }}
					</u-form-item>
				</view>

				<view class="item">
					<u-form-item class="item" :label="$tt('alert.deviceName')">
						{{ model.deviceName }}
					</u-form-item>
				</view>

				<view class="item">
					<u-form-item class="item-bottom" :label="$tt('alert.data')">
						<div style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
							v-html="formatDetail(model.detail)"></div>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="alert-dispose" v-if="model.status !== 1">
			<view class="title">
				<view class="info-title">
					{{$tt('alert.alertProcess')}}
				</view>
			</view>
			<u--form labelPosition="left" :model="model" labelWidth="75"
				:labelStyle="{ fontSize: '28rpx', color: '#8f9ca2' }">
				<view class="item">
					<u-form-item :label="$tt('alert.processAlert')">
						<u-radio-group v-if="model.status === 2" v-model="alertLevel" size="13" labelSize="14">
							<u-radio shape="circle" :name="1" :label="$tt('alert.untreated')"></u-radio>
							<text style="margin-left: 30rpx; font-size: 26rpx;"></text>
							<u-radio shape="circle" :name="3" :label="$tt('alert.processed')"></u-radio>
						</u-radio-group>
						<text v-if="model.status === 3">{{ getaStatusDisplay(model) }}</text>
					</u-form-item>
				</view>

				<view class="item">
					<u-form-item v-if="model.status === 2" :label="$tt('alert.processResult')" labelPosition="top">
						<u-textarea v-model="model.remark" fontSize="13" :placeholder="$tt('alert.inputProcessMsg')"
							confirmType="done" border="none"></u-textarea>
					</u-form-item>
				</view>

				<view class="item">
					<u-form-item v-if="model.status === 3" :label="$tt('alert.processResult')">
						{{ model.remark }}
					</u-form-item>
				</view>

				<view class="item">
					<u-form-item v-if="model.status === 3" :label="$tt('alert.alertTime')">
						{{ model.createTime }}
					</u-form-item>
				</view>

				<u-form-item v-if="model.status === 3" :label="$tt('alert.processTime')">
					{{ model.updateTime }}
				</u-form-item>
			</u--form>
		</view>

		<view class="btn-wrap" v-if="model.status === 2">
			<u-button :customStyle="{ height: '96rpx' }" type="primary" size="normal" :text="$tt('common.save')"
				@click="handleSaveForm"></u-button>
		</view>
	</view>
</template>

<script>
	import { getAlertLog, editAlertLog } from '@/apis/modules/alertLog.js';

	export default {
		data() {
			return {
				alertLogId: null, // 告警id
				source: null, // 数据来源-设备/告警列表
				// 详情数据
				model: {
					remark: '',
				},
				alertLevel: 1, // 处理级别
			};
		},
		onLoad: function(option) {
			this.alertLogId = Number(option.alertLogId) || null;
			this.source = Number(option.source) || null;
			this.getAlertDetail();
		},
		methods: {
			// 获取遥控器详情
			getAlertDetail() {
				getAlertLog(this.alertLogId).then(res => {
					const { code, data } = res;
					if (code === 200) {
						this.model = {
							...data
						};
					}
				});
			},
			// 格式化detail字段
			formatDetail(json) {
				if (json == null || json == "") {
					return;
				}
				let item = JSON.parse(json);
				let result = 'id：<span style="color:#F56C6C">' + item.id + '</span>' + '，';
				result = result + 'name：<span style="color:#F56C6C">' + item.name + '</span>' + '，';
				result = result + 'value：<span style="color:#F56C6C">' + item.value + '</span>';
				return result;
			},
			// 保存
			handleSaveForm() {
				const params = {
					...this.model,
					status: this.alertLevel
				};
				editAlertLog(params).then(res => {
					if (res.code === 200) {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						// 更新列表
						if (this.source === 1) {
							// #ifdef H5 || APP-PLUS
							prevPage.$refs.deviceAlertLog.handleSearch();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.$refs.deviceAlertLog.handleSearch();
							// #endif
						}
						if (this.source === 2) {
							// #ifdef H5 || APP-PLUS
							prevPage.handleSearch();
							// #endif
							// #ifdef MP-WEIXIN
							prevPage.$vm.handleSearch();
							// #endif
						}
						uni.navigateBack();
					} else {
						uni.showToast({
							icon: 'error',
							title: this.$tt('common.saveError')
						});
					}
				});
			},
			// 获取告警级别显示
			getaLertLevelDisplay(item) {
				const { alertLevel } = item;
				if (alertLevel === 1) {
					return this.$tt('alert.notice');
				} else if (alertLevel === 2) {
					return this.$tt('alert.minor');
				} else if (alertLevel === 3) {
					return this.$tt('alert.warning');
				}
			},
			// 获取告警状态显示
			getaStatusDisplay(item) {
				const { status } = item;
				if (status === 1) {
					return this.$tt('alert.noNeed');
				} else if (status === 2) {
					return this.$tt('alert.Unprocessed');
				} else if (status === 3) {
					return this.$tt('alert.processed');
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}

	.alert-edit {
		width: 100%;

		.alert-title {
			display: flex;
			justify-content: space-between;
			background: #fff;
			margin: 14rpx 30rpx 28rpx 30rpx;
			padding: 30rpx 42rpx;
			border-radius: 20rpx;

			.top-title {
				color: #000;
				font-size: 30rpx;
				font-weight: 400;
			}

			.top-num {
				color: #000;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.alert-info,
		.alert-dispose {
			background: #fff;
			margin: 28rpx 30rpx 20rpx 30rpx;
			padding: 0rpx 42rpx 30rpx 42rpx;
			border-radius: 20rpx;

			.title {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: solid 1px #D8D8D8;
				margin-bottom: 30rpx;

				.info-title {
					color: #000;
					font-size: 30rpx;
					font-weight: 400;
				}

				.info-tag {
					width: 141rpx;
					height: 52rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 9rpx;
				}
			}

			.item {
				margin-bottom: 21rpx;
			}
		}

		.alert-dispose {
			margin-top: 20rpx;
		}

		.btn-wrap {
			margin: 30rpx;
		}

		.success {
			color: #fff;
			background-color: #3378FE;
		}

		.warning {
			color: #fff;
			background-color: #f9ae3d;
		}

		.error {
			color: #fff;
			background-color: #f56c6c;
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-form-item__body {
		padding: 5px 0 !important;
	}

	::v-deep .u-textarea__field {
		font-size: 28rpx !important;
	}

	::v-deep .u-button--square {
		border-radius: 10rpx;
	}
</style>