<template>
	<view>
		<view class="pay-type-list" v-if="Object.keys(payments).length>0">
			<view class="type-item b-b" @click="changePayType(k)" :key="k" v-for="(item,k) in payments">
				<text :class="item.iconFont" class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">{{item.text}}</text>
					<text>{{item.note}}</text>
				</view>
				<label class="radio">
					<radio value="k" color="#fa436a" :checked='payType === k' />
					</radio>
				</label>
			</view>
		</view>
		<empty v-else note="没有可用支付方式"></empty>
	</view>
</template>

<script>
	import empty from './empty-content.vue'

	import {
		PAYMENT_DATE_KEY,
		DEFAULT_PAYMENT_PASS,
		buildPaymentData,
		getSupportedPaymentsPass,
		PaymentPassComplete,
		orderLaunchPayment,
		orderPaymentDataHandle,
		paymentByVipPreset,
		openLivePayment,
		cacheDataLoop,
		buildPaymentDataToPage
	} from '../js/request.js'

	export default {
		props: ['pay', 'refresh', 'confirmPay'],
		components: {
			empty
		},
		data() {
			return {
				payType: DEFAULT_PAYMENT_PASS,
				orderInfo: {},
				payments: {},
				paymentDataValue: null
			};
		},
		created() {
			const refresh = this.refresh
			if (refresh) {
				buildPaymentDataToPage({
					toPage: false
				})
			}
			this.getSupportedPaymentsPassRequest()
			this.$info(`Cache Launch data`, this.value())
			if (this.confirmPay) this.confirm()
		},
		methods: {
			value() {
				const data = cacheDataLoop(PAYMENT_DATE_KEY) || this.pay || {}
				this.setPaymentData(data)
				return data
			},
			paymentData() {
				return this.paymentDataValue
			},
			setPaymentData(data) {
				this.paymentDataValue = data.data
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			async getSupportedPaymentsPassRequest() {
				this.payments = await getSupportedPaymentsPass()
			},
			setrRetry(data = this.paymentDataValue) {
				let cache = this.value()
				cache.data = data
				cache.toPage = false
				buildPaymentDataToPage(cache)
				this.confirm()
			},
			//确认支付
			async confirm() {
				const that = this
				let cache = this.value()

				this.$info(`Cache confirm Launch data`, cache)

				let paymentData = this.paymentData()

				console.log('paymentData', paymentData)

				if (!paymentData || cache.pass !== this.payType) {
					switch (cache.scene) {
						case 'ORDER': {
							const data = await orderLaunchPayment(cache.id, this.payType)
							const alt = orderPaymentDataHandle(data, (val) => {
								console.log(this.value())
								that.paymentDataValue = val
							}, cache.raw)
							if (alt) return
							else {
								that.setrRetry()
								return
							}
							break
						}
						case 'VIP': {
							const paymentData = await paymentByVipPreset(cache.id, this.payType)
							if (!paymentData) {
								that.navToPaySuccess()
								return
							}

							that.setrRetry(paymentData.data)
							return
						}
						case 'LIVE': {
							const paymentData = await openLivePayment({
								recommendUser: cache.id,
								paymentPass: this.payType
							})
							if (!paymentData) {
								that.navToPaySuccess()
								return
							}

							that.setrRetry(paymentData.data)
							return
						}
						default: {
							this.message(`不支持的场景类型`, 'pro-fail')
							return
						}
					}
				}

				paymentData.package = paymentData.packageValue

				this.$info(`After reassembling the payment parameters`, paymentData)

				uni.requestPayment(Object.assign({
					provider: PaymentPassComplete[this.payType].provider,
					success(res) {
						buildPaymentData()
						that.$info(`Payment center pays successfully`, res)
						that.navToPaySuccess(cache.scene === 'ORDER')
						// 清理数据
						buildPaymentDataToPage({
							toPage: false
						})
					},
					fail(e) {
						that.$error(`Payment center failed to initiate payment`, e)
						that.message(`支付失败`, 'pro-fail')
					}
				}, paymentData))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
			flex-direction: row;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
</style>
