<template>
	<div class="app-content pay-wrap">
		<!-- <block v-if="option.pageStatus == 'recharge'">
			<div class="tabs-wrap">充值</div>
		</block>
		<block v-else>
			<div class="tabs-wrap">付款</div>
		</block>-->
		<!-- <block v-else>
			<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
		</block>-->
		<!-- 直接付款 -->
		<!-- <block v-if="tabIndex == 0">
			<div class="pay-wrap" v-if="!$util.isEmpty(orderShop)">
				<div class="logo-wrap">
					<div class="logo-img">
						<img :src="orderShop.merchant.smallLogoUrl | default_img" alt mode="widthFix" />
					</div>
					<div class="app-size-30">{{ !$util.isEmpty(shopUser) ? shopUser.userName : orderShop.merchant.merchantName }}</div>
				</div>
				<div class="pay-input-wrap">
					<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
					<div class="balance" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance != '0.00'">
						<span>账户余额 ¥</span>
						<span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
					</div>
					<div class="btn-wrap">
						<button v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'" class="button-com red" @click="balancePayFn">余额支付</button>
						<button class="button-com green" v-if="isWxBrowser()" @click="wexinPayFn">微信支付</button>
						<button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
					</div>
				</div>
			</div>
		</block>-->
		<!-- 我要配送 -->
		<!-- <block v-else> -->
		<div class="delivery-wrap" v-if="!$util.isEmpty(orderShop)">
			<div class="shop-logo-wrap" v-if="!$util.isEmpty(orderShop)">
				<div class="logo-img">
					<img :src="orderShop.merchant.smallLogoUrl | default_img" alt mode="widthFix" />
				</div>
				<div class="app-size-30">{{ orderShop.merchant.merchantName }}</div>
			</div>
			<div class="module-com pay-input-wrap">
				<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
				<div class="balance" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance != '0.00'">
					<span>账户余额 ¥</span>
					<span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
				</div>
			</div>
			<!-- 查看更多 -->
			<div class="view-more" :class="{'open' : tabIndex == 1}" @click="tabIndex = tabIndex == 0 ? 1 : 0">
				<div class="view-more-text">{{ tabIndex == 0 ? '填写收花人' : '收起' }}</div>
				<i class="iconfont iconjiantouxia"></i>
			</div>
			<!-- 查看更多 -->
			<block v-if="tabIndex == 1">
				<app-delivery-module ref="appDelivery" :anonymous="true" />
			</block>
			<!-- 匿名派送 -->
			<!-- <block v-if="tabIndex == 1">
				<div class="none-name-delivery flex-center">
					<checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
					<span class="none-name-text">匿名派送</span>
				</div>
			</block> -->
			<!-- 可选优惠 -->
			<div class="module-com discount-wrap" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.member && shopUser.userAsset.getCouponNum">
				<div class="module-tit">可选优惠</div>
				<div class="module-det">
					<app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
				</div>
			</div>
			<!-- 按钮 -->
			<div class="btn-wrap">
				<button v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'" class="button-com red" @click="balancePayFn">余额支付</button>
				<button class="button-com green" v-if="isWxBrowser()" @click="wexinPayFn">微信支付</button>
				<button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
			</div>
		</div>
		<!-- </block> -->
		<!-- <button @click="_pay">提交</button> -->
		<!-- 支付密码弹窗 -->
		<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<!-- <div class="line-label">支付密码</div> -->
						<div class="line-input">
							<input type="password" v-model="modalForm.payPassword" :adjust-position="false" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 阿里支付 -->
		<div class="al-pay" v-html="aliPayHtml" ref="alipayWap"></div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import AppTabs from '@/components/plugin/tabs'
	import PayInputModule from './components/pay-input'
	import AppDeliveryModule from '@/components/app-delivery'
	// import { getMiniAppUrl } from '@/utils/common'
	import wexinPay from '@/utils/pay/wxPay'
	import ModalModule from '@/components/plugin/modal'
	import AppCouponSel from '@/components/app-coupon-sel'
	import { isLogin } from '@/utils/util'
	import { isWxBrowser } from '@/utils/common'
	// api
	import { fastPay } from '@/api/pay'
	import { recharge } from '@/api/member'
	import { getShopUser } from '@/utils/auth'
	import { getOrderShop } from '@/utils/config'
	export default {
		name: 'pay',
		components: {
			AppTabs,
			PayInputModule,
			AppDeliveryModule,
			ModalModule,
			AppCouponSel
		},
		data() {
			return {
				constant: this.$constant,
				inpFocus: false,
				// tab
				tabIndex: 0,
				tabs: [
					{
						name: '直接付款'
					},
					{
						name: '我要配送'
					}
				],
				// 初始form
				amount: '',
				form: {
					payWay: 0 // 0微信 1支付宝 2余额
				},
				// 支付相关 ============
				aliPayHtml: '',
				passwordModal: false,
				modalForm: {
					payPassword: ''
				},
				appendFrm: {
					// anonymity: '0', // 是否匿名 0不 1要
					sendDistance: '', // 配送距离，根据腾讯js进行计算
					// goodsId: '', // 【商城下单特有字段】商品id
					// goodsStyleId: '', // 【商城下单特有字段】商品款式id
					// goodsNum: '', // 【商城下单特有字段】商品数量
					// couponId: '0', // 优惠券id，默认0没有使用优惠券
					receiveLat: '', // 收花人纬度
					receiveLong: '' // 收花人经度
				}
			}
		},
		computed: {
			...mapGetters({ orderShop: 'getOrderShop' }),
			...mapGetters({ shopUser: 'getShopUser' })
		},
		onLoad(option) {
			// this.option = this.$util.isEmpty(option) || {
			// 	account: 12358,
			// 	shopId: 15680
			// }
			this.specialInit()
		},
		mounted() {},
		methods: {
			isWxBrowser: isWxBrowser,
			specialInit() {
				// this.$util.getCheckLogin().then(res => {})
				if (this.option.pageType) {
					this.tabIndex = parseInt(this.option.pageType)
				}
				getOrderShop().then(res => {
					this.inpFocus = true
					console.log(res)
					uni.setNavigationBarTitle({
						title: `您正在向【${res.shop.merchantName}】付款`
					})
				})
				if (isLogin()) {
					getShopUser()
				}
			},
			_pay() {
				if (!this.amount) {
					this.$msg('请先输入金额！')
					return false
				}
				let params = {}
				let host = null
				if (this.option.pageStatus == 'recharge') {
					params = {
						amount: this.amount
					}
					host = recharge
				} else {
					params = {
						needSend: this.tabIndex == 0 ? '0' : '1',
						prePrice: this.amount,
						payWay: this.form.payWay
						// sourceType: 1,
						// shopId: 15680
					}
					if (this.tabIndex == 1) {
						let deliveryForm = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {}
						let deliveryRegion = this.$refs.appDelivery.region ? this.$refs.appDelivery.region : {}
						params = {
							...params,
							...deliveryForm,
							...deliveryRegion
						}
					}
					host = fastPay
				}
				host(params).then(res => {
					if (this.form.payWay == 0) {
						wexinPay(res.data, this.paySuccess, this.payFail)
					} else if (this.form.payWay == 1) {
						this.aliPayHtml = res
						this.$nextTick(() => {
							this.$refs.alipayWap.children[0].submit()
						})
						// location.href = res.data
					}
					// window.location.href = res.data.pay_button.mweb_url
				})
			},
			// tab切换
			tabChange(e) {
				this.tabIndex = e.index
				this.inpFocus = true
			},
			// 点击输入框
			focusFn() {
				this.inpFocus = true
			},
			// 失焦
			blurFn() {
				this.inpFocus = false
			},
			// 点击键盘
			clickKeyFn(val) {
				this.amount = val
			},
			// 支付宝支付
			aliPayFn() {
				this.form.payWay = 1
				this._pay()
			},
			// 微信支付
			wexinPayFn() {
				this.form.payWay = 0
				this._pay()
			},
			// 余额支付
			balancePayFn() {
				this.form.payWay = 2
				this.passwordModal = true
			},
			passwordModalClick(e) {
				if (e.index === 0) {
					this.modalCancel()
				} else {
					this._pay()
				}
			},
			modalCancel() {
				this.passwordModal = false
				this.modalForm.payPassword = ''
			},
			// 支付成功
			paySuccess() {
				// alert('支付成功!')
				this.$util.pageTo({
					url: '/pages/callback/index',
					type: 2,
					query: {
						pagestatus: 3,
						...this.params
						// orderSn: this.option.orderSn,
						// payDiscountPrice: res.data.discountAmount
					}
				})
			},
			payFail() {
				alert('支付失败!')
			}
		}
	}
