<!--
 * @Author: euzhi
 * @Description: 获取挪车码
-->
<template>
	<view class="appCotent">
		<div class="getCarCode">
			<div class="get__content">

				<div class="content__code">
					<div class="code__img">
						<image :src="freeCode.mainImgUrl" class="code__img"></image>
					</div>
					<div class="code__money">
						<div class="money__title">
							<text>{{freeCode.title}}</text>
						</div>
						<div class="code__tips">
							<text>{{freeCode.spec}}</text>
						</div>
						<div class="money__num">
							<text class="num__one">￥0.00</text>
						</div>
					</div>
				</div>
				<u-gap bgColor="transparent" height="20"></u-gap>
				<div class="content__list">
					<div class="list__title">
						超低价养车好物
					</div>
					<u-gap bgColor="transparent" height="20"></u-gap>
					<div class="list">
						<div class="list__item" v-for="(vo,inx) in mallList" :key="inx">
							<image :src="vo.mainImgUrl" class="list__img"></image>
							<!-- <div class="list__img">
                            <image :src="vo.img" />
                        </div> -->
							<div class="list__money">
								<view class="tag">
									包邮
								</view>
								<div class="money__title clamp2">
									<text>{{vo.title}}</text>
								</div>
								<div class="code__tips clamp1">
									<text>{{vo.spec}}</text>
								</div>
								<div class="money__num">
									<text class="num__one">¥{{vo.currentPrice/100}}</text>
									<text class="num__two">¥{{vo.originalPrice/100}}</text>
								</div>
							</div>
							
							<view class="num-box">
								<u-number-box>
									<view slot="minus" class="minus" @click="minusMall(vo)">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50rpx;text-align: center;" class="input">
										{{mallSelectMap[vo.id]?mallSelectMap[vo.id]:0}}
									</text>
									<view slot="plus" class="plus" @click="plusMall(vo)">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>


							<!-- <u-number-box v-model="mallSelectMap[vo.id]" :min="0" @change="selectMall">
                            
                        </u-number-box> -->
							<!-- <div class="list__add" @click="add">

                            <image src="@/static/index/get-car-code2.png" />
                        </div> -->
						</div>
					</div>
					<u-gap bgColor="transparent" height="160"></u-gap>
					<div class="address" v-if="addressShow" @click="goAddress">
						<div class="address__left">
							<div class="right__title">
								{{addressInfo.address}}&emsp;{{addressInfo.detailInfo}}
							</div>
							<div class="right__phone">
								<span v-if="addressInfo.defaultFlag">默认</span>
								<span>{{addressInfo.userName}}</span>
								<span>{{addressInfo.telNumber}}</span>
							</div>
						</div>
						<div class="address__right">
							<image src="@/static/index/right.png" />
						</div>
						<u-gap bgColor="transparent" height="15"></u-gap>
					</div>
					<div v-else class="add__address" @click="addAddress">
						<image src="@/static/index/get-car-code5.png"> 添加收货地址
					</div>
					<view class="fiexd_foot">

					</view>
				</div>
			</div>
			<u-modal :show="show" :content='content' @confirm='show = false'></u-modal>
			<u-gap bgColor="transparent" height="65"></u-gap>
			<div class="price__bottom">
				<div class="price">
					<div class="price__num">
						共<span>{{countNum}}</span>件
					</div>
					<div class="price__all">
						合计<span class="num__one">￥{{countMoney/100}}</span>
					</div>
				</div>
				<div class="price__next" @click="pay">
					立即支付
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nums: 0,
				show: false,
				addressShow: false,
				content: "地址不能为空",
				items: [{
						title: '临时停车牌-经典样式',
						tip: '静电贴材质 7.1cm*8.9cm',
						price: '0.00',
						price2: '19.99',
						img: require('@/static/index/get-car-code1.png')
					},
					{
						title: '临时停车牌-经典样式',
						tip: '静电贴材质 7.1cm*8.9cm',
						price: '0.00',
						price2: '19.99',
						img: require('@/static/index/get-car-code1.png')
					},
					{
						title: '临时停车牌-经典样式',
						tip: '静电贴材质 7.1cm*8.9cm',
						price: '0.00',
						price2: '19.99',
						img: require('@/static/index/get-car-code1.png')
					}
				],
				//收货地址列表
				addressList: [],
				//选择收货地址id
				addressId: '',
				//选择的收货地址
				addressInfo: {},
				//免费挪车码
				freeCode: {},
				//普通商品列表
				mallList: [],
				value: 0,
				//
				selectMallList: [],
				//选择商品的数量
				countNum: 1,
				//商品变更为零或者1
				quantityChange: false,
				countMoney: 0,
				mallMoney: 0,
				mallSelectMap: {},
				carNo: '',
			}
		},
		methods: {
			pay() {
				if (!this.addressId) {
					uni.showToast({
						title: '请添加一个收货地址',
						icon: 'none',
					})
				} else {
					let list = [{
						id: this.freeCode.id,
						nums: 1,
					}]
					let idMap = this.mallSelectMap
					for (let id in idMap) {
						if (idMap[id] > 0) {
							let commodity = {
								id: id,
								nums: idMap[id]
							}
							list.push(commodity)
						}
					}
					this.createOrder = {
						addressId: this.addressId,
						commodityList: list,
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let that = this
					let opts = {
						url: '/app/mall/create/order',
						method: 'post'
					};
					that.http.httpTokenRequest(opts, this.createOrder).then(res => {
						if (res.data.code == 200) {
							let orderIds = res.data.data
							if (orderIds && orderIds.length > 0) {
								that.orderSubmit = {
									appId: 6,
									ids: orderIds,
									channelCode: 'wx_lite',
								}
								let opts = {
									url: '/app/pay/order/submit/more',
									method: 'post'
								}
								that.http.httpTokenRequest(opts, that.orderSubmit).then(res => {
									if (res.data.code == 200) {
										let paymentData = res.data.data.invokeResponse;
										uni.hideLoading()
										uni.requestPayment({
											provider: 'wxpay', // 服务提提供商
											timeStamp: paymentData.timeStamp,
											nonceStr: paymentData.nonceStr,
											package: paymentData.packageValue,
											signType: paymentData.signType,
											paySign: paymentData.paySign,
											success: function(res) {
												uni.navigateTo({
													url: '/pagesC/pages/shop/payOk'
												})
											},
											fail: function(err) {
												//console.log('支付失败',err);
												if (that.orderSubmit.ids !== undefined && that
													.orderSubmit.ids !== null && that
													.orderSubmit.ids.length > 0) {
													let opts = {
														url: '/app/mall/cancel/order',
														method: 'post'
													}
													that.http.httpTokenRequest(opts, {
														"ids": that.orderSubmit.ids
													}).then(res => {
														if (res.data.code == 200) {

														}
													})
												}
											},
										});
									} else {

									}
								})
							} else {
								uni.navigateTo({
									url: '/pagesC/pages/shop/payOk'
								})
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
						}
					})
				}

			},
			add() {
				this.nums++
			},
			addAddress() {
				uni.navigateTo({
					url: '/pagesD/pages/personal/addAddress'
				});
			},
			getAddressList() {
				let opts = {
					url: '/app/user/address/list',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.addressList = res.data.data
						if (this.addressList !== undefined && this.addressList != null && this.addressList.length >
							0) {
							let defaultFlagExist = false
							this.addressList.forEach(element => {
								if (this.addressId) {
									if (element.id == this.addressId) {
										this.addressInfo = element
										this.addressShow = true
										defaultFlagExist = true
									} else {
										defaultFlagExist = false
									}
									return
								}
								if (element.defaultFlag) {
									this.addressInfo = element
									this.addressId = element.id
									this.addressShow = true
									defaultFlagExist = true
								}
							});
							if (!defaultFlagExist) {
								this.addressInfo = this.addressList[this.addressList.length - 1]
								this.addressShow = true
							}
						} else if (this.addressList.length == 0) {
							this.addressInfo = null
							this.addressShow = false
						}
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pagesD/pages/personal/myAddress?pay=1'
				})
			},
			getMoveCode() {
				let opts = {
					url: '/app/index/free/code',
					method: 'get'
				};
				this.http.httpRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.freeCode = res.data.data
					}
				})
			},
			getMallList() {
				let opts = {
					url: '/app/mall/add/purchase',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.mallList = res.data.data
						this.mallList.forEach(element => {
							element.selectNum = 0
						})
					}
				})
			},
			selectMoney(value) {
				this.mallMoney = value
			},
			selectMall(num) {
				//当添加数量且数量为1就加总共商品数量
				this.quantityChange = (num.value == 0 || num.value == 1)
			},
			plusMall(vo) {
				this.countNum = this.countNum + 1
				if (!this.mallSelectMap[vo.id] || this.mallSelectMap[vo.id] == 0) {
					this.mallSelectMap[vo.id] = 1
				} else {
					this.mallSelectMap[vo.id] += 1
				}
				this.countMoney += vo.currentPrice
				//console.log(this.mallSelectMap)

			},
			minusMall(vo) {
				if (this.mallSelectMap[vo.id] == 0) {
					return
				}
				this.countNum = this.countNum - 1
				if (this.mallSelectMap[vo.id] && this.mallSelectMap[vo.id] > 0) {
					if (this.mallSelectMap[vo.id] == 1) {}
					this.mallSelectMap[vo.id] -= 1
					this.countMoney -= vo.currentPrice
				}
			},
		},
		onShow() {
			this.getAddressList()
			this.getMoveCode()
			this.getMallList()
		},
		onLoad(option) {
			this.carNo = option.carNo
		},
	};
