<template>
	<view class="">
		<image class="award-bg" src="/static/bg/bg-award.png" mode=""></image>
		<view class="d-b-c userinfo">
			<view class="f32 white fb flex-1">{{ userInfo.memberName }}</view>
			<view class="d-c d-c-c">
				<image class="grad-img" :src="userInfo.image" mode=""></image>
				<view class="f24 white fb">{{ userInfo.awardsName }}</view>
			</view>
		</view>
		<view class="userinfo-content">
			<view class="d-b-c mb20">
				<view class="gray3	">
					{{ $t('S_C_18') }}：
					<text>{{ userInfo.aSumRealPv }}</text>
					{{ $t('S_C_58') }}
				</view>
				<view class="gray9">{{ userInfo.aSumRealPv }}/{{ userInfo.targetPv }}</view>
			</view>
			<view class="award-slider mb30">
				<view :style="'width: ' + getSlider(userInfo.aSumRealPv, userInfo.targetPv) + '%;'" class="award-slider-active red">
					<image v-if="userInfo.aSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
				</view>
			</view>
			<view class="d-b-c mb20">
				<view class="gray3	">
					{{ $t('S_C_19') }}：
					<text>{{ userInfo.bSumRealPv }}</text>
					{{ $t('S_C_58') }}
				</view>
				<view class="gray9">{{ userInfo.bSumRealPv }}/{{ userInfo.targetPv }}</view>
			</view>
			<view class="award-slider">
				<view :style="'width: ' + getSlider(userInfo.bSumRealPv, userInfo.targetPv) + '%;'" class="award-slider-active yellow">
					<image v-if="userInfo.bSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="award-content">
			<view class="d-b-c award-nav">
				<view @click="changeType(0)" class="award-nav-item" :class="{ active: listType == 0 }">{{ $t('S_C_18') }}</view>
				<view @click="changeType(1)" class="award-nav-item" :class="{ active: listType == 1 }">{{ $t('S_C_19') }}</view>
			</view>
			<view class="awardTilte-list">
				<view class="awardTitle-item" v-for="(item, index) in listData" :key="index">
					<view class="awarditem-top d-b-c">
						<image class="user-ava" :src="item.memberPath || '/static/default.png'" mode=""></image>
						<view class="flex-1">
							<view class="fb domation f22">NO.{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</view>
							<view class="f28 gray3">{{ item.memberName || $t('ESTORE_LEVEL_0') }}</view>
						</view>
						<view class="d-c d-c-c">
							<image class="user-gradeimg" :src="item.image" mode=""></image>
							<view class="f20 gray6">{{ item.awardsName }}</view>
						</view>
					</view>
					<view class="d-b-c mb20">
						<view style="white-space: nowrap;" class="mr10">{{ $t('S_C_18') }}</view>
						<view class="award-slider flex-1 bg-white">
							<view :style="'width: ' + getSlider(item.aSumRealPv, item.targetPv) + '%;'" class="award-slider-active red">
								<image v-if="item.aSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="d-b-c">
						<view style="white-space: nowrap;" class="mr10">{{ $t('S_C_19') }}</view>
						<view class="award-slider flex-1 bg-white">
							<view :style="'width: ' + getSlider(item.bSumRealPv, item.targetPv) + '%;'" class="award-slider-active yellow">
								<image v-if="item.bSumRealPv * 1 > 0" class="award-simg" src="/static/icon/award-slider.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				aSumRealPv: '0',
				bSumRealPv: '0',
				memberName: '',
				targetPv: '0',
				awardsName: '',
				image: '',
				pkAwards: 0,
				pkTransaction: 0,
				pkTransactionVal: '',
				asumRealPv: '0',
				bsumRealPv: '0'
			},
			listType: 0,
			listData: [],
			leftMemberAwardsUnderList: [],
			rightMemberAwardsUnderList: [],
			isFist: true
		};
	},
	onShow() {
		this.getData();
	},
	methods: {
		getSlider(a, b) {
			if (b * 1 != 0 && !b) {
				return 0;
			} else if (b * 1 > 0) {
				return ((a * 1) / (b * 1)) * 100;
			} else {
				return 100;
			}
		},
		changeType(n) {
			this.listType = n;
			if (n == 0) {
				this.listData = this.leftMemberAwardsUnderList;
			} else {
				this.listData = this.rightMemberAwardsUnderList;
			}
		},
		getData() {
			let self = this;
			self._get('member/api/member/index-awards', {}, res => {
				self.userInfo = res.data.memberAwardsUnderVO;
				self.leftMemberAwardsUnderList = res.data.leftMemberAwardsUnderList;
				self.rightMemberAwardsUnderList = res.data.rightMemberAwardsUnderList;
				if (this.isFist) {
					self.listData = self.leftMemberAwardsUnderList;
					this.isFist = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.award-bg {
	width: 750rpx;
	height: 287rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.userinfo {
	position: relative;
	z-index: 1;
	padding: 30rpx 43rpx 20rpx 43rpx;
	.grad-img {
		width: 72rpx;
		height: 66rpx;
		margin-bottom: 7rpx;
	}
}

.award-slider {
	width: 100%;
	height: 18rpx;
	background: #eeeeee;
	border-radius: 9rpx;
	position: relative;
	.award-slider-active {
		position: absolute;
		max-width: 100%;
		left: 0;
		top: 0;
		height: 18rpx;
		border-radius: 9rpx;
		.award-simg {
			width: 82rpx;
			height: 64rpx;
			position: absolute;
			top: 0;
			right: -22rpx;
			bottom: 0;
			margin: auto;
		}
	}
	.award-slider-active.red {
		background: #fb3024;
	}
	.award-slider-active.yellow {
		background: #ffae36;
	}
}
.award-slider.bg-white {
	background: #fff;
}
.userinfo-content {
	width: 706rpx;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 28rpx 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
	position: relative;
	z-index: 1;
	margin-bottom: 20rpx;
}
.award-content {
	width: 706rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 0 20rpx 24rpx 20rpx;
	box-sizing: border-box;
	margin: 0 auto;
	.award-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
		.award-nav-item {
			height: 97rpx;
			flex: 1;
			font-size: 28rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		.award-nav-item.active::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 80rpx;
			height: 5rpx;
			background: #fb3024;
		}
	}
}
.awardTilte-list {
	padding-top: 18rpx;
	.awardTitle-item {
		padding: 23rpx 20rpx 32rpx 20rpx;
		background: #f2f2f2;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.awarditem-top {
			margin-bottom: 40rpx;
			.user-ava {
				width: 98rpx;
				height: 98rpx;
				margin-right: 15rpx;
				display: block;
				flex-shrink: 0;
			}
			.user-gradeimg {
				width: 65rpx;
				height: 60rpx;
				display: block;
				flex-shrink: 0;
				margin-bottom: 9rpx;
			}
		}
	}
}
</style>