</script>

<style lang="scss">
	.app-content {
		// min-height: 0;
		// padding-top: 100px;
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.tabs-wrap {
		position: fixed;
		top: 0;
		width: 100%;
		height: 80px;
		line-height: 80px;
		text-align: center;
		background-color: #fff;
		font-size: 30px;
		box-shadow: 4px 4px 10px #eee;
	}

	.pay-wrap {
		.logo-wrap {
			padding-top: 70px;
			padding-bottom: 60px;
			text-align: center;
			.logo-img {
				width: 120px;
				margin: 0 auto 20px;
				border-radius: 50%;
				img {
					border-radius: 50%;
				}
			}
		}
		.pay-input-wrap {
			background-color: #fff;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			padding: 50px 80px 28px;
			margin-bottom: 0 !important;
			.balance {
				margin-top: 30px;
				color: $fontColor2;
			}
			.btn-wrap {
				width: 100%;
				margin-top: 64px;
				.button-com {
					display: block;
					margin-bottom: 20px;
					padding-top: 30px;
					padding-bottom: 30px;
				}
			}
		}
	}

	// 我要配送
	.delivery-wrap {
		.module-com {
			margin-bottom: 20px;
			background-color: #fff;
			.module-tit {
				padding: 20px 18px;
				font-size: 28px;
				font-weight: 600;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				padding: 0 30px;
			}
		}
		// 金额
		.pay-input-wrap {
			padding: 50px 36px 38px;
			.balance {
				margin-top: 30px;
				color: $fontColor2;
			}
		}
		.shop-logo-wrap {
			padding-bottom: 20px;
			@include disFlex(center, center);
			.logo-img {
				width: 80px;
				border-radius: 50%;
				margin-right: 20px;
				img {
					border-radius: 50%;
				}
			}
		}
		// 可选优惠
		.discount-wrap {
			.module-det {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
		// 匿名派送
		.none-name-delivery {
			// padding-left: 30px;
			padding: 26px 30px;
			// margin-top: 40px;
			margin-bottom: 20px;
			background-color: #fff;
			.none-name-text {
				margin-left: 14px;
				color: $fontColor2;
			}
		}
		// 按钮
		.btn-wrap {
			width: calc(100% - 60px);
			margin: 64px auto 0;
			padding-bottom: 20px;
			.button-com {
				display: block;
				margin-bottom: 20px;
				padding-top: 30px;
				padding-bottom: 30px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// 查看更多
		.view-more {
			width: 100%;
			// padding-top: 10px;
			padding-bottom: 20px;
			margin-bottom: 20px;
			font-size: 28px;
			@include disFlex(center, center);
			background-color: #fff;
			color: #3385ff;
			.view-more-text {
				margin-right: 14px;
			}
			i {
				font-size: 30px;
				font-weight: 600;
			}
			&.open {
				i {
					transform: rotate(180deg);
				}
			}
		}
	}
</style>
