<template>
	<view class="reportedInfo content_box">
		<u-toast ref="uToast" />
		<bs-pageHeader-orderNo :shipmentNo="uc_master_no" />
		<view class="location routine_radius_card">
			<bs-customCell label="当前位置 :" :value="locationInfo.address" labelCol="3" wrapCol="8">
				<view slot="right-icon" class="flex_center">
					<view v-if="isLocation" class="t-icon t-icon-location" @click="getUserSetting" />
					<view v-else>
						<u-loading-icon color="#2E75E6" size="40" mode="semicircle"></u-loading-icon>
					</view>
		
				</view>
			</bs-customCell>
			<map id="myAMap" style="width: 100%;min-height: 150rpx;" :show-location='true'
				:markers="locationInfo.markers" :longitude="locationInfo.longitude" :latitude="locationInfo.latitude">
			</map>
		</view>
		<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"  :required="formData.eventType !== 'LocationReporting'" 
					uploadTitle="上传图片" />
			</view>
			<!-- 备注信息 -->
			<bs-todoRemark ref="myRemark" />
		</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 { reportInfo, getOptionEnum,punchIn } from '../../api/apiList'
	const getUserLocation = require('../../mixins/getUserLocation')
	export default {
		mixins: [getUserLocation],
		options: { styleIsolation: 'shared' },
		data() {
			return {
				formData: {
					eventType: "", //上报类型
				},
				rules: { 'eventType': { required: true } },
				selectedIds: [], //运单id
				uc_master_no: "", //运单组号
				visible: false, //选择上报类型弹窗
				optionEnums: [], // 上报类型枚举
				shipment:{},
				shipmentStatus:'',
				viewEnums: {}, //仅页面显示使用
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.shipment)
			console.log(data)
			this.shipment = data
			this.uc_master_no = data.uc_master_no
			this.shipmentStatus = options.status
			console.log("this.shipmentStatus:" + this.shipmentStatus)
		},
		onReady: function(options) {
			// #ifdef H5
			const time = setInterval(() => {
				if (this.locationInfo.address) {
					this.initMap()//初始化地图
					clearInterval(time)
				}
			}, 1000);
			// #endif	
		},
		methods: {
			//初始化地图
			initMap() {
				const { MapIns, userLocation } = getApp().globalData
				const { latitude, longitude } = userLocation
				this.map = new MapIns.Map('myAMap', {
					center: [longitude, latitude], //中心点坐标
					zoom: 16
				});
				// 构造矢量圆形,如签到范围, 项目根据需要自行添加
				const circle = new MapIns.Circle({
					center: new MapIns.LngLat(longitude, latitude), // 圆心位置
					radius: 100, //半径
					strokeColor: "#F33", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 3, //线粗细度
					fillColor: "#ee2200", //填充颜色
					fillOpacity: 0.35 //填充透明度
				});
				// 构造点标记
				const marker = new MapIns.Marker({
					position: [longitude, latitude],
					anchor: 'bottom-center'
				});
				this.map.add([marker]); //添加多个覆盖物[circle, marker]
			},
			// 返回上一级
			onNavBack() {
				uni.navigateBack()
			},
			//提交数据
			onSubmit() {
				    const { eventType } = this.formData
					const imgInstance = this.$refs.myUploadImg
					const remarkInstance = this.$refs.myRemark
					const remarks = remarkInstance.value
					imgInstance.uploadImage(images => {
						const req = {
							"aux": {
							"uc_master_no":this.uc_master_no,
							"action": this.shipmentStatus,
							"eventType": eventType,
							"images": images,
							"remark": remarks,
							"address": this.locationInfo.address
							 }
						}
						console.log("req：" + req.aux)
						punchIn(req).then(res => {
							var data=res.data.data
							console.log("data：" + data)
							if (res.data.data.success) {
							  uni.showToast({
							    title: '提交成功',
							    duration: 2000
							  });
							//返回上一级
							uni.navigateBack()	
							}else{
								uni.showToast({
								  title: '系统异常，联系管理员',
								  duration: 2000
								});
							}
						})
					})
			},
			//提交数据
			onSubmitOld() {
				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 } = this.locationInfo
						const { viewEnums, selectedIds } = this
						const data = {
							"aux": {
								"eventType": eventType,
								"signType": viewEnums[eventType],
								"content": remarks,
								eventSource: 'DriverApp',
								images,
								longitude,
								latitude,
								address,
								time
							},
							args: {
								"selectedIds": selectedIds
							}
						}
						reportInfo('sign', 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('TransitType').then(res => {
					let datas = res.data.data.datas
					datas.map((item, index) => {
						if (item.value === 'LocationReporting') {
							datas.splice(index, 1)
							datas.unshift(item)
						}
					})
					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>
