<template>
	<view class="page-container">
		<view class="exchange-header-bg">
			<view class="header-bg-upper"></view>
		</view>
		<view class="status-bar"></view>
		<view class="page-header">会员兑换</view>
		<view class="exchange-header-content justify-between">
			<view>
				<view class="coin-num">{{data.user_coin || 0}}</view>
				<view class="sub-text">当前拥有金币</view>
			</view>
			<image src="/static/images/recharge-header-img.png" mode="widthFix">
		</view>
		<view class="exchange-box">
			<view style="text-align: center;">
				<image src="/static/images/exchange-img.png" mode="widthFix" class="exchange-img" />
			</view>
			<view class="package justify-around">
				<view v-for="(item, index) in data.list" :key="index" class="package-item"
					@click="onSelect(item.recharge_id)">
					<view class="packages-box" :class="item.recharge_id == id && 'selected'">
						<view class="package-title justify-center">
							<image src="/static/icon/icon-sign-in.png" />
							<text>{{item.exchange_coin}}</text>
						</view>
						<view class="package-month">{{item.recharge_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-button shape="circle" :disabled="loading" :loading="loading" color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)" text="立即成为尊贵VIP"
			class="exchange-button" @click="exchange"></u-button>
	</view>
</template>

<script>
	import {
		user
	} from '@/utils/api'

	export default {
		data() {
			return {
				data: {},
				id: 0,
				loading: false
			}
		},
		async onLoad() {
			await this.$onLaunched
			const token = getApp().globalData.userToken
			if (!token) {
				uni.redirectTo({
					url: '/pages/user/login'
				})
			} else {
				this.getData()
			}
		},
		methods: {
			getData() {
				user.exchange('vip').then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.id = res.data.selected
					}
				})
			},
			async exchange() {
				if (this.id === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择要兑换的内容~!',
						duration: 3000
					})
					return
				}
				if (this.data.user_coin < this.data.list[this.id].exchange_coin) {
					uni.showToast({
						icon: 'none',
						title: '您当前的金币不足~!',
						duration: 3000
					})
					return
				}
				this.loading = true
				await user.exchangeVip(this.id).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
					if (res.code === 1) {
						this.data.user_coin = res.data.user_coin
					}
				}).catch(e => {})
				this.loading = false
			},
			onSelect(id) {
				this.id = id
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 20px;
		background-color: $uni-bg-color;
		position: relative;

		.exchange-header-bg {
			width: 100%;
			text-align: right;
			background-color: #F9D7BC;
			position: absolute;
			left: 0;
			top: 0;
			height: 247px;
			.header-bg-upper {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 30%;
				// background: linear-gradient(180deg,rgba(247,195,152,.1),#fff);
			}
		}

		.page-header {
			height: 44px;
			line-height: 44px;
			font-size: 18px;
			font-weight: 700;
			text-align: center;
			position: relative;
			z-index: 1;
		}

		.exchange-header-content {
			padding: 0px 10px 0px 30px;
			position: relative;
			z-index: 1;
			align-items: center;
		
			uni-image {
				width: 175px;
				height: 176px;
			}
		
			.coin-num {
				font-size: 34px;
				font-weight: 600;
				color: #513120;
			}
		
			.sub-text {
				font-size: 14px;
				font-weight: 400;
				color: #513120;
			}
		}

		.exchange-box {
			width: 100%;
			min-height: 270px;
			border-radius: 10px !important;
			padding: 15px;
			background-color: $uni-bg-color;
			z-index: 99;
			position: relative;

			.exchange-img {
				width: 180px;
				margin: 5px 0 0 8px;
			}

			.package {
				margin-top: 10px;
				flex-wrap: wrap;

				.package-item {
					width: 33.33%;
					max-width: 120px;
					padding: 8px;

					.packages-box {
						border-radius: 10px;
						border: 1px solid #e3cbbd;
						overflow: hidden;
						background-color: #434140;
						.package-title {
							width: 100%;
							height: 50px;
							font-size: 18px;
							font-weight: 700;
							color: #FF8061;
							align-items: center;

							uni-image {
								width: 20px;
								height: 20px;
								margin-right: 5px;
							}
						}

						.package-month {
							height: 30px;
							line-height: 30px;
							font-size: 15px;
							color: #1a1a2a;
							background-color: #ffede8;
							text-align: center;
						}

						&.selected {
							
background: #FF8061 linear-gradient(90deg, #DA2538 0%, #F75F68 100%);
							border-color: #DA2538;
							
							.package-title {
								color: #fff;
							}

							.package-month {
								background-color: #F75F68;
								color: #fff;
							}
						}
					}
				}
			}
		}

		.exchange-button {
			width: auto;
			margin: 30px 15px 0;
			height: 44px;
			line-height: 44px;
		}
	}
</style>