<template>
	<view class="memberVip">
		<view class="bg">
			<view class="header">
				<view class="picTxt acea-row row-middle">
					<view class="pictrue">
						<image :src="userInfo.avatar"></image>
					</view>
					<view class="text acea-row row-middle">
						<view class="name line1">{{userInfo.nickname}}</view>
						<view class="vip" v-if='userInfo.vip'>
							<image :src="userInfo.vipIcon"></image>{{userInfo.vipName}}
						</view>
					</view>
				</view>
			</view>
			<view class="experience">
				<view class="title">当前经验值</view>
				<view class="num">{{levelInfo}}</view>
				<view class="axis">
					<view class="bar">
						<view class="barCon">
							<view class="solidBar" :style="'width: ' + widthLen +'%;'"></view>
						</view>
						<view class="acea-row row-around row-middle">
							<view class="spotw acea-row row-center" v-for="(item,index) in levelList" :key='index'>
								<view class="spot"
									:class="current >item.experience?'past':'' + ' ' + current==item.experience?'on':''">
								</view>
							</view>
						</view>
					</view>
					<view class="numList acea-row row-around row-middle">
						<view class="item" :class="current >=item.experience?'past':''"
							v-for="(item,index) in levelList" :key="index">{{item.experience}}</view>
					</view>
				</view>
				<view class="vipList acea-row">
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip01.png"></image>
						</view>
						<view class="name">会员折扣</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip02.png"></image>
						</view>
						<view class="name">专属徽章</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip03.png"></image>
						</view>
						<view class="name">会员升级</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip04.png"></image>
						</view>
						<view class="name">经验积累</view>
					</view>
					<view class="item">
						<view class="pictrue">
							<image src="./../static/vip05.png"></image>
						</view>
						<view class="name">更多特权</view>
					</view>
				</view>
			</view>
			<view class="module">
				<view class="public_title acea-row row-middle">
					<view class="icons"></view>获取经验
				</view>
				<view class="gainList">
					<view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue"><text class="iconfont icon-qiandao2"></text></view>
							<view class="text">
								<view class="name line1">签到</view>
								<view class="info line1">每日签到可获得经验值</view>
							</view>
						</view>
						<navigator url='/pages/users/user_sgin/index' class="button" hover-class="none">去获取</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue on"><text class="iconfont icon-shangpin"></text></view>
							<view class="text">
								<view class="name line1">购买商品</view>
								<view class="info line1">购买商品可获得对应是经验值</view>
							</view>
						</view>
						<navigator url="/pages/goods_cate/goods_cate" class="button" hover-class="none"
							open-type='switchTab'>去获取</navigator>
					</view>
					<!-- <view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue on2"><text class="iconfont icon-yaoqing"></text></view>
							<view class="text">
								<view class="name line1">邀请好友</view>
								<view class="info line1">邀请好友注册商城可获得经验值</view>
							</view>
						</view>
						<navigator url="/pages/users/user_spread_code/index" class="button" hover-class="none">去获取</navigator>
					</view> -->
				</view>
			</view>
		</view>
		<view class="detailed" v-if="expList.length">
			<view class="public_title acea-row row-middle">
				<view class="icons"></view>经验值明细
			</view>
			<view class="list">
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in expList" :key="index">
					<view class="text">
						<view class="name">{{item.title}}</view>
						<view class="data">{{item.add_time}}</view>
					</view>
					<view class="num" v-if="item.pm">+{{item.number}}</view>
					<view class="num on" v-else>-{{item.number}}</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="expList.length">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home';
	import {
		mapGetters
	} from "vuex";
	import {
		getlevelInfo,
		getlevelExpList
	} from '@/api/user.js';
	export default {
		components: {
			home
		},
		computed: mapGetters(['userInfo']),
		data() {
			return {
				//userInfo: '',
				levelInfo: '',
				levelList: [],
				current: 0,
				widthLen: 0,
				loading: false,
				loadend: false,
				loadTitle: '加载更多', //提示语
				page: 1,
				limit: 20,
				expList: []
			};
		},
		onLoad() {
			this.levelInfo = this.userInfo.experience;
			this.getInfo();
			this.getlevelList();
		},
		methods: {
			getInfo: function() {
				let that = this;
				getlevelInfo().then(res => {
					let levelList = res.data;
					let list = []
					that.levelList = levelList;
					levelList.map((item, index) => {
						if (item.experience <= that.levelInfo) {
							list.push(item.experience)
						}
					})
					let maxn = Math.max.apply(null, list);
					that.current = maxn;
					// 解决len取的值没有时；
					let levelListLen = levelList[list.length] ? levelList[list.length] : levelList[list
						.length - 1];
					// 解决除数不能为0
					let divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
					// 每小格所占的百分比
					let per = (that.levelInfo - maxn) / divisor / levelList.length;

					that.widthLen = ((list.length - 0.5) / (levelList.length)) * 100 + per * 100

				}).catch(function(res) {
					return that.$util.Tips({
						title: res
					});
				})
			},
			getlevelList: function() {
				let that = this
				if (this.loadend) return false;
				if (this.loading) return false;
				getlevelExpList({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let expList = that.$util.SplitArray(list, that.expList);
					that.$set(that, 'expList', expList);
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			}
		},
		onReachBottom: function() {
			this.getlevelList();
		}
	}
</script>

<style lang="scss">
	.memberVip {
		.bg {
			background-color: #fff;

			.header {
				background-image: url('data:image/png;base64,[encoded data, 139160 characters]');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 380rpx;
				background-color: #fff;

				.picTxt {
					padding: 28rpx 39rpx;

					.pictrue {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.text {
						color: #FAE2C1;
						margin-left: 23rpx;

						.name {
							max-width: 385rpx;
						}

						.vip {
							padding: 6rpx 18rpx;
							border: 1px solid rgba(250, 226, 193, 1);
							border-radius: 20rpx;
							font-size: 18rpx;
							margin-left: 15rpx;
							display: flex;
							align-items: center;

							image {
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 8rpx;
							}
						}
					}
				}
			}

			.experience {
				background-image: url('data:image/jpg;base64,[encoded data, 30228 characters]');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 690rpx;
				height: 360rpx;
				margin: -250rpx auto 0 auto;
				border-radius: 23rpx;
				padding: 22rpx 27rpx;
				box-sizing: border-box;

				.title {
					font-size: 24rpx;
					color: #AE8B4A;
				}

				.num {
					font-size: 60rpx;
					color: #775C29;
					margin-top: 6rpx;
				}

				.axis {
					margin: 10rpx 0 15rpx 0;
					overflow: hidden;

					.bar {
						width: 630rpx;

						.spotw {
							width: 96rpx;
						}

						.barCon {
							width: 100%;
							height: 3rpx;
							background: #D7BD89;
							border-radius: 2rpx;

							.solidBar {
								width: 0;
								height: 100%;
								background: #775C29;
								border-radius: 2rpx;
								transition: width 0.6s ease;
							}
						}

						.spot {
							width: 8rpx;
							height: 8rpx;
							background: #D7BD89;
							border-radius: 50%;
							margin-top: -5rpx;

							&.past {
								background: #775C29;
							}

							&.on {
								background: #775C29;
								box-shadow: 0rpx 0rpx 8rpx #000;
							}
						}
					}

					.numList {
						font-size: 26rpx;
						color: #D7BD89;
						margin-top: 14rpx;

						.item {
							width: 96rpx;
							text-align: center;

							&.past {
								color: #775C29;
							}
						}
					}
				}

				.vipList {
					.item {
						width: 20%;
						text-align: center;

						.pictrue {
							width: 70rpx;
							height: 70rpx;
							margin: 0 auto;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name {
							font-size: 24rpx;
							color: #403D4E;
							margin-top: 18rpx;
						}
					}
				}
			}



			.module {
				padding: 40rpx 30rpx 0 30rpx;

				.gainList {
					margin-top: 10rpx;

					.item {
						height: 130rpx;
						position: relative;

						.picTxt {
							.pictrue {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								background: linear-gradient(-45deg, rgba(249, 119, 107, 1) 0%, rgba(255, 147, 137, 1) 100%);
								text-align: center;
								line-height: 70rpx;
								color: #fff;

								&.on {
									background: linear-gradient(-45deg, rgba(254, 160, 96, 1) 0%, rgba(255, 204, 170, 1) 100%);
								}

								&.on2 {
									background: linear-gradient(-45deg, rgba(157, 208, 116, 1) 0%, rgba(161, 214, 124, 1) 100%);
								}
							}

							.text {
								margin-left: 30rpx;
								width: 400rpx;

								.name {
									font-size: 30rpx;
									color: #282828;
								}

								.info {
									font-size: 24rpx;
									color: #999999;
									margin-top: 6rpx;
								}
							}
						}

						.button {
							width: 140rpx;
							height: 50rpx;
							background: linear-gradient(-90deg, rgba(231, 182, 103, 1) 0%, rgba(255, 234, 181, 1) 100%);
							border-radius: 25rpx;
							text-align: center;
							line-height: 50rpx;
							font-size: 26rpx;
							color: #8D5306;
						}

						&~.item {
							&::after {
								position: absolute;
								content: ' ';
								width: 720rpx;
								height: 1rpx;
								background: rgba(245, 245, 245, 1);
								top: 0;
								left: 0;
							}
						}
					}
				}
			}
		}

		.public_title {
			color: #282828;
			font-size: 30rpx;

			.icons {
				width: 6rpx;
				height: 28rpx;
				background: rgba(230, 192, 131, 1);
				margin-right: 10rpx;
			}
		}

		.detailed {
			padding: 30rpx 30rpx 0 30rpx;
			margin-top: 15rpx;
			background-color: #fff;

			.list {
				margin-top: 15rpx;

				.item {
					height: 122rpx;
					border-bottom: 1px solid #EEEEEE;

					.text {
						.name {
							font-size: 28rpx;
							color: #282828;
						}

						.data {
							color: #999;
							font-size: 24rpx;
						}
					}

					.num {
						font-size: 32rpx;
						color: $theme-color;
					}

					.on {
						color: #16AC57;
					}
				}
			}
		}
	}
</style>