</script>

<style lang="scss" scoped>
	.getCarCode {
		/deep/ .u-modal__content__text {
			text-align: center !important;
		}

		/deep/ .u-input__content__field-wrapper__field {
			text-align: right !important;
		}

		.price__bottom {
			width: 100%;
			height: 156rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			padding: 32rpx 40rpx;
			box-sizing: border-box;
			clear: both;

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price__num {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					span {
						font-size: 32rpx;
						font-family: DIN;
						font-weight: 500;
						color: #333333;
					}
				}

				.price__all {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					padding-right: 250rpx;

					span {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #E1251B;
					}
				}
			}

			.price__next {
				width: 240rpx;
				height: 98rpx;
				background: url('@/static/index/border-btn.png') no-repeat;
				background-size: contain;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 0.96;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				top: -10rpx;
			}
		}

		.get__content {
			padding: 40rpx 0rpx;

			.address {
				background: #ffffff;
				display: flex;
				align-items: center;
				padding: 30rpx 40rpx;
				position: fixed;
				bottom: 200rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				justify-content: space-between;
				box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
				border-radius: 40rpx;
				border: 1rpx solid #ffeddc;

				.address__left {
					width: 600rpx;

					.right__title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 48rpx;
						margin-bottom: 20rpx;
					}

					.right__phone {
						display: flex;
						align-items: center;

						span {
							padding-left: 20rpx;
						}

						span:nth-of-type(1) {

							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #F88D28;
							padding: 2rpx 4rpx;
							border: 1rpx solid #F88D28;
						}

						span:nth-of-type(2) {
							font-size: 28rpx;
							font-family: DIN;
							font-weight: 500;
							color: #666666;
						}

						span:nth-of-type(3) {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
				}

				.address__right {
					image {
						width: 14rpx;
						height: 24rpx;
					}
				}
			}

			.add__address {
				position: fixed;
				left: 0;
				right: 0;
				margin: 0 auto;
				bottom: 200rpx;
				width: 670rpx;
				height: 90rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F88D28;
				display: flex;
				margin: 0 auto;
				align-items: center;
				justify-content: center;

				image {
					width: 34rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
			}

			.fiexd_foot {
				position: fixed;
				left: 0;
				bottom: 114rpx;
				width: 100%;
				height: 90rpx;
				background: #f9f9f9;
			}


			.content__code {
				padding: 28rpx;
				box-sizing: border-box;
				width: 670rpx;
				height: 220rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				margin: 0 auto;
				position: relative;

				.code__img {
					width: 160rpx;
					height: 160rpx;
					background: #3699ff;
					border-radius: 10rpx;
				}

				.code__money {
					margin: 0 20rpx;

					.money__title {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;

						line-height: 42rpx;

						.code__tips {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 42rpx;
						}

					}

					.money__num {
						.num__one {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #e1251b;
							line-height: 42rpx;
						}

						.num__two {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 42rpx;
						}
					}
				}
			}

			.content__list {
				.list__title {
					padding-left: 40rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.list__title::before {
					content: "";
					width: 76rpx;
					height: 14rpx;
					background-size: contain;
				}

				.list {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
					padding-right: 40rpx;

					.list__item {
						padding: 28rpx;
						box-sizing: border-box;
						width: 620rpx;
						height: 220rpx;
						background: #ffffff;
						box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						position: relative;
						margin-bottom: 20rpx;

						.list__img {
							width: 160rpx;
							height: 160rpx;
							background: #3699ff;
							border-radius: 10rpx;
							position: absolute;
							left: -50rpx;
							border-radius: 20rpx;
						}

						.list__money {
							margin: 0 20rpx;
							margin-left: 100rpx;
							width: 400rpx;
							position: relative;

							.money__title {
								font-size: 32rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;

								line-height: 42rpx;

								.code__tips {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #666666;
									line-height: 42rpx;
								}

							}

							.money__num {
								.num__one {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #e1251b;
									line-height: 42rpx;
									margin-right: 20rpx;
								}

								.num__two {
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
									line-height: 42rpx;
								}
							}

							.tag {
								position: absolute;
								top: 4rpx;
								right: -80rpx;
								font-size: 24rpx;
								background-color: #F88D28;
								color: #fff;
								width: 60rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 6rpx;
							}

						}
						
						.num-box{
							position: relative;
							bottom:-40rpx;
						}

						.list__add {
							position: absolute;
							right: 30rpx;
							bottom: 30rpx;
							width: 44rpx;
							height: 44rpx;

							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.minus {
		width: 22px;
		height: 22px;
		background: #e6e6e6;
		border-radius: 50%;
		display: flex;
		color: #fff;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
