<template>
	<view class="container">
		<uni-list class="custom-uni-list">
			<view class="item-bg">
				<uni-list-item :border="false" :title="$t('index.name')">
					<template v-slot:footer>
						<input class="list-item-left" v-model="receivePerson" type="text"
							:placeholder="$t('index.msg-name')" />
					</template>
				</uni-list-item>
			</view>
			<view class="item-bg">
				<uni-list-item :border="false" :title="$t('index.telephone')">
					<template v-slot:footer>
						<input class="list-item-left" v-model="receivePersonPhone" type="number"
							:placeholder="$t('index.enter')+$t('index.telephone')" />
					</template>
				</uni-list-item>
			</view>

			<view class="item-bg">
				<uni-list-item :border="false" :title="$t('index.warehouse-detail')">
					<template v-slot:footer>
						<textarea class="list-item-left" style="height: 20px" v-model="warehouseAddress" auto-height
							:placeholder="$t('index.enter')+$t('index.warehouse-detail')" />
					</template>
				</uni-list-item>
			</view>
			<view class="item-bg">
				<uni-list-item :border="false" :title="$t('index.default-address-set')">
					<template v-slot:footer>
						<view class="switch-box">
							<switch class="deposit-switch" :checked="isDefault" style="transform:scale(0.7)"
								@change="switchChange" />
						</view>
					</template>
				</uni-list-item>
			</view>

			<view class="item-bg" v-if="orderId">
				<uni-list-item :border="false" :title="$t('index.delivery-date')">
					<template v-slot:footer>
						<view class="uni-input">
							<picker mode="date" :value="deliveryDate" @change="onDateChange">
								<view>{{deliveryDate}}</view>
							</picker>
						</view>
					</template>
				</uni-list-item>
			</view>
		</uni-list>

		<view class="btn-box">
			<view class="btn btn-gray" v-if="editAddress" @tap="deleteEvent">
				<image style="width: 20px;height: 20px;" mode="aspectFit" :src="web('icon_delete.png')"></image>
				<view class="btn-del">
					{{$t('index.delete')}}
				</view>
			</view>
			<button :style="{width: editAddress==false?'690rpx':'400rpx'}" class="btn" style="background: #086DCA;"
				@click="submit">{{$t('index.sure')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		saveDelivery,
		updateDelivery
	} from '@/config/api.js'
	import {
		Moment
	} from '@/utils/moment.js'
	import {
		web
	} from '../../utils/util'

	let addressId = null,
		lockVersion = '' // 有id则是编辑，没有id就是新增
	export default {
		name: 'deposit',
		components: {

		},
		data() {
			return {
				orderId: null, // 进入方式。null：'我的'页面进入；当从'订单详情'进入时等于订单id
				deliveryDate: '',
				receivePerson: '',
				receivePersonPhone: '',
				warehouseAddress: '',
				isDefault: false,
				// startDate: new Moment().format('YYYY-MM-DD'),,
				isReadPolicy: true,
				editAddress: false
			}
		},
		methods: {
			web(name) {
				return web(name)
			},
			onDateChange(e) {
				this.deliveryDate = e.detail.value
			},
			switchChange(e) {
				this.isDefault = e.detail.value
			},
			submit() {
				if (!this.receivePerson.trim()) {
					uni.showToast({
						title: this.$t('index.enter') + this.$t('index.contact'),
						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.receivePersonPhone) && !validatePhone.test(this.receivePersonPhone)) {
					uni.showToast({
						title: this.$t('index.msg-mobile-correct'),
						icon: 'none'
					});
					return
				}
				if (!this.warehouseAddress.trim()) {
					uni.showToast({
						title: this.$t('index.msg-warehouse'),
						icon: 'none'
					});
					return
				}
				if (!this.isReadPolicy) {
					uni.showToast({
						title: this.$t('index.msg-protocol'),
						icon: 'none'
					});
					return
				}
				let addressObj = {
					receivePerson: this.receivePerson,
					receivePersonPhone: this.receivePersonPhone,
					warehouseAddress: this.warehouseAddress,
					isDefault: this.isDefault
				}
				if (addressId) {
					addressObj['id'] = addressId
					addressObj['lockVersion'] = lockVersion
				}
				saveDelivery(addressObj).then(({
					content
				}) => {
					if (this.orderId) { // 更新订单配送地址
						this.updateDeliveryInfo(content.id)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.success')
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					}
				})
			},
			updateDeliveryInfo(id) {
				updateDelivery({
					cartOrderReceiveId: id,
					deliveryDate: this.deliveryDate,
					orderId: this.orderId
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.success')
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 1500)
					}, 30)
				})
			},
			changePolicy(flag) {
				this.isReadPolicy = !!flag
			},
			deleteEvent() {
				let addressObj = {
					receivePerson: this.receivePerson,
					receivePersonPhone: this.receivePersonPhone,
					warehouseAddress: this.warehouseAddress,
					isDefault: this.isDefault,
					isDeleted: true
				}
				if (addressId) {
					addressObj['id'] = addressId
					addressObj['lockVersion'] = lockVersion
				}
				saveDelivery(addressObj).then(({
					content
				}) => {
					if (this.orderId) { // 更新订单配送地址
						this.updateDeliveryInfo(content.id)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.success')
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					}
				})
			}
		},
		onLoad(options) {
			if (options.id) { // 订单页跳转过来增加地址
				this.orderId = options.id
				this.deliveryDate = options.time || new Moment().format('YYYY-MM-DD')
			}
			if (options.addressId) { // 地址编辑
				this.editAddress = true
				this.isReadPolicy = true
				this.isDefault = options.default === 'true'
				addressId = options.addressId
				lockVersion = options.version
				this.receivePerson = options.name
				this.receivePersonPhone = options.phone
				this.warehouseAddress = options.address
			}
		}
	}
</script>

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

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

		/deep/ .uni-list-item__content {
			flex: 120px;
		}
	}

	.placeholder {
		color: #808080;
	}

	.item-bg {
		margin: 0 20rpx;
		padding-top: 50rpx;
		border-bottom: 1px solid #f2f2f2;
	}

	.btn-box {
		position: fixed;
		bottom: 34px;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		height: 96rpx;
		display: flex;

		.btn {
			background-color: #B60001;
			font-size: 14px;
			color: #FFFFFF;
			height: 100%;
			line-height: 96rpx;

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

		.btn-gray {
			width: 260rpx;
			background: #F5F7FA;
			border-radius: 4px;
			border: 2rpx solid #F2F2F2;
			align-items: center;
			display: flex;
			justify-content: center;
		}

		.btn-del {
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
			line-height: 30rpx;
			text-align: center;
			margin-left: 16rpx;
		}
	}

	.switch-box {
		flex: auto;
		display: flex;
		justify-content: flex-end;

		.deposit-switch {
			height: 0;
		}
	}

	.uni-input {
		flex: auto;
		text-align: right;
	}
</style>