<template>
	<view class="container">
		<view class="upload-box" style="margin-bottom:50px">
			<view class="upload-title">{{$t('index.driver-info')}}</view>
			<div style="margin:10px 0">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd">
						<radio style="transform:scale(0.8)" value="1" :checked="driveType === '1'" />
						{{$t('index.carrier-owned')}}
					</label>
					<label style="margin-left:20px" class="uni-list-cell uni-list-cell-pd">
						<radio style="transform:scale(0.8)" value="2" :checked="driveType === '2'" />
						{{$t('index.carrier-other')}}
					</label>
				</radio-group>
			</div>
			<template v-if="driveType === '1'">
				<uni-list class="custom-uni-list">
					<uni-list-item :title="$t('index.car-number')">
						<template v-slot:footer>
							<input class="custom-uni-value" v-model="driverForm.carNumber"
								:placeholder="$t('index.enter')+$t('index.car-number')" />
						</template>
					</uni-list-item>
					<uni-list-item :title="$t('index.driver-name')">
						<template v-slot:footer>
							<input class="custom-uni-value" v-model="driverForm.billLadingPerson"
								:placeholder="$t('index.enter')+$t('index.driver-name')" />
						</template>
					</uni-list-item>
					<uni-list-item :title="$t('index.phone')">
						<template v-slot:footer>
							<input class="custom-uni-value" v-model="driverForm.phone"
								:placeholder="$t('index.enter')+$t('index.phone')" />
						</template>
					</uni-list-item>
					<uni-list-item :title="$t('index.ID-card')">
						<template v-slot:footer>
							<input class="custom-uni-value" v-model="driverForm.cardId"
								:placeholder="$t('index.enter')+$t('index.ID-card')" />
						</template>
					</uni-list-item>
					<uni-list-item :title="$t('index.pickup-date')">
						<template v-slot:footer>
							<uni-datetime-picker type="date" style="flex: auto;text-align:right"
								v-model="driverForm.ladingDate">
								<view v-if="driverForm.ladingDate" class="deposit-value">{{driverForm.ladingDate}}
								</view>
								<view v-else style="color:#666;font-size:14px">
									{{$t('index.select')}}{{$t('index.pickup-date')}}
								</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</template>
			<template v-if="driveType === '2' && carrierForm.customerCode">
				<view class="carrier-chose">
					<text>{{$t('index.carrier-selected')}}：{{carrierForm.customerName}}</text>
					<text class="delete-text" @click="onDeteleCarrier">{{$t('index.delete')}}</text>
				</view>
				<uni-list class="custom-uni-list">
					<uni-list-item :title="$t('index.carrier-code')"
						:rightText="carrierForm.customerCode"></uni-list-item>
					<uni-list-item :title="$t('index.carrier-fee')">
						<template v-slot:footer>
							<input class="custom-uni-value" v-model="carrierForm.carrierCost"
								:placeholder="$t('index.enter')+$t('index.carrier-fee')" />
						</template>
					</uni-list-item>
					<uni-list-item :title="$t('index.delivery-date')">
						<template v-slot:footer>
							<uni-datetime-picker type="date" style="flex: auto;text-align:right"
								v-model="carrierForm.ladingDate">
								<view v-if="carrierForm.ladingDate" class="deposit-value">{{carrierForm.ladingDate}}
								</view>
								<view v-else style="color:#666;font-size:14px">
									{{$t('index.select')}}{{$t('index.delivery-date')}}
								</view>
							</uni-datetime-picker>
						</template>
					</uni-list-item>
				</uni-list>
			</template>
			<template v-if="driveType === '2' && !carrierForm.customerCode">
				<view class="carrier-table-box header">
					<text>{{$t('index.carrier-code')}}</text>
					<text>{{$t('index.carrier-name')}}</text>
					<text>{{$t('index.operate')}}</text>
				</view>
				<view class="carrier-table-box list" v-for="item in carrierList" :key="item.customerCode">
					<text>{{item.customerCode}}</text>
					<text>{{item.customerName}}</text>
					<text style="color: #B60001;" @click="onChoseCarrier(item)">{{$t('index.operate')}}</text>
				</view>
			</template>
		</view>

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

<script>
	import {
		getPageCarrier,
		addDelivery
	} from '@/config/api.js'
	let receivingId = '',
		sendGoodsId = '';
	export default {
		name: 'carrier',
		data() {
			return {
				driveType: '1',
				carrierList: [],
				driverForm: {
					carNumber: '',
					billLadingPerson: '',
					phone: '',
					cardId: '',
					ladingDate: ''
				},
				carrierForm: {
					customerCode: '',
					customerName: '',
					carrierCost: undefined,
					ladingDate: ''
				},
			}
		},
		methods: {
			submitReceiving() {
				if (this.driveType === '1') {
					if (!this.driverForm.carNumber) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.car-number'),
							icon: 'none'
						});
						return
					}
					if (!this.driverForm.billLadingPerson) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.driver-name'),
							icon: 'none'
						});
						return
					}
					if (!this.driverForm.phone) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.phone'),
							icon: 'none'
						});
						return
					}
					if (!this.driverForm.cardId) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.ID-card'),
							icon: 'none'
						});
						return
					}
					if (!this.driverForm.ladingDate) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.date'),
							icon: 'none'
						});
						return
					}
					this.onsubmit(this.driverForm, 1)
				} else {
					if (!this.carrierForm.customerCode) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.carrier-code'),
							icon: 'none'
						});
						return
					}
					if (!this.carrierForm.carrierCost) {
						uni.showToast({
							title: this.$t('index.enter') + this.$t('index.carrier-fee'),
							icon: 'none'
						});
						return
					}
					if (!this.carrierForm.ladingDate) {
						uni.showToast({
							title: this.$t('index.select') + this.$t('index.pickup-date'),
							icon: 'none'
						});
						return
					}
					this.onsubmit(this.carrierForm, 2)
				}
			},
			onsubmit(form, type) {
				addDelivery({
					...form,
					carrierType: type,
					sendGoodsId: sendGoodsId,
					orderId: receivingId
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.success')
						});
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.getRecordDetail()
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			getCarrierList() {
				getPageCarrier().then(res => {
					this.carrierList = res.content.content
				})
			},
			radioChange(e) {
				this.driveType = e.detail.value
			},
			onChoseCarrier(item) {
				this.carrierForm.customerCode = item.customerCode
				this.carrierForm.customerName = item.customerName
			},
			onDeteleCarrier() {
				this.carrierForm.customerCode = ''
				this.carrierForm.customerName = ''
				this.carrierForm.cardId = ''
				this.carrierForm.ladingDate = ''
			}
		},
		onLoad(options) {
			receivingId = options.id
			sendGoodsId = options.sendGoodsId
			this.getCarrierList()
		}
	}
</script>

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

	.upload-box {
		min-height: 300px;
		padding: 12px 15px 0;
		box-sizing: border-box;

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

		.upload {
			margin-top: 12px;
		}
	}

	.btn-box {
		padding: 40rpx 30rpx;

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

			&::after {
				border-radius: 0;
				border: 0;
			}
		}
	}

	.carrier-chose {
		padding: 10px 15px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.delete-text {
			color: #B60001;
		}
	}

	.carrier-table-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;

		&.header {
			height: 40px;
			background-color: #f5f5f5;
		}

		&.list {
			min-height: 36px;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
</style>