<template>
	<div class="app-content">
		<!-- <div class="tabs-wrap"> -->
		<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
		<!-- </div> -->
		<!-- 直接付款 -->
		<block v-if="tabIndex == 0">
			<div class="logo-wrap">
				<div class="logo-img">
					<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
				</div>
				<div class="app-size-30">国兰花尚</div>
			</div>
			<div class="pay-input-wrap">
				<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
				<div class="balance">
					<span>账户余额 ¥</span>
					<span class="app-size-30">2872.09</span>
				</div>
				<!-- 按钮 -->
				<div class="btn-wrap">
					<button class="button-com red" @click="_pay">余额支付</button>
					<button class="button-com green" @click="_pay">微信支付</button>
				</div>
			</div>
		</block>
		<!-- 我要配送 -->
		<block v-else>
			<app-delivery-module />
		</block>
		<!-- <button @click="_pay">提交</button> -->
	</div>
</template>

<script>
import appTabs from '@/components/plugin/tabs'
import payInputModule from './components/pay-input'
import appDeliveryModule from '@/components/app-delivery'
import { getMiniAppUrl } from '@/utils/common'
import { getCheckLogin } from '@/utils/auth'
import wexinPay from '@/utils/pay/wxPay'
import { pay } from '@/api/pay'
import { oauth } from '@/api/login'
export default {
	name: 'pay',
	components: {
		appTabs,
		payInputModule,
		appDeliveryModule
	},
	data() {
		return {
			constant: this.$constant,
			option: '',
			amount: '',
			inpFocus: false,
			// tab
			tabIndex: 0,
			tabs: [
				{
					name: '直接付款'
				},
				{
					name: '我要配送'
				}
			]
		}
	},
	onLoad(option) {
		this.option = this.$util.isEmpty(option) || {
			account: 12358,
			shopId: 15680
		}
		// this.init()
	},
	methods: {
		init() {
			getCheckLogin().then(res => {
				if (!res) {
					// let params = {
					// 	suffixUrl: getMiniAppUrl(this.option, true)
					// }
					// oauth(params).then(res => {})
					location.href = `${this.constant.hostUrl}/auth/prepare?url=${encodeURIComponent(getMiniAppUrl(this.option, true))}`
				}
			})
		},
		_pay() {
			if (!this.amount) {
				this.$msg('请先输入金额！')
				return false
			}
			let params = {
				prePrice: this.amount,
				sourceType: 1,
				shopId: 15680
			}
			pay(params).then(res => {
				console.log(res)
				wexinPay(res.data, this.paySuccess, this.payFail)
				console.log(wexinPay)
				// window.location.href = res.data.pay_button.mweb_url
			})
		},
		// tab切换
		tabChange(e) {
			this.tabIndex = e.index
		},
		// 点击输入框
		focusFn() {
			this.inpFocus = true
		},
		// 失焦
		blurFn() {
			this.inpFocus = false
		},
		// 点击键盘
		clickKeyFn(val) {
			this.amount = val
		},
		// 支付成功
		paySuccess() {
			alert('支付成功!')
		},
		payFail() {
			alert('支付失败!')
		}
	}
}
</script>

<style lang="scss">
	.app-content {
		min-height: 0;
        padding-top: 100px;
		// padding-bottom: 120px;
	}
	.logo-wrap {
		padding-top: 70px;
		padding-bottom: 60px;
		text-align: center;
		.logo-img {
			width: 120px;
			margin: 0 auto 20px;
		}
	}
	.pay-input-wrap {
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 50px 80px 28px;
		.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;
			}
		}
	}
</style>
