<template>
	<view >
		<view class="check-message-detail">
			<view class="detail-content">
				<view class="detail-item" >
				<text class="title">设备编号</text>
				<text>312022040441</text>
				</view>
				<view class="detail-item" >
				<text class="title">设备类型</text>
				<text>燃气智能监测终端</text>
				</view>
				<view class="detail-item" >
						<text class="title">设备位置</text>
						<text>职工食堂</text>
				</view>
				<view class="detail-item" >
						<text class="title">井编号</text>
						<text>1</text>
				</view>
				<view class="detail-item" >
						<text class="title">井类型</text>
						<text>其他</text>
				</view>
				<view class="detail-item" >
						<text class="title">井名称</text>
						<text>其他</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警原因</text>
						<text>浓度超限</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警数值</text>
						<text>90</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警等级</text>
						<text>一级告警</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警时间</text>
						<text>2022-10-29 12:25:00</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警状态</text>
						<text>历史告警</text>
				</view>
				<view class="detail-item" >
						<text class="title">告警取消原因</text>
						<text>已处理</text>
				</view>
				<view class="detail-item" >
						<text class="title">备注</text>
						<text>无</text>
				</view>
				<view class="detail-item" >
						<text class="title">处置人</text>
						<text>张三</text>
				</view>
				<view class="detail-item" >
						<text class="title">处置时间</text>
						<text>2022-10-29 16:25:00</text>
				</view>
				<view class="detail-item" >
						<text class="title">消警时间</text>
						<text>2022-10-29 16:25:00</text>
				</view>
				<button class="button-bottom" v-if="messageId === '1'" @click="ispassShow = true">取消告警</button>
			</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="model1"
				:rules="rules"
				ref="form1"
		    		>
				<u-form-item
				label="告警取消原因"
				prop="userInfo.sex"
				borderBottom
				@click="showSex = true;"
				ref="item1"
			  >
				<u-input
					v-model="model1.userInfo.sex"
					disabled
					placeholder="请选择告警取消原因"
					border="none"
					suffixIcon="arrow-right"
				></u-input>
			</u-form-item>
			<u-form-item
				label="备注"
				prop="userInfo.name"
				borderBottom
				ref="item1"
		>
			<u-input
			v-model="model1.userInfo.name"
			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 {getMessageInfo} from '@/api/list.js'
	export default {
		data() {
			return {
				info: {
					// applyNo: 1254611,
					// status: 2,
					// staffCode: 123456,
					// staffName: '张三',
					// staffPhone: 123456789,
					// visitorName: '李四',
					// visitorIdCard:1234567894662552,
					// visitorPhone:123456799,
					// visitReason:'商务会议',
					// visitPosition:'一楼',
					// inTime:'2022-09-16 13:28:41',
					// outTime: "2022-10-06 13:28:46",
     //                remarks:'无'
				},
				color:'',
				status:'',
				messageId:'',
				ispassShow: false,
				showSex: false,
				model1: {
							userInfo: {
								name: '',
								sex: '',
							},
							},
				actions: [{
							name: '已处理',
							},
							{
							name: '无需处理',
							},
							],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写备注',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					required: true,
					message: '请选择如何处理',
					trigger: ['blur', 'change']
				},
			},
			}
		},
		 onLoad(option){
		   this.messageId = option.messageId
		},
	   async onShow(){
			// this.info = await getMessageInfo({messageId:this.messageId})
			// if(this.info.visitorApplyStatus == '1'){
			//  this.status = '申请已提交'
			//  this.color = 'blue'
			// }else if(this.info.visitorApplyStatus == '2'){
			//   this.status = '申请已通过'
			//   this.color = 'green'
			// }else {
			//   this.status = '申请未通过'
			//   this.color = 'red'
			// }
		},
		methods: {
			// 点击确认
          possQr() {},
		  sexSelect(e) {
		  		this.model1.userInfo.sex = e.name
		  		this.$refs.form1.validateField('userInfo.sex')
		  },
		}
	}
</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 {
		width: 200rpx;
		background-color: red;
		color: #fff;
	}
	.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>