<template>
	<view>
		<u-navbar title="自助洗车详情" leftIconColor='#333333' leftIconSize='38rpx' :autoBack="true" :fixed="false"
			:bgColor="bgColor">
		</u-navbar>

		<view class="common-card mg-bot-20">
			<common-title :msg="'已选门店'"></common-title>
			<view class="u-f u-f-jcsb u-f-aic">
				<view class="mg-right-10 u-f u-f-aic u-f-jcc">
					<image :src="billInfo.storeLogo" class="product-image" :lazy-load="true" :mode="'scaleToFill'">
					</image>
				</view>
				<view class="u-f u-f-jcsb u-f-aifs" style="width: calc(100% - 180rpx)">
					<view class="u-f u-f-fdc">
						<view class="fs28 light-blac fw400 mg-bot-32">{{billInfo.storeName}}</view>
						<view class="u-f u-f-jcfs u-f-aic">
							<text class="sign mg-right-8" v-for="(innerItem, index) in billInfo.storeLabelList"
								:key="index">{{innerItem}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="common-card mg-bot-28">
			<view class="mg-bot-24">
				<common-title :msg="'选择洗车服务'"></common-title>
			</view>
			<view class="item-list u-f u-f-jcsb u-f-aic u-f-fww">
				<view class="item-wrap u-f u-f-jcc u-f-aic mg-bot-30"
					v-for="(item, index) in billInfo.carWashServiceList" :key="index">
					<text class="item active">{{item}}</text>
				</view>
			</view>
		</view>

		<view class="common-card mg-bot-30">
			<view class="mg-bot-32"><common-title :msg="'选择洗车时长'"></common-title></view>
			<view class="u-f u-f-aic u-f-jcsb light-black fs28" @click="showSelectTimeModal">
				<text>选择时长</text>
				<view class="u-f u-f-jcsb u-f-aic fs28 light-black">
					<text class="mg-right-18">{{selectTimeInfo.carWashDuration}}</text>
					<image style="width: 8rpx;height: 16rpx;" src="../.././static/common/sg_right_arrow.png"></image>
				</view>
			</view>
		</view>

		<view class="common-card mg-bot-30">
			<view class="mg-bot-32"><common-title :msg="'选择洗车优惠券'"></common-title></view>
			<view class="u-f u-f-jcsb light-black fs28 fw400 mg-bot-42">
				<view>优惠券</view>
				<view v-if="billInfo.couponList.length > 0" class="u-f u-f-jcfs u-f-aic" @click="handleShowGoodQuan">
					<text class="mg-right-6">{{youhuiquan.couponName}}</text>
					<text
						class="main-color mg-right-10">{{ youhuiquan.discountMethod == 1 ? '￥' : '' }}{{youhuiquan.discountResult}}</text>
					<image src="../.././static/common/sg_right_arrow.png" class="small-gray-right-arrow"
						:mode="'widthFix'" />
				</view>
				<view class="u-f u-f-jcfs u-f-aic" v-else>
					<text class="mg-right-6">暂无可用优惠券</text>
					<image src="../.././static/common/sg_right_arrow.png" class="small-gray-right-arrow"
						:mode="'widthFix'" />
				</view>
			</view>
		</view>

		<view class="fix-bot u-f u-f-aic u-f-jcc">
			<view class="line-gradient-btn" style="width: calc(100% - 48rpx);" @click="handlePay">
				预付押金￥{{selectTimeInfo.advancedDeposit}}</view>
		</view>

		<!-- 选择洗车时长 -->
		<uni-popup :position="'bottom'" class="updatePopup" :show="showSelectTime" @hidePopup="hideSelectTimeModal">
			<view class="tire-modal">
				<image class="gray-close" src="../.././static/common/gray_close.png" :mode="'widthFix'"
					@click="hideSelectTimeModal"></image>
				<view class="u-f u-f-aic u-f-jcc mg-bot-24">
					<text class="fs32 fw600 light-blac">选择洗车时长</text>
				</view>
				<view>
					<view class="cards mg-bot-36 u-f u-f-jcfs u-f-aic u-f-fww">
						<view v-for="(innerItem, idx) in billInfo.costDescriptionList" :key="idx"
							:class="['list-card u-f u-f-fdc', active === idx ? 'selected-card' : 'disabled-card']"
							@click="selectTimeSlot(innerItem, idx)">
							<text class="mg-bot-10">{{innerItem.carWashDuration}}</text>
							<text>￥{{innerItem.advancedDeposit}}</text>
						</view>
					</view>

					<view class="u-f u-f-jcc u-f-aic" style="width: 100%;">
						<text style="width: calc(100% - 48rpx);text-align: center;" class="line-gradient-btn"
							@click="confirmSelectTime">确认</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 选择优惠券 -->
		<uni-popup :position="'bottom'" :show="show" @click="handleHideGoodQuan">
			<view class="share-modal">
				<image class="gray-close" src="../.././static/common/gray_close.png" :mode="'widthFix'"
					@click="handleHideGoodQuan"></image>
				<view class="u-f u-f-aic u-f-jcc one-line-ellipsis mg-bot-32">
					<slot name="share-modal-title">商品券</slot>
				</view>

				<view class="mg-bot-32">
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<view class="u-f u-f-jcfs u-f-aifs mg-bot-20" v-for="item in billInfo.couponList"
							:key="item.id">
							<view class="mg-right-10" style="flex: 1">
								<image style="width: 156rpx;height:156rpx" :src="item.couponIcon"></image>
							</view>
							<view style="flex: 3">
								<view class="u-f u-f-jcsb u-f-aic">
									<view class="u-f u-f-fdc" @click="goDetail('/pagesF/coupon-detail/coupon-detail')">
										<text class="fs28 light-black mg-bot-24">{{item.couponName}}</text>
										<text class="fs24 light-gray mg-bot-30">仅用于商城指定产品</text>
										<view class="u-f u-f-jcfs u-f-aifs">
											<text class="fs24 light-gray mg-right-12">所需等级</text>
											<text class="fs26 deep-gray">{{item.userType}}</text>
										</view>
									</view>
									<view class="u-f u-f-aic" @click="selectYouHuiQuan(item)">
										<text class="small-gradient-btn">去使用</text>
									</view>
								</view>
								<view class="light-gray fs24 mg-top-10" style="text-align: right;">
									{{item.deadline}}(含)前使用
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				bgColor: '#F9F9F9',
				billInfo: {
					couponList: []
				},
				showSelectTime: false,
				selectTimeInfo: '',
				active: 0,
				youhuiquan: {},
				youhuiInfo: {},
				show: false,
				key: 0
			}
		},
		onLoad(opt) {
			this.key = opt.key
			this.handleScanCodeCarWash()
			const token = uni.getStorageSync('token')
			if (!token) {
				//沒有登录  先登录
				uni.navigateTo({
					url: '/pages/login/login?share=1'
				})
			}
		},
		methods: {
			async handleScanCodeCarWash() {
				let data = {
					key: this.key
				}
				// 扫码洗车
				let res = await this.$http.get('/api/client/order/scanCodeCarWash', data, {
					token: true,
					checkToekn: true
				})
				let resData = res.data.data
				this.billInfo = resData || {}
				this.selectTimeInfo = this.billInfo.costDescriptionList[0]
				this.youhuiquan = this.billInfo.couponList.length > 0 ? this.billInfo.couponList[0] : ''
			},
			hideSelectTimeModal() {
				this.showSelectTime = false
			},
			showSelectTimeModal() {
				this.showSelectTime = true
			},
			selectTimeSlot(innerItem, idx) {
				this.selectTimeInfo = innerItem
				this.active = idx
			},
			confirmSelectTime() {
				uni.showToast({
					title: `您选择的洗车时长${this.selectTimeInfo.carWashDuration} 预付押金￥${this.selectTimeInfo.advancedDeposit}`,
					icon: 'none'
				})

				this.hideSelectTimeModal()
			},
			handleShowGoodQuan() {
				console.log("handleShowGoodQuan")
				this.show = true;
			},
			handleHideGoodQuan() {
				this.show = false;
			},
			selectYouHuiQuan(item) {
				this.handleHideGoodQuan()
				this.youhuiInfo = item
			},
			handlePay() {

				let data = {
					storeId: this.billInfo.storeId,
					type: 7, // 7-洗车
					goodsNum: 1,
					carWashServiceList: this.billInfo.carWashServiceList,
					carWashDuration: this.selectTimeInfo.carWashDuration
				}

				uni.showToast({
					title: '正在创建订单...',
					icon: 'none'
				})
				this.$http.post('/api/client/order/placeOrder', data).then((res) => {
					this.infoData = res.data.data

					if (res.data.code === 200) {
						console.log(res.data)
						this.orderId = res.data.data
						// 支付
						this.payMoney()
					} else {
						uni.showToast({
							title: '下单失败',
							icon: 'none'
						})
					}
				})
			},
			payMoney() {
				let data = {
					"orderId": this.orderId
				}

				uni.showLoading()
				this.$http.get('/api/client/lkl/pay', data, {
					token: true,
					checkToken: true
				}).then((res) => {
					console.log("支付", res.data)
					let resData = res.data.data
					uni.hideLoading()
					if (res.data.code == 2001) {
						// 免费
						uni.redirectTo({
							url: "/pagesE/pay-success/pay-success"
						})
					} else {
						// 收费
						this.wakeWxPay(resData)
					}

				})

			},
			wakeWxPay(resData) {
				var app_id = resData.resp_data.acc_resp_fields.app_id
				var nonce_str = resData.resp_data.acc_resp_fields.nonce_str
				var package_word = resData.resp_data.acc_resp_fields['package']
				var partner_id = resData.resp_data.acc_resp_fields.partner_id
				var prepay_id = resData.resp_data.acc_resp_fields.prepay_id
				var time_stamp = resData.resp_data.acc_resp_fields.time_stamp
				var pay_sign = resData.resp_data.acc_resp_fields.pay_sign
				var sign_type = resData.resp_data.acc_resp_fields.sign_type

				var orderInfo = {
					appid: app_id, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonce_str, // 随机字符串
					package: package_word, // 固定值
					partnerid: partner_id, // 微信支付商户号
					prepayid: prepay_id, // 统一下单订单号
					timeStamp: time_stamp, // 时间戳（单位：秒）
					signType: sign_type,
					paySign: pay_sign // 签名，这里用的 MD5/RSA 签名
				}

				uni.requestPayment({
					provider: "wxpay",
					appid: app_id, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonce_str, // 随机字符串
					package: package_word, // 固定值
					partnerid: partner_id, // 微信支付商户号
					prepayid: prepay_id, // 统一下单订单号
					timeStamp: time_stamp, // 时间戳（单位：秒）
					signType: sign_type,
					paySign: pay_sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.redirectTo({
							url: "/pagesE/pay-success/pay-success"
						})
					},
					fail(e) {
						console.log("fail", e)
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.common-card {
		padding: 20rpx;
		border-radius: 18rpx;
		background-color: #ffffff;

		.item-list {
			.item-wrap {
				width: calc(100% / 3 - 30rpx);
				margin-right: 30rpx;
				text-align: center;
				vertical-align: middle;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.item {
					width: 100%;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					background: #F9F9F9;
					border-radius: 30rpx;
					border: 1rpx solid #F9F9F9;

					&.active {
						background: #FFEFE9;
						border-radius: 30rpx;
						border-color: #FF4502;
					}
				}
			}
		}
	}

	.small-gray-right-arrow {
		width: 8rpx;
		height: 16rpx;
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 10rpx 0;
		background-color: #ffffff;
	}

	.tire-modal {
		position: relative;
		padding: 34rpx 24rpx 24rpx 24rpx;

		.gray-close {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			width: 42rpx;
			height: 42rpx;
			// background: url(../.././static/common/gray-close.png) no-repeat center center;
			background-size: 100%;
		}
	}

	.cards {
		.list-card {
			width: calc(100% / 3 - 15rpx);
			padding-top: 17rpx;
			padding-bottom: 17rpx;
			background: #ffffff;
			border-radius: 9rpx;
			border: 1rpx solid #999999;
			margin-right: 10rpx;
			margin-bottom: 17rpx;
			font-size: 24rpx;
			color: #333333;

			&:nth-child(3n) {
				margin-right: 15;
			}

			&.selected-card {
				border-color: #FF4502;
				color: #FF4502;
			}

			&.disabled-card {
				border-color: #707070;
				color: #707070;
			}
		}
	}

	.share-modal {
		position: relative;
		padding: 24rpx;

		.gray-close {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			width: 42rpx;
			height: 42rpx;
			// background: url(../.././static/common/gray-close.png) no-repeat center center;
			background-size: 100%;
		}

		.content-wrap {
			width: 100%;

			.inner {
				padding: 12rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
				border: 10rpx solid #FF4502;
			}
		}
	}
</style>