<template>
	<view >
		<view class="check-message-detail">
			<view class="detail-content">
				<view class="detail-item" >
				<text class="title">设备编号</text>
				<text>{{info.devcode}}</text>
				</view>
				<view class="detail-item" >
				<text class="title">设备类型</text>
				<text>{{info.alarmContentName}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">设备位置</text>
						<text>{{info.position}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">井编号</text>
						<text>{{info.wellCode}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">井类型</text>
						<text>其他</text>
				</view>
				<view class="detail-item" >
						<text class="title">井名称</text>
						<text>{{timeInfo.wellName}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警原因</text>
						<text>{{info.alarmTypeName}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警数值</text>
						<text>{{info.alarmValue}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警等级</text>
						<text>{{info.alarmLevel}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警时间</text>
						<text>{{info.alarmTime}}</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警状态</text>
						<text>{{info.statusName}}</text>
				</view>
				<view class="detail-item" v-if="info.status !== '1'">
						<text class="title">告警取消原因</text>
						<text>{{info.jobStatusName}}</text>
				</view>
				<view class="detail-item" v-if="info.status !== '1'  && info.status !== '0'">
						<text class="title">备注</text>
						<text>{{timeInfo.handleMessage}}</text>
				</view>
				<view class="detail-item" v-if="info.status !== '1' && info.status !== '0'">
						<text class="title">处置人</text>
						<text>{{timeInfo.handleJobPerson}}</text>
				</view>
				<view class="detail-item" v-if="info.status !== '1' && info.status !== '0'">
						<text class="title">处置时间</text>
						<text>{{timeInfo.alarmTime}}</text>
				</view>
				<view class="detail-item" v-if="info.status === '0'">
						<text class="title">消警时间</text>
						<text>{{timeInfo.alarmTime}}</text>
				</view>
				<view class="button-bottom" v-if="messageId === '1'" @click="ispassShow = true">取消告警</view>
			</view>
		</view>
		<u-popup
		  :show="ispassShow"
		  mode="bottom"
		  :round="10"
		  :closeOnClickOverlay="false"
		  @close="close"
		>
		  <view class="popup">
			 <view class="title">取消告警</view>
		    <u-form
				labelPosition="left"
				labelWidth="200rpx"
				:model="userInfo"
				:rules="rules"
				ref="form1"
		    		>
				<u-form-item
				label="告警取消原因"
				prop="name"
				borderBottom
				@click="showSex = true;"
				ref="item1"
			  >
				<u-input
					v-model="userInfo.name"
					disabled
					placeholder="请选择告警取消原因"
					border="none"
					suffixIcon="arrow-right"
				></u-input>
			</u-form-item>
			<u-form-item
				label="备注"
				prop="handleMessage"
				borderBottom
				ref="item1"
		>
			<u-input
			v-model="userInfo.handleMessage"
			border="none"
			></u-input>
		</u-form-item>
		    </u-form>
		    <view class="footer">
			<button class="allow refuse" @click="ispassShow = false"> 取消</button>
			<button class="allow" @click="possQr"> 确认</button>
		    </view>
		  </view>
		</u-popup>
			<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择处理状态"
				@close="showSex = false"
				@select="sexSelect"
					/>
	</view>
</template>

<script>
	import {getJobInfo, getCancelAlarm} from '@/api/check.js'
	export default {
		data() {
			return {
				info: uni.getStorageSync('rowInfo') || {},
				messageId:'',
				ispassShow: false,
				showSex: false,
				timeInfo:{}, // 获取告警时间对象
				userInfo: {
					name: '',
					handleMessage: '',
					jobStatus:''
				},
				actions: [{
							name: '已处理',
							id: '3'
							},
							{
							name: '无需处理',
							id: '4'
							},
							],
			rules: {
				'handleMessage': {
					type: 'string',
					required: true,
					message: '请填写备注',
					trigger: ['blur', 'change']
				},
				'name': {
					type: 'string',
					required: true,
					message: '请选择如何处理',
					trigger: ['blur', 'change']
				},
			},
			}
		},
		 onLoad(option){
		   this.messageId = option.messageId
		   
		},
	   async onShow(){
			if(uni.getStorageSync('rowInfo').jobId !== '') {
			  const res = await getJobInfo({id:uni.getStorageSync('rowInfo').jobId})
				 this.timeInfo = res[0]
			}
		},
		methods: {
			// 点击确认
          // 点击取消告警弹窗中的确认按钮
          async possQr() {
            if(this.userInfo.jobStatus.trim() !== ''){
			  delete this.userInfo.name
          	  const res = await getCancelAlarm({...this.userInfo , id:this.info.id})
          	  this.ispassShow = false  
          	  this.getAlarmList()
            }else {
          	  uni.showToast({
          	  	title: `告警取消原因必选`,
          	  	icon: 'none',
          	  	duration: 2000,
          	  })
            }  
          },
		  
		  sexSelect(e) {
		  		this.userInfo.name = e.name
		  		this.userInfo.jobStatus = e.id
		  		this.$refs.form1.validateField('name')
		  },
		}
	}
</script>

<style lang="scss" scoped>
	.check-message-detail {
		padding: 18rpx;
		height: 100%;
		.title {
			font-weight: 600;
		}
		.detail-content {
			padding: 22rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.detail-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 44rpx;
		}
	}
	.button-bottom {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 110rpx;
		height: 50rpx;
		color: #fff;
		line-height: 50rpx;
		text-align: center;
		border-radius: 20rpx;
		font-size: 22rpx;
		background-color: red;
	}
	.popup {
		.title {
			font-size: 36rpx;
			color: #000;
			font-weight: 600;
			margin-bottom: 32rpx;
			text-align: center;
		}
		.content {
			font-size: 32rpx;
			color: #000;
			margin-bottom: 42rpx;
			text-align: center;
		}
	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		.allow {
			color: rgba(197, 0, 10, 1);
			height: 68rpx;
			padding: 16px 19px;
			line-height: 0;
			border: 1rpx solid rgba(197, 0, 10, 1);
			margin: 0 40rpx;
		}
		.refuse {
			color: rgba(142, 142, 142, 1.0);
			border: 1rpx solid rgba(142, 142, 142, 1.0);
			background-color: transparent;
		}
		}
	}
</style>
<style lang="scss">
	.u-popup__content {
	  padding: 30rpx 40rpx;
		// padding-bottom: 0;
	}
</style>
