<template>
	<view class="container">
		<uni-list class="custom-uni-list">
			<uni-list-item :height="55" :title="$t('index.model')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.modelType" type="text"
						:placeholder="$t('index.enter')+$t('index.model')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.number')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.count" type="number"
						:placeholder="$t('index.enter')+$t('index.number')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.car-number')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.carNumber" type="text"
						:placeholder="$t('index.enter')+$t('index.car-number')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.consignee')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.billLadingPerson" type="text"
						:placeholder="$t('index.enter')+$t('index.consignee')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.phone')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.phone" type="number"
						:placeholder="$t('index.enter')+$t('index.phone')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.ID-card')">
				<template v-slot:footer>
					<input class="custom-uni-value" v-model="deliveryInfo.cardId" type="idcard"
						:placeholder="$t('index.enter')+$t('index.ID-card')" />
				</template>
			</uni-list-item>
			<uni-list-item :height="55" :title="$t('index.pickup-date')" showArrow>
				<template v-slot:footer>
					<picker mode="date" style="flex: auto" :value="deliveryInfo.ladingDate" @change="onDateChange">
						<view class="custom-uni-value">{{deliveryInfo.ladingDate}}</view>
					</picker>
				</template>
			</uni-list-item>
		</uni-list>

		<view class="btn-box">
			<button class="btn" @click="submit">{{$t('index.sure')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		addDelivery,
		getByOrderIdAndType,
		updateSelf
	} from '@/config/api.js'
	import {
		Moment
	} from '@/utils/moment.js'
	let orderId = null;
	let addressType = null;
	export default {
		name: 'delivery',
		data() {
			return {
				deliveryInfo: {
					modelType: '',
					count: '',
					carNumber: '',
					billLadingPerson: '',
					phone: '',
					cardId: '',
					ladingDate: new Moment().format('YYYY-MM-DD')
				},
				// startDate: new Moment().format('YYYY-MM-DD')
			}
		},
		methods: {
			getDeliveryInfo() {
				getByOrderIdAndType({
					orderId,
					ladingType: 2
				}).then(({
					content
				}) => {
					this.deliveryInfo = content
				})
			},
			onDateChange(e) {
				this.deliveryInfo.ladingDate = e.detail.value
			},
			submit() {
				if (!this.deliveryInfo.modelType.trim()) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('index.model'),
						icon: 'none'
					});
					return
				}
				if (!this.deliveryInfo.count) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('index.number'),
						icon: 'none'
					});
					return
				}
				if (!this.deliveryInfo.carNumber.trim()) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('index.car-number'),
						icon: 'none'
					});
					return
				}
				if (!this.deliveryInfo.billLadingPerson.trim()) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('index.consignee'),
						icon: 'none'
					});
					return
				}
				const validateMobile = /^[1]([3-9])[0-9]{9}$/;
				const validatePhone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
				if (!validateMobile.test(this.deliveryInfo.phone) && !validatePhone.test(this.deliveryInfo.phone)) {
					uni.showToast({
						title: this.$t('index.msg-mobile-correct'),
						icon: 'none'
					});
					return
				}
				const validateIdentify =
					/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
				if (!validateIdentify.test(this.deliveryInfo.cardId)) {
					uni.showToast({
						title: this.$t('index.msg-ID-card-correct'),
						icon: 'none'
					});
					return
				}
				if (addressType) {
					updateSelf({
						...this.deliveryInfo,
						ladingType: 2,
						orderId
					}).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.success')
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				} else {
					addDelivery({
						...this.deliveryInfo,
						ladingType: 2,
						orderId
					}).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.success')
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				}
			}
		},
		onLoad(options) {
			orderId = options.id
			if (options.type) {
				addressType = 'update'
				this.getDeliveryInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #FFFFFF;

		/deep/ .file-picker__progress {
			display: none;
		}
	}

	// .upload-box {
	// 	padding: 12px 15px 0;

	// 	.upload-title {
	// 		font-size: 14px;
	// 		color: #B60001;;
	// 	}

	// 	.upload {
	// 		margin-top: 12px;
	// 	}
	// }
	.btn-box {
		margin-top: 100rpx;
		padding: 0 30rpx;

		.btn {
			background-color: #B60001;
			font-size: 14px;
			color: #FFFFFF;

			&::after {
				border-radius: 0;
				border: 0;
			}
		}
	}
</style>