<template>
	<view class="reportedInfo content_box">
		<u-toast ref="uToast" />
		<view class="form-content">
			<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
				<u-form-item prop="eventType" required label="上报类型" labelWidth="40%">
					<view @click="onVisible">
						<u-input border="none" readonly inputAlign="left" placeholder="请选择上报类型"
							placeholderClass="input-tip" :value="viewEnums[formData.eventType]" />
					</view>
					<u-icon slot="right" name="arrow-right" @click="onVisible" />
				</u-form-item>
			</u--form>
		</view>
		<view class="reported-detail">
			<!-- 上传图片 -->
			<view class="uploader-img">
				<bs-uploader ref="myUploadImg" uploadTitle="上传图片" />
			</view>
			<!-- 备注信息 -->
			<bs-todoRemark ref="myRemark" placeholder="移动端上报"/>
		</view>
		<!-- 底部操作按钮 -->
		<view class="operation-btn flex_sb">
			<button class="backBtn common_btn" @click="onNavBack">返回</button>
			<button class="submitBtn common_btn" @click="onSubmit">提交</button>
		</view>
		<!-- 上报类型选择 -->
		<bs-selectPopup ref="mySelectPop" popTitle="请选择上报类型" :selectEnum="optionEnums" :visible="visible"
			@onVisible="onVisible" @onConfirm="onConfirmSelect" />
	</view>
</template>

<script>
	import { reportOrder, getOptionEnum } from '../../api/apiList'
	const getUserLocation = require('../../mixins/getUserLocation')
	export default {
		mixins: [getUserLocation],
		options: { styleIsolation: 'shared' },
		data() {
			return {
				orderId: '',
				formData: {
					eventType: "", //上报类型
				},
				rules: { 'eventType': { required: true } },
				visible: false, //选择上报类型弹窗
				optionEnums: [], // 上报类型枚举

				viewEnums: {}, //仅页面显示使用
			}
		},
		onLoad: function(options) {
			this.orderId = options.orderId
		},
		methods: {
		
			//返回上一级
			onNavBack() {
				uni.navigateBack()
			},
			
			//提交数据
			onSubmit() {
				this.$refs.myForm.validate().then(res => {
					const { eventType } = this.formData
					const imgInstance = this.$refs.myUploadImg
					const remarkInstance = this.$refs.myRemark
					const remarks = remarkInstance.value
					imgInstance.uploadImage(images => {
						const { longitude, latitude, address, time } = getApp().globalData.userLocation
						const { viewEnums, selectedIds } = this
						const data = {
							"aux": {
								"eventType": eventType,
								"signType": viewEnums[eventType],
								"content": remarks,
								eventSource: 'DriverApp',
								images,
								longitude,
								latitude,
								address,
								time
							},
							args: {
								"selectedIds": [this.orderId]
							}
						}
						reportOrder(data).then(res => {
							if (res.data.messageType === 'success') {
								uni.showToast({
									title: '上报成功',
									duration: 3000
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						})
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						message: '请选择上报类型',
					})
				})
			},
			//上报类型选择
			onVisible() {
				const { optionEnums, visible } = this
				if (visible) { //关闭
					this.visible = false
				} else {
					if (!optionEnums.length) {
						this.getOptions()
					} else {
						const mySelectPop = this.$refs.mySelectPop
						mySelectPop.setSelect(this.formData.eventType)
					}
					this.visible = true
				}
			},
			getOptions() {
				getOptionEnum('OrderEventType').then(res => {
					let datas = res.data.data.datas
					let viewEnums = {}
					datas.map(item => {
						viewEnums[item.value] = item.label
					})
					this.optionEnums = datas
					this.viewEnums = viewEnums
				})
			},
			//确认选择
			onConfirmSelect(value) {
				this.formData.eventType = value
				this.visible = false
			},
		}
	}
</script>

<style lang="scss">
	.reportedInfo {
		font-size: 28rpx;

		/deep/.custom-cell-row {
			margin: 0 0 24rpx 0;

			.custom-cell-label {
				color: #8C8C8C;
			}

			.t-icon-location {
				width: 50rpx;
				height: 50rpx;
			}
		}

		/deep/.form-content {
			padding: 0 40rpx;
			background-color: #ffffff;
			margin: 25rpx 0;

			.input-tip {
				font-size: 28rpx;
				color: #BFBFBF;
			}

			.u-form-item__body__left__content__label {
				color: #8C8C8C;
				font-size: 28rpx;
			}

			.u-form-item__body__left__content__required {
				font-size: 28rpx !important;
				top: auto !important;
				left: -16rpx !important;
			}

			.u-icon {
				margin-left: 20rpx;
			}
		}

		.reported-detail {
			background-color: #FFFFFF;
			padding: 20rpx 25rpx;
		}

		.operation-btn {
			position: sticky;
			bottom: 0rpx;
			height: auto;
			background-color: rgba(255, 255, 255, 0.08);
			padding: 24rpx 0;
			z-index: 98;

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(12rpx);
				z-index: 99;
			}

			.common_btn {
				margin-top: 0;
				z-index: 100;
			}
		}
	}
</style>
