<template>
	<view>
		<view v-if="identity != null" :style="(identity.open || identity.renew) ? 'padding-bottom:230rpx': 'padding-bottom:110rpx'">
			<image class="vip-cover" :src="identity.cover" mode="widthFix"></image>
			<view class="vip-footer">
				<view class="vip-text">
					<text class="vip-text-item">{{identity.identity_name}}</text>
					<text class="vip-text-item">到期时间: {{identity.end_at || '长期'}}</text>
				</view>
				<button class="vip-btn" v-if="identity.open || identity.renew" @click="vipShow = true">{{identity.open ? '开通': ''}}{{identity.renew ? '续费': ''}} (￥{{identity.price}}/{{identity.years}}年)</button>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="vipShow" mode="center" :round="10" closeable @close="vipShow = false">
			<view class="vip-tips" v-if="identity != null">
				<view class="vip-tips-title">开通会员</view>
				<view class="vip-tips-price"><text class="vip-tips-price-sm">￥</text>{{identity.price}}</view>
				<view class="vip-tips-text">年限{{identity.years}}年</view>
				<input class="vip-tips-input" placeholder="请输入真实姓名" v-model="nickname" />
				<button class="vip-tips-btn" @click="onOpen">去支付</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { identity, vip } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				vipShow	: false,
				identity: null,
				nickname: ""
			};
		},
		onShow(){
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			identity().then(res => {
				this.identity = res;
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			onOpen(){
				if(this.nickname == ''){
					uni.showToast({
						title: '请输入真实姓名',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: "获取支付...",
					mask : true
				})
				vip({ real_name: this.nickname }).then(res => {
					uni.hideLoading()
					let { order_type, order_id } = res
					this.$Router.push({
						name: "Pay",
						params: {
							orderId		: order_id,
							orderType	: order_type
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.vip-cover{ width: 100%; vertical-align: top; }
	.vip-footer{
		padding: 30rpx;
		background: #d2382c;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.vip-text{
			color: #fff5e9;
			font-size: 30rpx;
			text-align: center;
			line-height: 50rpx;
			.vip-text-item{ padding: 0 15rpx; }
		}
		.vip-btn{
			margin-top: 30rpx;
			background: linear-gradient(to right, #fffefc, #fff0d9);
			color: #d2382c;
			font-weight: bold;
			font-size: 34rpx;
			border-radius: 45rpx;
			line-height: 90rpx;
			&::after{ display: none; }
		}
	}
	// 开通会员弹出层
	.vip-tips{
		width: 75vw;
		padding: 50rpx;
		box-sizing: border-box;
		.vip-tips-title{ text-align: center; font-weight: bold; font-size: 36rpx; padding-bottom: 30rpx; }
		.vip-tips-price{
			text-align: center;
			font-weight: bold;
			font-size: 50rpx;
			color: #d2382c;
			&-sm{ font-size: 80%; }
		}
		.vip-tips-text{ font-size: 30rpx; color: gray; padding-bottom: 50rpx; text-align: center; }
		.vip-tips-input{ background: #f7f8f9; border-radius: 45rpx; height: 90rpx; margin-bottom: 30rpx; padding: 0 30rpx; text-align: center; font-size: 32rpx; }
		.vip-tips-btn{ background: #d2382c; color: white; line-height: 90rpx; border-radius: 45rpx; font-weight: bold; font-size: 34rpx; }
	}
</style>
