<template>
	<view>
		<view class="d-c d-c-c user-info">
			<image class="grade-img" :src="!type ? userInfo.gradeIcon : userData.thisAvatarUrl" mode=""></image>
			<view class="f36 gray3 fb mb20">{{ !type ? userInfo.pkGradeVal : userData.thisAwardsName }}</view>
			<view class="f26 gray6 mb10" v-if="!type">
				{{ $t('MY_ORD_71') }}
				<text>{{ userData.globalCode }}</text>
			</view>
			<view class="f26 gray6" v-if="!type">
				{{ $t('S_L_4') }}
				<text>{{ userData.countryCode }}</text>
			</view>
		</view>
		<view class="main-box">
			<view v-for="(item, index) in gradeList" :key="index" class="ww100 d-b-c mb40">
				<view class="item-box" :style="'width:' + (((index + 1) * 50) / gradeList.length + 36) + '%;background-color:' + item.color + ';'">
					<text>{{ !type ? item.gradeName : item.awardsName }}</text>
					<text>{{ !type ? formatNum(item.startValue) : item.communityCheckStr }}</text>
				</view>
				<view class="flex-1"><image class="item-img" :src="item.image" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			userData: {},
			gradeList: [],
			type: 0
		};
	},
	onLoad(e) {
		this.type = e.type || 0;
		let title = this.$t('APP_ADD_2');
		if (this.type) {
			title = this.$t('APP_ADD_3');
		}
		uni.setNavigationBarTitle({
			title: title
		});
		this.getInfo();
		this.getData();
	},
	methods: {
		getInfo() {
			let self = this;
			self._get('member/api/member/get-info', {}, res => {
				self.userInfo = res.data;
			});
		},
		getData() {
			let self = this;
			let url = 'member/api/member-footmark/grow-up-footmark-grade';
			if (this.type == 1) {
				url = 'member/api/member-footmark/grow-up-footmark-awards';
			}
			self._get(url, {}, res => {
				if (this.type == 1) {
					self.gradeList = res.data.awardsList;
				} else {
					self.gradeList = res.data.gradeList;
				}
				self.userData = res.data;
			});
		}
	}
};
</script>

<style lang="scss">
.user-info {
	width: 704rpx;
	margin: 26rpx auto;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 46rpx 20rpx;
	box-sizing: border-box;
}
.grade-img {
	width: 200rpx;
	height: 200rpx;
}
.item-img {
	width: 76rpx;
	height: 76rpx;
}
.main-box {
	width: 705rpx;
	margin: 0 auto;
	padding: 35rpx 23rpx;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 15rpx;
}
.item-box {
	// width: 444rpx;
	height: 72rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	box-sizing: border-box;
	align-items: center;
	background: #c0c1c1;
	border-radius: 0rpx 36rpx 36rpx 0rpx;
	color: #fff;
}
</style>
