<template>
	<view class="my-medal">
		<view class="back-icon" @click="back()">
			<u-icon name="arrow-left"></u-icon>
		</view>
		<view class="medal-img">
			<u-avatar style="margin: 0 auto;" v-if="userInfo.avatar && userInfo.avatar!=''" shape="circle" :size="76" :src="userInfo.avatar" ></u-avatar>
			<view  v-else>
			   <view v-if="userInfo.sex == null" class="peo"></view>
			   <view v-else>
			   	  <view class="peo" v-if="userInfo.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
			   	  <view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
			   </view>
			 </view>
			<view class="medal-img-name">{{userInfo.name}}</view>
		</view>
		<view class="medal-list">
			<view class="medal-title">我的勋章</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view class="medal-list-index" v-for="me in medalList" :key="me.id" @click="handelClick(me)">
					<view class="medal-img-index">
						<image style="width:136upx;height:152upx" :src="fileBaseUrl+me.medalIcon" mode=""></image>
						<text class="img-name">{{me.medalName}} </text>
						<text class="img-level">LV.{{me.medalLevel}}</text>
					</view>
					
					<view class="medal-name">{{me.medalName}} <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;">LV.{{me.medalLevel}}</text></view>
				</view>
				<view class="medal-list-index"  >
					<view class="medal-img-index">
						<image style="width:136upx;height:152upx" src="/static/images/login_medal.png" mode=""></image>
						<text class="img-name">上线纪念章 </text>
						<text class="img-level"></text>
					</view>
					
					<view class="medal-name">上线纪念章 <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;"></text></view>
				</view>
				<view class="medal-list-index" v-if="year2023" >
					<view class="medal-img-index">
						<image style="width:136upx;height:152upx" src="/static/images/medal/medal20231.png" mode=""></image>
						<text class="img-name">元旦勋章 </text>
						<text class="img-level"></text>
					</view>
					
					<view class="medal-name">元旦勋章 <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;"></text></view>
				</view>
				<view class="medal-list-index">
					<view class="medal-img-index">
						<image style="width:136upx;height:152upx" src="/static/images/medal/china2023m.png" mode=""></image>
						<text class="img-name">春节勋章 </text>
						<text class="img-level"></text>
					</view>
					<view class="medal-name">春节勋章 <text style="font-size: 24upx;color:#387DF7;margin-left: 6upx;"></text></view>
				</view>
			</view>
			
		</view>
		<u-popup :show="show" mode="bottom">
		    <view class="medel-show-box">
				<image class="img" @click="show = false" style="width:44upx;height:44upx" src="../../static/images/cancel.png" mode=""></image>
		       <view class="medal-info-top">
				   <view class="medal-img-index">
				   	 <image style="width:268upx;height:300upx" :src="fileBaseUrl+medalData.medalIcon" mode=""></image>
					 <text class="img-name">{{medalData.medalName}} </text>
					 <text class="img-level">LV.{{medalData.medalLevel}}</text>
				   </view>
		       	  
				  <view class="title-info">
				  	{{medalData.medalName}} <text style="color: #387DF7;">LV.{{medalData.medalLevel}}</text>
				  </view>
				  <view class="title-text">
				  	{{medalData.requirement}}
				  </view>
		       </view>
			   <view class="medal-info-flex">
			   	 <view class="medal-info-index" v-for="(ru,index) in rulesData.rules">
					 <view class="" style="height: 50upx;">
					 	<image v-if="showLevel== index+1" style="width:32upx;height:16upx" src="../../static/images/triangle.png" mode=""></image>
					 </view>
					 <view  class="medal-img-index" @click="tabQu(ru,index+1)">
					 	<image v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" style="width:104upx;height:120upx" :src="fileBaseUrl+rulesData.icon" mode=""></image>
						<image v-else style="width:104upx;height:120upx" :src="fileBaseUrl+rulesData.iconGrey" mode=""></image>
						<text  v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" class="img-name">{{medalData.medalName}} </text>
						<text class="img-level">LV.{{index+1}}</text>
					 </view>
					 <text v-if="index+1 < medalData.medalLevel || index+1 == medalData.medalLevel" style="color: #387DF7;font-size: 24upx;">LV.{{index+1}}</text>
					<text v-else  style="color: color: #666666;font-size: 24upx;">LV.{{index+1}}</text>
			   	 </view>
			   </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters,mapActions} from 'vuex';
	import apiStat from '@/api/phase2/stat.js';
	import apiYearMedal from '@/api/phase2/yearMedal.js';
	export default {
		data(){
			return {
				webBaseUrl:this.$config.context,
				showLevel:1,
				show:false,
				year2023:false,
				fileBaseUrl:this.$config.fileUrl,
				medalList:[],
				medalData:{},
				medalConfig:[],
				rulesData:{
					rules:[],
				},
			}
			},
		computed: {
		    ...mapGetters(['userInfo'])
		},
		mounted() {
			apiYearMedal.has2023().then(rs=>{
			   if(rs.status==200 && rs.result){
			     this.year2023=true;
			   }
			 });
			this.getMedal();
			this.getConfig();
		},
		methods:{
			tabQu(ru,index) {
				// if(index == this.medalData.medalLevel || index > this.medalData.medalLevel) {
					this.medalData.requirement = ru.remark;
					this.showLevel = ru.level;
				// }
			},
			back(){
			 uni.navigateBack();	
			},
			getConfig() {// 获取勋章配置
			    apiStat.userMedalConfig().then(res=>{
			        if(res.status == 200) {
			           this.medalConfig = res.result;
			        }
			   })
			},
			handelClick(me) {
				this.medalData = me;
				this.showLevel = this.medalData.medalLevel;
				this.show = true;
				let data = this.medalConfig.find(it=>it.id ==me.medalId);
				this.rulesData = data;
				this.rulesData.rules = JSON.parse(data.rules);
			},
			getMedal() {
			    apiStat.userMedal(this.userInfo.aid).then(res=>{
			       if(res.status == 200) {
			         this.medalList = res.result
			       }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-medal{
		background: url(../../static/images/me-bg.png) no-repeat 100% / 100%;
		background-position: 0 0;
		position: relative;
		padding-top: 220upx;
		/deep/ .u-popup__content{
			border-radius: 16upx;
		}
	   .back-icon{
		   position: absolute;
		   top:110upx;
		   left:40upx;
		 /deep/  .uicon-arrow-left{
			   color: #fff !important;
		   }
	   }
		.medel-show-box{
			position: relative;
			background: url(../../static/images/show-bg.png) no-repeat 100% / 100%;
			background-position: 0 0;
			padding-bottom: 80upx;
			.img{
				position: absolute;
				right:40upx;
				top:40upx
			}
			.medal-info-top{
				text-align: center;
				margin-top: 152upx;
				.title-info{
					font-size: 40upx;
					font-weight: 500;
					color: #333333;
					margin-top: 26upx;
				}
				.title-text{
					margin-top: 24upx;
					font-size: 28upx;
					color: #999999;
				}
				.medal-img-index{
					position: relative;
					width:268upx;
					height:300upx;
					margin: 0 auto;
					.img-name{
						position: absolute;
						font-size: 26upx;
						color: #fff;
						bottom: 10%;
						left:0;
						right:0;
					}
					.img-level{
						position: absolute;
						font-size: 24upx;
						color: #fff;
						left:0;
						right:0;
						top: 24%;
					}
				}
			}
			.medal-info-flex{
				display: flex;
				overflow-x: auto;
				padding: 30upx 52upx;
				.medal-info-index{
					text-align: center;
					margin-right: 60upx;
					.medal-img-index{
						position: relative;
						.img-name{
							position: absolute;
							font-size: 20upx;
							color: #fff;
							bottom: 10%;
							left:0;
							right:0;
							// left:6%;
							transform: scale(.6);
						}
						.img-level{
							position: absolute;
							font-size: 12upx;
							color: #fff;
							top:24upx;
							left:0;
							right:0;
							transform: scale(.6);
						}
					}
				}
			}
			
		}
		.medal-img{
			text-align: center;
			.peo{
				width: 76px;
				height: 76px;
				margin: 0 auto;
				// text-align: center;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					vertical-align: middle;
				}
			}
			.medal-img-name{
				margin-top: 20upx;
				font-size: 36upx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.medal-list{
			background: #fff url(../../static/images/me-box.png) no-repeat 94% / 94%;
			background-position: 14upx 26upx;
			border-radius: 20upx 20upx 0px 0px;
			backdrop-filter: blur(32px);
			margin: 70upx 32upx 0 32upx;
			height: 47vh;
			max-height: 47vh;
			padding: 60upx 24upx;
			padding-bottom: 140upx;
			.medal-title{
				font-size: 36upx;
				font-weight: 500;
				color: #0A89FC;
				margin-left: 74upx;
				margin-top: 26upx;
				margin-bottom: 30upx;
			}
			// margin-top: 510upx;
			.medal-list-index{
				text-align: center;
				// margin: 0 24upx;
				width: 33%;
				margin-top: 60upx;
				// display: flex;
				.medal-name{
					margin-top: 16upx;
					font-size: 28upx;
					font-weight: 500;
					color: #333333;
				}
			
			}
			.medal-img-index{
				position: relative;
				.img-name{
					position: absolute;
					font-size: 20upx;
					color: #fff;
					bottom: 20upx;
					// left:36upx;
					left:0;
					right:0;
					transform: scale(.8);
				}
				.img-level{
					position: absolute;
					font-size: 12upx;
					color: #fff;
					// left:60upx;
					top: 30upx;
					left:0;
					right:0;
					transform: scale(.8);
				}
			}
			// .medal-list-index:last-child{
			// 	.medal-img-index .img-level{
			// 		left:50upx;
			// 	}
			// }
			
		}
		
	}
</style>
