<template>
	<page-meta :page-style="'overflow:'+(showinfo?'hidden':'visible')"></page-meta>
	<view class="cotainer">
		<view class="orderInfo">
			<view class="orderInfo-img">
				<u-image :src="require('@/static/share.jpg')" height="350"></u-image>
				<view>您提货的商品是</view>
			</view>
			<view class="orderInfo-info">
				<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
				<view>{{cardInfo.sku?cardInfo.sku.name:''}}{{cardInfo.sku?cardInfo.sku.specs:''}}</view>
			</view>
			<view class="orderInfo-status">
				<view>
					<view>卡劵状态</view>
					<view v-html="cardInfo.status_label"></view>
				</view>
				<view>
					<view>卡劵状态</view>
					<view v-html="cardInfo.status_label"></view>
				</view>
				<view>
					<view>今日剩余可提货量</view>
					<u-button size="mini">99</u-button>
				</view>
			</view>
		</view>
		<view class="orderForm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="预约提货时间" required prop="send_date" label-position="top">
					<u-input v-model="form.send_date" placeholder="请选择预约提货时间" @click="showCalendar = true"
						type="select" />
				</u-form-item>
				<view class="orderForm-address">
					<text><text>*</text>收货地址</text>
					<u-button @click="changeLocation" size="mini">获取位置</u-button>
				</view>
				<u-form-item label=" " prop="area" label-position="top">
					<u-input v-model="form.area" placeholder="请选择收货地址" @click="openArea" type="select" />
				</u-form-item>
				<u-form-item label="详细地址" required prop="address" label-position="top">
					<u-input v-model="form.address" placeholder="请填写详细地址" type="textarea" />
				</u-form-item>
				<u-form-item label="收货人姓名" label-width="150" required prop="contact" label-position="left">
					<u-input v-model="form.contact" placeholder="请填写收货人姓名" />
				</u-form-item>
				<u-form-item label="收货人电话" label-width="150" required prop="mobile" label-position="left">
					<u-input v-model="form.mobile" placeholder="请填写收货人电话" />
				</u-form-item>
				<u-form-item label="备用电话" label-width="150" prop="mobile2" label-position="left">
					<u-input v-model="form.mobile2" placeholder="请填写备用电话" />
				</u-form-item>
				<u-form-item label="是否本人收货" label-width="180" prop="myself" label-position="left">
					<u-input v-model="myself" placeholder="请选择是否本人收货" @click="showIsMySelf = true" type="select" />
				</u-form-item>
				<u-form-item label="购买人姓名" label-width="150" prop="buy_name" label-position="left">
					<u-input v-model="form.buy_name" placeholder="请填写购买人姓名" />
				</u-form-item>
				<u-form-item label="购买人电话" label-width="150" prop="buy_mobile" label-position="left">
					<u-input v-model="form.buy_mobile" placeholder="请填写购买人电话" />
				</u-form-item>
			</u-form>
			<view class="orderForm-btn">
				<u-button type="primary" @click="submit">确认提货</u-button>
			</view>
		</view>
		<!-- <u-calendar max-date="2050-12-31" v-model="showCalendar" @change="changeDate" :mode="'date'"></u-calendar> -->
		<!-- <u-picker mode="region" v-model="showArea" @confirm="changeArea"></u-picker> -->
		<aui-picker ref="pickers" :title="'地区选择'" :data="listArea" @callback="changeArea"></aui-picker>


		<u-select @confirm="changeDate" v-model="showCalendar" :list="listDates"></u-select>

		<u-select @confirm="changeIsMySelf" v-model="showIsMySelf" :list="listIsMySelf"></u-select>
		<!-- 确认信息 -->
		<view class="showinfo" v-if="showinfo">
			<view class="content">
				<view class="showinfo-info">
					<view>您提货的商品是</view>
					<u-image :src="require('@/static/share.jpg')" width="450" height="450"></u-image>
					<view>{{cardInfo.sku?cardInfo.sku.name:''}}{{cardInfo.sku?cardInfo.sku.specs:''}}</view>
				</view>
				<view class="showinfo-wrap">
					<view>发货时间</view>
					<view style="text-align: center;">{{momentDay(date)}}</view>
				</view>
				<view class="showinfo-wrap">
					<view>收货信息</view>
					<view>
						<view>
							<text>收货人：</text>
							<text>{{form.contact}}</text>
						</view>
						<view>
							<text>收货人电话：</text>
							<text>{{form.mobile}}</text>
						</view>
						<view>
							<text>收货地址：</text>
							<text>{{form.area}}{{form.address}}</text>
						</view>
					</view>
				</view>
				<view class="showinfo-btn">
					<u-button @click="showinfo = false">返回修改</u-button>
					<u-button type="primary" @click="submit">确认提货</u-button>
				</view>
			</view>
		</view>
		<!-- 选择地址 -->
		<view class="addressinfo" v-if="showAddress">
			<view class="content">
				<view class="content-close" @click="showAddress=false">
					<u-icon name="close-circle" color="#000" size="50"></u-icon>
				</view>
				<view class="content-wrap">

					<u-radio-group v-model="addressInfo" @change="changeAddress">
						<u-radio v-for="(item, index) in listAddress" :key="index" :name="item.id">
							<view class="content-contact">{{item.contact}} {{item.mobile}}</view>
							<view class="content-address">{{item.area}}{{item.address}}</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		toast,
		isMobile,
		isNull
	} from '@/common/util.js'
	import solarLunar from '@/node_modules/solarlunar';
	import auiPicker from '@/components/aui-picker.vue';
	export default {
		components: {
			auiPicker
		},
		data() {
			return {
				showinfo: false,
				showAddress: false,
				listAddress: [],
				addressInfo: '',
				cardInfo: {},
				form: {
					card_number: '',
					password: '',
					send_date: '',
					area: '',
					address: '',
					province_id: '',
					city_id: '',
					district_id: '',
					contact: '',
					mobile: '',
					mobile2: '',
					myself: 1,
					buy_name: '',
					buy_mobile: ''
				},
				listDates: [],
				showCalendar: false,
				date: '',
				listArea: [],
				showArea: false,
				showIsMySelf: false,
				myself: '是',
				listIsMySelf: [{
					value: 1,
					label: '是'
				}, {
					value: 0,
					label: '否'
				}],
				rules: {
					send_date: [{
						required: true,
						message: '请选择预约提货时间',
						trigger: ['change', 'blur'],
					}],
					area: [{
						required: true,
						message: '请选择收货地址',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请填写详细地址',
						trigger: ['blur'],
					}],
					contact: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['blur'],
					}],
					mobile: [{
						required: true,
						message: '请填写收货人电话',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		onLoad(option) {
			if (option.hasCard) {
				this.cardInfo = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card : {}
				this.form.card_number = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card_number : ''
				this.form.password = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").password : ''
				uni.removeStorageSync("vuex_card")
				this.getAddress()
				this.getDates()
				this.getArea()
			} else {
				toast("未查询到卡券信息")
				uni.removeStorageSync("vuex_card")
				uni.redirectTo({
					url: '/pages/change/change'
				})
			}
		},
		methods: {
			async getAddress() {
				const res = await this.$u.api.getUserAddress()
				this.listAddress = res.address
				this.showAddress = this.listAddress.length > 0 ? true : false
			},
			changeAddress(e) {
				console.log("e", e)
				if (e) {
					this.listAddress.map(item => {
						if (item.id == e) {
							this.form.address_id = item.id
							this.form.area = item.area
							this.form.address = item.address
							this.form.province_id = item.province_id
							this.form.city_id = item.city_id
							this.form.district_id = item.district_id
							this.form.contact = item.contact
							this.form.mobile = item.mobile
							this.showAddress = false
						}
					})
				}
			},
			async getDates() {
				await this.$u.api.getDates({
					card_number: this.form.card_number,
					password: this.form.password
				}).then(res => {
					console.log("dare", res)
					let data = res.card
					if (data.open_dates) {
						for (var k in data.open_dates) {
							this.listDates.push({
								label: k,
								value: k
							})
						}
					}
				}).then(res => {

				})
			},
			changeDate(e) {
				console.log(e)
				if (e) {
					// this.form.send_date = e.result
					// this.date = e
					this.date = e[0].label
					this.form.send_date = e[0].value
				}
			},
			async getArea() {
				const res = await this.$u.api.getRegion()
				this.listArea = res.regions

				console.log(res)
				console.log(this.listArea)
			},
			openArea() {
				this.$refs.pickers.open().then(function() {
					console.log('picker打开');
				});
			},
			changeArea(e) {
				console.log(e)
				// return
				if (e) {
					let data = e.data
					let _this = this
					data.forEach(function(item, index) {
						_this.form.area += item.value + '   ';
					});
					this.form.province_id = data[0] ? data[0].id : ''
					this.form.city_id = data[1] ? data[1].id : ''
					this.form.district_id = data[2] ? data[2].id : ''
					console.log(this.form)
					// this.form.area = e.province.label + e.city.label + e.area.label
					// this.$u.api.matchRegion({
					// 	province: e.province.label,
					// 	city: e.city.label,
					// 	district: e.area.label
					// }).then(res => {
					// 	this.form.province_id = res.province_id ? res.province_id.id : ''
					// 	this.form.city_id = res.city_id ? res.city_id.id : ''
					// 	this.form.district_id = res.district_id ? res.district_id.id : ''
					// })
				}
			},
			changeIsMySelf(e) {
				console.log(e)
				if (e) {
					this.myself = e[0].label
					this.form.myself = e[0].value
				}
			},
			changeLocation() {
				console.log("location")
				let _this = this
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						console.log("authorize", res)

						uni.chooseLocation({
							success(res) {
								console.log("res", res)
								_this.form.area = res.address
								_this.form.address = res.name
							},
							fail(res) {
								console.log("fail", res)

							}
						})
					},
					fail(res) {
						console.log("authorize-fail", res)
					}
				})
			},
			momentDay(date) {
				console.log(date)
				if(date){
					const weeks = ["周日",'周一','周二','周三','周四','周五','周六',]
					let dateArr = date.split("-")
					let ymd = this.$moment(date).format("YYYY年MM月DD日")
					let week = weeks[this.$moment(date).day()]
					console.log(this.$moment(date).format("YYYY年MM月DD日"))
					// return
					const solar2lunarData = solarLunar.solar2lunar(dateArr[0], dateArr[1], dateArr[2]);
					console.log(`农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`);
					// return this.date + "  " + LL
					return `${ymd}  ${week}  农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`
				}
				
			},
			submit() {
				if ((!isNull(this.form.mobile2) && this.form.mobile2.length > 0) || (!isNull(this.form.buy_mobile) && this
						.form.buy_mobile.length > 0)) {
					if (!isMobile(this.form.mobile2)) {
						toast('备用电话不正确')
						return
					}
					if (!isMobile(this.form.buy_mobile)) {
						toast('购买人电话不正确')
						return
					}
				}
				this.$refs.uForm.validate(valid => {
					console.log('验证通过');
					if (valid) {
						if (!this.showinfo) {
							this.showinfo = true
							console.log("this.showinfo", this.showinfo)
						} else {
							console.log('submit');
							this.form.show = 0
							this.$u.api.addUserOrder(this.form).then(res => {
								console.log("res", res)
								uni.removeStorageSync('vuex_card')
								toast(res.msg)
								setTimeout(function() {
									uni.redirectTo({
										url: '/packages/myorder/myorder'
									})
								}, 2000)

							}).then(res => {
								console.log('res1', res)

							})
						}

					} else {
						console.log('验证失败');
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.cotainer {
		padding: 40rpx;

		.addressinfo {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
			z-index: 9999999;
			display: flex;
			align-items: center;
			justify-content: center;

			.content {
				width: 80%;
				height: 600rpx;
				position: relative;

				&-wrap {
					box-sizing: border-box;
					background: #fff;
					border-radius: 20rpx;
					overflow: scroll;
					width: 100%;
					height: 100%;
					padding: 40rpx;
				}

				&-close {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}

				.u-radio {
					align-items: baseline;
				}

				&-contact {}

				&-address {
					color: #ccc;
					line-height: 1.2;
					font-size: 28rpx;
				}
			}
		}

		.showinfo {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
			z-index: 9999999;
			display: flex;
			align-items: center;
			justify-content: center;

			.content {
				width: 100vw;
				height: 100vh;
				padding: 40rpx;
				box-sizing: border-box;
				background: #fff;
				// border-radius: 16rpx;
				overflow: scroll;
			}

			&-info {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				>view {
					margin: 20rpx;
					font-size: 36rpx;

					&:last-child {
						width: 350rpx;
						color: #ccc;
						font-size: 28rpx;
						text-align: center;
					}

				}
			}

			&-wrap {
				>view {
					&:first-child {
						text-align: center;
						margin: 20rpx;
					}

					&:last-child {
						border: 1px solid #333;
						padding: 20rpx;
						border-radius: 15rpx;
						font-weight: bold;

						>view {
							margin-bottom: 10rpx;
						}
					}
				}
			}

			&-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 30rpx;

				u-button {
					margin: 0 20rpx;
				}
			}
		}

		.orderInfo {
			&-img {
				text-align: center;

				>view {
					padding: 20rpx;
				}
			}

			&-info {
				display: flex;
				align-items: center;

				>view {
					margin-left: 30rpx;
					padding: 0 40rpx;
					font-weight: bold;
				}
			}

			&-status {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				>view {
					width: calc(50% - 40rpx);
					margin: 20rpx;
					display: flex;
					align-items: center;
					margin-left: 0;

					&:last-child {
						width: 100%
					}

					>view {
						margin-right: 20rpx;
					}
				}
			}
		}

		.orderForm {

			&-address {
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 72rpx;
				padding-top: 20rpx;
				position: relative;

				text {
					text {
						position: absolute;
						left: -16rpx;
						vertical-align: middle;
						color: #fa3534;
						padding-top: 6rpx;
					}
				}
			}

			&-btn {
				margin: 40rpx;
			}
		}
	}
</style>