<template>
	<view class="event-handle">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="报警处理"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>

		<block>
			<view class="event-info">
				<view class="form-item">
					<view class="form-left">
						<text class="form-left-text">{{eventDetail.voice_msg}}</text>
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						<text class="form-left-text">事件类型：</text>
					</view>
					<view class="form-right">
						<view v-for="cate in eventDetail.cates_">{{cate.name}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						<text class="form-left-text">事件对象：</text>
					</view>
					<view class="form-right">
						<view v-if="eventDetail.obj_cate==='opl'">作业</view>
						<view v-else-if="eventDetail.obj_cate==='people'">人员</view>
						<view v-else>其他</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						<text class="form-left-text">报警区域：</text>
					</view>
					<view class="form-right">
						<view v-if="eventDetail.area_!=null">{{eventDetail.area_.name}}</view>
					</view>
				</view>
				<view class="form-item" v-if="eventDetail.obj_cate==='people'">
					<view class="form-left">
						<text class="form-left-text">触发人：</text>
					</view>
					<view class="form-right">
						<view v-if="eventDetail.employee_!=null">{{eventDetail.employee_.name}}</view>
					</view>
				</view>
				<view class="form-item" v-if="eventDetail.obj_cate==='people'">
					<view class="form-left">
						<text class="form-left-text">触发人部门：</text>
					</view>
					<view class="form-right">
						<view v-if="eventDetail.employee_!=null">{{eventDetail.employee_.belong_dept_name}}</view>
					</view>
				</view>
				<view class="form-item" v-if="eventDetail.obj_cate==='opl'">
					<view class="form-left">
						<text class="form-left-text">触发事件：</text>
					</view>
					<view class="form-right">
						<view v-if="eventDetail.opl_nmae">{{eventDetail.operation_name}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-left">
						<text class="form-left-text">触发时间：</text>
					</view>
					<view class="form-right">
						<view>{{eventDetail.create_time}}</view>
					</view>
				</view>
				<view class="form-item" v-if="eventDetail.global_img!==null&&eventDetail.global_img!==undefined">
					<view class="form-left form-left-img">
						<text class="form-left-text">事件截图：</text>
					</view>
					<view class="form-right" style="">
						<image mode="aspectFit" class="form-img" :src="eventDetail.global_img" @click="preView(eventDetail.global_img)"></image>
						<image mode="aspectFit" class="form-img form-img-face" v-if="eventDetail.face_img!==null&&eventDetail.face_img!==undefined" 
						:src="eventDetail.face_img" @click="preView(eventDetail.face_img)"></image>
					</view>
				</view>
			</view>
		</block>
		<view class="event-info">
			<view class="form-item" style="height: 300rpx;">
				<view class="form-left-text">
					<text class="star">*</text>
					<text>处理描述</text>
				</view>
				<textarea class="apply-reason-text" v-model="form.handle_desc" maxlength="250" placeholder="请输入处理意见" />
			</view>
			<view class="form-item">
				<view class="form-left-text">
					<text class="star">*</text>
					<text>事件标记</text>
				</view>
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="10" checked/>正常
					</label>
					<label class="radio">
						<radio value="20" />误报
					</label>
				</radio-group>
			</view>
			<view class="btn" style="display: flex;justify-content: space-between;margin-top: 20rpx;">
				<button class="mini-btn" size="mini" type="primary" @click="eventHandle">处理</button>
			</view>
			<img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view>
		</view>
	</view>
</template>

<script>
	import imgView from "@/components/image-view/image-view.vue";
	export default {
		name: "eventHandle",
		components:{
			imgView
		},
		data() {
			return {
				form: {
					handle_desc: '',
					mark: 10
				},
				preImgSrc:'',
				// preImg:false,
				eventId: null,
				eventDetail: {},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(params) {
			this.eventId = params.eventId;
		},
		onShow() {
			this.getEventItem();
		},
		methods: {
			radioChange(val) {
				this.form.mark=val
			},
			cancelPreView(){
				this.preImgSrc = '';
			},
			//自带preview，但是图片有点小
			preView(srcImg){
				let imgs = [];
				imgs.push(srcImg)
				uni.previewImage({
					urls: imgs,
					current: 0,
				});
			},
			// preView(srcImg){
			// 	this.preImgSrc = srcImg;
			// 	this.$refs.imgPreView.open();
			// },
			cancelPreImg(){
				this.preImg = false;
			},
			//报警详情
			getEventItem() {
				this.$u.api.eventtItem(this.eventId).then((res) => {
					this.eventDetail = res;
					if(res.global_img){
						res.global_img = this.vuex_host + res.global_img
					}
					if(res.face_img){
						res.face_img = this.vuex_host + res.face_img
					}
					debugger;
					console.log(res)
				});
			},
			eventHandle() {
				debugger;
				console.log(this.form)
				this.$u.api.eventtHandle(this.eventId, this.form).then(res => {
					this.goBack()
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style scoped>
	/* 主体 */
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}

	.handleBtn {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.event-handle {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}


	>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.event-info {
		width: 720rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.star {
		color: red;
	}

	.top-title-text {
		padding-left: 24rpx;
		position: relative;
		font-family: PingFang-SC-Medium;
		font-size: 34rpx;
		line-height: 72rpx;
		color: #383838;
	}

	.top-title-text::before {
		content: "";
		width: 6rpx;
		height: 29rpx;
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%);
		border-radius: 3rpx;
		display: block;
		position: absolute;
		left: -4rpx;
		top: 22rpx;
	}

	.form-item {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		min-height: 80upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.form-left-img {
		height: 80upx;
		line-height: 80upx;
	}

	.form-left-text {
		color: #212121;
	}

	.form-right {
		margin-left: 20rpx;
		flex: 1;
		color: #414141;
	}

	.form-right input {

		font-size: 30rpx;
	}

	.form-right {
		flex: 1;
		color: #414141;
	}

	.form-date>>>.uni-date__x-input {
		height: 97rpx;
		font-size: 30rpx;
	}

	.form-date>>>.uni-icons {
		display: none;
	}

	.event-handle>>>uni-input {
		font-size: 30rpx;
	}

	.apply-reason-text {
		width: 653rpx;
		height: 179rpx;
		background-color: #f6f8fc;
		border: solid 1rpx #e5e5e5;
		margin-top: 21rpx;
		padding: 14rpx 24rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.apply_require {
		margin-top: 0rpx !important;
	}

	.form-img {
/* 		width: 600upx; */
		height: 320upx;
	}
	.form-img-face{
		width: 250upx;
	}
	/* radios */

	uni-radio-group {
		margin-left: 30upx;
	}

	.uni-label-pointer {
		width: 150upx;
		display: inline-block;
	}

</style>
