<template>
	<view class="content">
		<view class="now-vip">
			<view class="top-vip">
				<view>当前等级</view>
				<view>爱心积分</view>
			</view>
			<view class="top-num">
				<view :class="{'num-dj': userInfo.level == 0}">
					<image class="icon-vip" v-for="i in userInfo.level" src="../../static/images/vip.png"></image>
				</view>
				<view v-if="userInfo.level !== 4 ">{{ userInfo.all_integral }}/{{ userInfo.next_integral }}</view>
				<view v-if="userInfo.level == 4">{{ userInfo.all_integral }}/{{ userInfo.all_integral }}</view>
			</view>
			<view class="line-progress">
				<u-line-progress active-color="#E62129" :percent="percent" :show-percent="false" :height="14"></u-line-progress>
			</view>
			<view class="vip-icon">
				<view>
					<image v-for="i in userInfo.level" class="icon-vip" src="../../static/images/vip.png"></image>
				</view>
				<view v-if="userInfo.level !== 4">
					<image v-for="i in userInfo.level + 1" class="icon-vip" src="../../static/images/vip.png"></image>
				</view>
				<view v-if="userInfo.level == 4">
					<image v-for="i in userInfo.level" class="icon-vip" src="../../static/images/vip.png"></image>
				</view>
			</view>
		</view>
		<!-- 成长体系 -->
		<view class="cztx-box">
			<view class="cztx-tit">成长体系</view>
			<view class="cztx-vip-box">
				<view class="experience-box">
					<view class="exper1">
						<view class="line-exper1" :class="{'line-sel': userInfo.level > 0 }"></view>
						<image class="exper1-img" src="../../static/images/v1.png"></image>
					</view>
					<view class="exper2">
						<view class="exper-text">孝心新贵</view>
						<view class="line-exper2" :class="{'line-sel': userInfo.level > 1 }"></view>
						<image class="exper2-img" src="../../static/images/v2.png"></image>
					</view>
					<view class="exper3">
						<view class="exper-text">乐善好施</view>
						<view class="line-exper3" :class="{'line-sel': userInfo.level > 2 }"></view>
						<image class="exper3-img" src="../../static/images/v3.png"></image>
					</view>
					<view class="exper4">
						<view class="exper-text">爱心巨匠</view>
						<view class="line-exper4" :class="{'line-sel': userInfo.level > 3 }"></view>
						<image class="exper4-img" src="../../static/images/v4.png"></image>
					</view>
				</view>
				<view class="cztx-experience">您可以通过更多公益行为来获得经验值</view>
			</view>
		</view>
		<!-- 如何获得爱心积分 -->
		<!-- <view class="love-box">
			<view class="love-tit">如何获得爱心积分？</view>
			<view class="love-text">下列操作可以帮助你获得爱心积分：</view>
			<view class="love-frame">
				<u-table>
						<u-tr class="frame-tit">
							<u-th class="frame-tit">操作</u-th>
							<u-th class="frame-tit">获得积分</u-th>
						</u-tr>
						<u-tr class='frame-tr'>
							<u-td class='frame-td'>首次登录</u-td>
							<u-td class='frame-td'>100</u-td>
						</u-tr>
						<u-tr class='frame-tr'>
							<u-td class='frame-td'>帮扶1次</u-td>
							<u-td class='frame-td'>10</u-td>
						</u-tr>
						<u-tr class='frame-tr'>
							<u-td class='frame-td'>分享1次</u-td>
							<u-td class='frame-td'>5(每日上限15)</u-td>
						</u-tr>
						<u-tr class='frame-tr'>
							<u-td class='frame-td'>在线满5分钟</u-td>
							<u-td class='frame-td'>5(每日上限20)</u-td>
						</u-tr>
						<u-tr class='frame-tr'>
							<u-td class='frame-td'>连续签到满1次</u-td>
							<u-td class='frame-td'>1(每日递增,最高7)</u-td>
						</u-tr>
					</u-table>
			</view>
		</view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			percent:'',
		}
	},
	onLoad() {
		this.loadData();
	},
	computed: {
		...mapState('user', ['userInfo']),
	},
	methods: {
		loadData() {
			let obj = this;
			if (obj.userInfo.level == 4) {
				obj.percent = 100;
			} else {
				obj.percent = (obj.userInfo.all_integral / obj.userInfo.next_integral) * 100;
			}
			obj.percent = parseInt(obj.percent);
			console.log(obj.percent,obj.userInfo);
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
	background: #FFFFFF;
}
.content {
	padding: 80rpx 60rpx 80rpx;
	.now-vip {
		.top-vip {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: $font-base;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 1;
		}
		.top-num {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 1;
			margin-top: 22rpx;
			.num-dj {
				visibility: hidden;
			}
			.icon-vip {
				width: 37rpx;
				height: 32rpx;
				margin-left: 5rpx;
			}
		}
		.line-progress {
			padding: 30rpx 54rpx 24rpx;
		}
		.vip-icon {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon-vip {
				width: 37rpx;
				height: 32rpx;
				margin-left: 5rpx;
			}
		}
	}
	.cztx-box {
		margin-top: 90rpx;
		.cztx-tit {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.cztx-vip-box {
			.experience-box {
				display: flex;
				align-items: flex-end;
				justify-content: space-around;
				padding: 14rpx 40rpx 0 60rpx;
				.exper-text {
					font-size: $font-sm;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-bottom: 30rpx;
				}
				.exper1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper1 {
						width: 14rpx;
						height: 26rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper1-img {
						width: 30rpx;
						height: 26rpx;
					}
				}
				.exper2 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper2 {
						width: 14rpx;
						height: 104rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper2-img {
						width: 50rpx;
						height: 32rpx;
					}
				}
				.exper3 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper3 {
						width: 14rpx;
						height: 182rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper3-img {
						width: 68rpx;
						height: 32rpx;
					}
				}
				.exper4 {
					display: flex;
					flex-direction: column;
					align-items: center;
					.line-exper4 {
						width: 14rpx;
						height: 260rpx;
						background: #EDEDED;
						border-radius: 7rpx 7rpx 0px 0px;
						margin-bottom: 24rpx;
					}
					.exper4-img {
						width: 87rpx;
						height: 32rpx;
					}
				}
				.line-sel {
					background: #E62129 !important;
				}
			}
			.cztx-experience {
				margin-top: 50rpx;
				text-align: center;
				font-size: $font-sm;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
	.love-box {
		margin-top: 96rpx;
		line-height: 1;
		.love-tit {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.love-text {
			font-size: $font-base;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin: 21rpx 0 35rpx;
		}
		.love-frame {
			width: 100%;
			border-radius: 12rpx;
			// border: 1px solid rgba(155,155,155,.3);
			.frame-tit {
				border-radius: 12rpx 12rpx 0 0;
				height: 84rpx;
			}
			.frame-tr{
				height: 84rpx;
				.frame-td{
					font-size: 28rpx;
					font-weight: 500;
					color: #222222;
				}
			}
		}
	}
}
</style>