<template>
	<view class="content">
		<view class="header_top">
			<view class="top_text1">
				{{userInfo.memberName}}
			</view>
			<view class="header_top_right">
				<image class="header_img" v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon"></image>
				<image class="header_img" v-else src="@/static/images/avatar.png" mode=""></image>
				<view class="top_text2">{{userInfo.pkAwardsVal}}</view>
			</view>
		</view>
		<view class="top_card">
			<view class="card_flex">
				<view class="card_text1" v-if="dataList.memberAwardsUnderVO">
					{{ '左区' }}：{{ dataList.memberAwardsUnderVO.aSumRealPv }} {{ '万' }}
				</view>
				<view class="card_text2" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
					{{ dataList.memberAwardsUnderVO.aSumRealPv }}/{{
					                dataList.memberAwardsUnderVO.aSumRealPv
					              }}
				</view>
				<view class="card_text2" v-else>
					<span v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
						{{ dataList.memberAwardsUnderVO.aSumRealPv }}/{{
                  dataList.memberAwardsUnderVO.targetPv}}
					</span>
					<span v-else>
						{{ dataList.memberAwardsUnderVO.aSumRealPv }}
					</span>

				</view>
			</view>
			<view class="process">
				<view class="process-s" style="width: 100%" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
					<view class="image-icon" v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
						<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
					</view>
				</view>
				<view class="process-s" style="width: 100%" v-else :style="{
                width: `${
                  dataList.memberAwardsUnderVO.aSumRealPv > '0.00'
                    ? GetPercent(
                        dataList.memberAwardsUnderVO.aSumRealPv,
                        dataList.memberAwardsUnderVO.targetPv
                      ) >= 100
                      ? '100%'
                      : GetPercent(
                          dataList.memberAwardsUnderVO.aSumRealPv,
                          dataList.memberAwardsUnderVO.targetPv
                        ) + '%'
                    : '0%'
                }`,
              }">
					<view class="image-icon" v-if="dataList.memberAwardsUnderVO.aSumRealPv > '0.00'">
						<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="card_flex">
				<view class="card_text1" v-if="dataList.memberAwardsUnderVO"> {{ '右区' }}：{{ dataList.memberAwardsUnderVO.bSumRealPv
            }}{{ '万' }}</view>
				<view class="card_text2" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
					<span v-if="dataList.memberAwardsUnderVO.bSumRealPv > '0.00'">
						{{ dataList.memberAwardsUnderVO.bSumRealPv }}/{{
						dataList.memberAwardsUnderVO.bSumRealPv}}
					</span>
					<span v-else> {{ dataList.memberAwardsUnderVO.bSumRealPv }}</span>
				</view>
				<view class="card_text2" v-else>
					{{ dataList.memberAwardsUnderVO.bSumRealPv }}/{{
					              dataList.memberAwardsUnderVO.targetPv
					            }}
				</view>
			</view>
			<view class="process" v-if="dataList.memberAwardsUnderVO.targetPv == '-1.00'">
				<view class="process-s oran" style="width: 100%"></view>
			</view>
			<view class="process" v-else>
				<view class="process-s oran" :style="{
                width: `${
                  dataList.memberAwardsUnderVO.bSumRealPv > '0.00'
                    ? GetPercent(
                        dataList.memberAwardsUnderVO.bSumRealPv,
                        dataList.memberAwardsUnderVO.targetPv
                      ) >= 100
                      ? '100%'
                      : GetPercent(
                          dataList.memberAwardsUnderVO.bSumRealPv,
                          dataList.memberAwardsUnderVO.targetPv
                        ) + '%'
                    : '0%'
                }`,
              }">
					<view class="image-icon" v-if="dataList.memberAwardsUnderVO.bSumRealPv > '0.00'">
						<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="main_box">
			<view class="tab">
				<view v-for="(item, index) in tabList" :key="index" @click="isTab = item.value" class="tab_i"
					:class="[isTab===item.value?'heng':'heng1']">
					{{ item.label }}
				</view>
			</view>
			<template v-if="isTab==0">
				<view class="main_item" v-for="(item,index) in dataList.leftMemberAwardsUnderList" :key="index">
					<view class="main_top">
						<view class="main_top_left">
							<image class="headerimg" v-if="item.memberPath" :src="item.memberPath" mode=""></image>
							<image class="headerimg" v-else src="@/static/images/avatar.png" mode=""></image>
							<view class="">
								<view class="header_text1">NO.0{{index+1}}</view>
								<view class="header_text2">{{ item.memberName }}</view>
							</view>
						</view>
						<view class="main_top_right">
							<image class="awards_img" :src="item.image" mode=""></image>
							<view class="awards_name">
								{{item.pkTransactionVal}}
							</view>
						</view>
					</view>
					<view class="main_content">
						<view class="main_content_flex">
							<view class="main_content_text">{{ '左区' }}</view>
							<view class="main_process">
								<view class="process-s" v-if="item.targetPv == '-1.00'" style="width: 100%">
									<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
								<view class="process-s" v-else :style="{
									width: `${
									item.aSumRealPv > '0.00'
									? GetPercent(item.aSumRealPv, item.targetPv) >= 100
										? '100%'
									: GetPercent(item.aSumRealPv, item.targetPv) + '%'
								: '0%'
									}`,
										}">
									<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
							</view>
				
						</view>
						<view class="main_content_flex">
							<view class="main_content_text">{{ '右区' }}</view>
							<view class="main_process">
								<view class="process-s" v-if="item.targetPv == '-1.00'"
									style="background: #ffae36; width: 100%">
				
								</view>
								<view class="process-s" v-else style="background: #ffae36" :style="{
				          width: `${
				            item.bSumRealPv > '0.00'
				              ? GetPercent(item.bSumRealPv, item.targetPv) >= 100
				                ? '100%'
				                : GetPercent(item.bSumRealPv, item.targetPv) + '%'
				              : '0%'
				          }`,
				        }">
									<view class="image-icon" v-if="item.bSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="isTab==1">
				<view class="main_item" v-for="(item,index) in dataList.rightMemberAwardsUnderList" :key="index">
					<view class="main_top">
						<view class="main_top_left">
							<image class="headerimg" v-if="item.memberPath" :src="item.memberPath" mode=""></image>
							<image class="headerimg" v-else src="@/static/images/avatar.png" mode=""></image>
							<view class="">
								<view class="header_text1">NO.0{{index+1}}</view>
								<view class="header_text2">{{ item.memberName }}</view>
							</view>
						</view>
						<view class="main_top_right">
							<image class="awards_img" :src="item.image" mode=""></image>
							<view class="awards_name">
								{{item.pkTransactionVal}}
							</view>
						</view>
					</view>
					<view class="main_content">
						<view class="main_content_flex">
							<view class="main_content_text">{{ '左区' }}</view>
							<view class="main_process">
								<view class="process-s" v-if="item.targetPv == '-1.00'" style="width: 100%">
									<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
								<view class="process-s" v-else :style="{
									width: `${
									item.aSumRealPv > '0.00'
									? GetPercent(item.aSumRealPv, item.targetPv) >= 100
										? '100%'
									: GetPercent(item.aSumRealPv, item.targetPv) + '%'
								: '0%'
									}`,
										}">
									<view class="image-icon" v-if="item.aSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
							</view>
				
						</view>
						<view class="main_content_flex">
							<view class="main_content_text">{{ '右区' }}</view>
							<view class="main_process">
								<view class="process-s" v-if="item.targetPv == '-1.00'"
									style="background: #ffae36; width: 100%">
				
								</view>
								<view class="process-s" v-else style="background: #ffae36" :style="{
				          width: `${
				            item.bSumRealPv > '0.00'
				              ? GetPercent(item.bSumRealPv, item.targetPv) >= 100
				                ? '100%'
				                : GetPercent(item.bSumRealPv, item.targetPv) + '%'
				              : '0%'
				          }`,
				        }">
									<view class="image-icon" v-if="item.bSumRealPv > '0.00'">
										<image class="c_img" src="@/static/images/awards-1.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import * as api from '@/config/login.js'
	export default {
		data() {
			return {
				userInfo: {},
				dataList: [],
				tabList: [{
					value: 0,
					label: '左区'
				}, {
					value: 1,
					label:  '右区'
				}],
				isTab: 0,
			}
		},
		onShow() {
			this.getInfo()
			this.getIndexAwardsData()
		},
		methods: {
			getIndexAwardsData() {
				api.getIndexAwards().then((res) => {
					if (res.code == "200") {
						this.dataList = res.data;
					}
				});
			},
			GetPercent(num, total) {
				num = parseFloat(num);
				total = parseFloat(total);
				if (total < 0) {
					return 100 + "%";
				}
				if (isNaN(num) || isNaN(total)) {
					return "-";
				}
				return total <= 0 ? 0 : (num / total) * 100;
			},
			getInfo() {
				api.getInfo().then(res => {
					if (res) {
						this.userInfo = res.data
					}
				}).catch(error => {
					reject(error)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 10rpx 22rpx 50rpx 22rpx;
		min-height: 100vh;
		background: linear-gradient(to bottom, #e85244 0%, #e85244 20%, #eee 20%, #eee 100%);
		font-size: 24rpx;

		.header_top {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			color: #FFFFFF;

			.top_text1 {
				font-size: 32rpx;
			}

			.header_top_right {
				text-align: center;

				.header_img {
					width: 72rpx;
					height: 66rpx;

				}

				.top_text2 {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}

		.top_card {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 28rpx 22rpx;

			.card_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.card_text1 {
					color: #333333;
				}

				.card_text2 {
					color: #999999;
				}
			}

			.process {
				width: 665rpx;
				height: 18rpx;
				background: #ededed;
				border-radius: 10rpx;
				margin: 22rpx 0;

				.process-s {
					background: #fe4c4b;
					border-radius: 10rpx;
					height: 18rpx;
					position: relative;

					.image-icon {
						.c_img {
							width: 79rpx;
							height: 62rpx;
							position: absolute;
							right: -21rpx;
							top: -23rpx;
						}
					}
				}

				.oran {
					background: #ffae36
				}
			}
		}

		.main_box {
			padding: 42rpx 20rpx 24rpx 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 6rpx;
				background-color: #FFFFFF;

				.tab_i {
					text-align: center;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					white-space: nowrap;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-bottom: 24rpx;
					font-size: 28rpx;

				}

				.heng {
					border-bottom: 6rpx solid #FB3024;
					color: #FB3024;

				}

				.heng {
					color: #333333;
				}

			}

			.main_item {
				background: #F2F2F2;
				border-radius: 20rpx;
				padding: 23rpx 20rpx 35rpx 20rpx;
				margin-top: 20rpx;

				.main_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.main_top_left {
						display: flex;
						align-items: center;

						.headerimg {
							width: 98rpx;
							height: 98rpx;
							border-radius: 50%;
							margin-right: 15rpx;
						}

						.header_text1 {
							font-weight: bold;
							color: #FB3024;
							font-size: 20rpx;
							font-family: Microsoft YaHei UI;
						}

						.header_text2 {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #030219;
							margin-top: 8rpx;
						}
					}

					.main_top_right {
						.awards_img {
							width: 65rpx;
							height: 60rpx;
						}

						.awards_name {
							margin-top: 10rpx;
							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.main_content {
					.main_content_flex {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.main_content_text {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-right: 7rpx;
						}

						.main_process {
							width: 560rpx;
							height: 18rpx;
							background: #ffffff;
							border-radius: 10rpx;
							margin: 22rpx 0;

							.process-s {
								background: #fe4c4b;
								border-radius: 10rpx;
								height: 18rpx;
								position: relative;

								.image-icon {
									.c_img {
										width: 79rpx;
										height: 62rpx;
										position: absolute;
										right: -21rpx;
										top: -23rpx;
									}
								}
							}

							.oran {
								background: #ffae36
							}
						}
					}
				}
			}
		}
	}
</style>