<template>
	<view class="transferChange content_box ">
		<u-toast ref="uToast" />
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="location routine_radius_card flex_center flex_sb">
			<view class="t-icon t-icon-current-location" />
			<view class="address">{{locationInfo.address}}</view>
			<view v-if="!isView">
				<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>
		</view>
		<!-- 中转明细-->
		<view class="transfer-datail">
			<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
				<template v-if="isView">
					<u-form-item prop="stop" :required="!isView" label="中转地址" labelWidth="30%" borderBottom>
						<u-input border="none" readonly inputAlign="left" placeholder="选择中转地址"
							placeholderClass="input-tip" :value="transferAddress.name" />
					</u-form-item>
				</template>
				<template v-else>
					<u-form-item prop="stop" :required="!isView" label="中转地址" labelWidth="30%" borderBottom>
						<view @click="onNavTransferDetail">
							<u-input border="none" readonly inputAlign="left" placeholder="选择中转地址"
								placeholderClass="input-tip" :value="transferAddress.name" />
						</view>
						<u-icon slot="right" name="arrow-right" @click="onNavTransferDetail" />
					</u-form-item>
				</template>
				<!-- 中转换车显示司机信息 -->
				<template v-if="isTransfer">
					<u-form-item prop="truckName" :required="!isView" label="车牌号" labelWidth="30%" borderBottom>
						<u-input border="none" :readonly="isView" inputAlign="left" placeholder="输入车牌号"
							placeholderClass="input-tip" v-model="formData.truckName" holdKeyboard/>
					</u-form-item>
					<u-form-item prop="driver1Name" :required="!isView" label="司机姓名" labelWidth="30%" borderBottom>
						<u-input border="none" :readonly="isView" inputAlign="left" placeholder="输入姓名"
							placeholderClass="input-tip" v-model="formData.driver1Name" holdKeyboard/>
					</u-form-item>
					<u-form-item prop="driver1Tel" :required="!isView" label="司机电话" labelWidth="30%"
						:borderBottom="isView">
						<u-input border="none" :readonly="isView" type="number" inputAlign="left" placeholder="输入手机号"
							placeholderClass="input-tip" v-model="formData.driver1Tel" holdKeyboard/>
					</u-form-item>
				</template>
				<!-- 查看页面时显示中转时间 -->
				<template v-if="isView">
					<u-form-item prop="time" label="中转时间" labelWidth="30%">
						<u-input border="none" readonly inputAlign="left" v-model="formData.time" />
					</u-form-item>
				</template>
			</u--form>
		</view>
		<!-- 底部按钮 -->
		<view class="operation-btn flex_sb" v-if="!isView">
			<button class="backBtn common_btn" @click="onNavBack">返回</button>
			<button class="submitBtn common_btn" @click="onSubmitForm">确认</button>
		</view>
	</view>
</template>

<script>
	import { reportInfo, searchTransferAddress } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	const getUserLocation = require('../../mixins/getUserLocation')
	const app = getApp()
	export default {
		mixins: [getUserLocation],
		data() {
			return {
				formData: {
					stop: "", //中转地址id
					driver1Name: "", //司机姓名
					driver1Tel: "", //司机手机号
					truckName: "", //车牌号
					time: '', //中转时间
				},
				rules: {
					'stop': { required: true },
					'driver1Name': { required: true },
					'driver1Tel': { required: true },
					'truckName': { required: true }
				},

				isView: false, //是否为查看页面
				isTransfer: false, //是否为中转换车
				action: '', //当前操作类型
				selectedIds: [], //当前运单id
				shipmentNo: '', //运单号				
				transferAddress: {}, //中转地址				
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.data)
			let isTransfer = false
			if (data.selectedId) { //编辑页面
				isTransfer = data.action === 'transferAndChangeTruck' //判断是否为中转换车				
				this.selectedIds = [data.selectedId]
				this.action = data.action
				this.isView = false
				this.getUserSetting()
			} else { //查看页面
				isTransfer = data.eventType === 'TransferAndChangeTruck' //判断是否为中转换车	
				this.isView = true
				this.initView(data, isTransfer)
			}
			this.isTransfer = isTransfer
			this.shipmentNo = app.globalData.shipmentInfo.shipmentNo
			const title = isTransfer ? '中转换车' : '中转卸货'
			this.setNavTitle(title)
		},
		onShow() { //自定义分配信息
			if (!this.isView) {
				const { transferAddress } = app.globalData
				this.formData.stop = transferAddress.id
				this.transferAddress = transferAddress
			}
		},
		methods: {
			//设置页面头部标题
			setNavTitle(title) {
				uni.setNavigationBarTitle({
					title: title,
				})
			},
			initView(data, isTransfer) {
				const time = formatGMT(data.eventTime)
				const contentArr = data.content.split(',')
				this.transferAddress.name = contentArr[0]
				this.locationInfo.address = data.address
				this.formData.time = time
				if (isTransfer) {
					this.formData.truckName = contentArr[1] //车牌号
					this.formData.driver1Tel = contentArr[3] //司机手机号	
					this.formData.driver1Name = contentArr[2] //司机姓名
				}
			},
			// 提交表单数据
			onSubmitForm() {
				this.$refs.myForm.validate().then(res => {
					const { stop, driver1Name, driver1Tel, truckName } = this.formData
					const { longitude, latitude, address, time } = this.locationInfo
					const { isTransfer, action } = this
					let baseData = {
						"aux": {
							stop,
							longitude,
							latitude,
							address,
							time,
							eventSource: 'DriverApp'							
						},
						'args': {
							"selectedIds": this.selectedIds
						}
					}
					if (isTransfer) {
						baseData.aux = {
							...baseData.aux,
							driver1Name,
							driver1Tel,
							truckName,							
						}
					}
					reportInfo(action, baseData).then(res => {
						if (res.data.messageType === 'success') {
							uni.showToast({
								title: '操作成功',
								duration: 3000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						message: '请完善必填信息',
					})
				})
			},

			//返回上一级页面
			onNavBack() {
				uni.navigateBack()
			},
			//跳转地址详情
			onNavTransferDetail() {
				const title = this.isTransfer ? '中转换车' : '中转卸货'
				const data = { title, id: this.formData.stop }
				uni.navigateTo({
					url: `/subpkg/transferAddressDetail/transferAddressDetail?data=${JSON.stringify(data)}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.transferChange {
		.location {
			.t-icon-current-location {
				min-width: 50rpx;
				min-height: 50rpx;
			}

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

			.address {
				margin: 0 20rpx
			}
		}

		/deep/.transfer-datail {
			padding: 0 20rpx;
			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 {
				padding: 30rpx 0;
			}

			.u-icon {
				margin-left: 20rpx;
			}
		}
		
		.operation-btn {
			min-height: 500rpx;
		}
	}
</style>
