
<style scoped lang="scss">
	.box{
		width: 100vw;
		height: 100vh;
		background: #111111;
		font-family: aa;
		overflow-y: auto;
		.box-top{
			width: 100%;
			height: 500rpx;
			position: relative;
			.box_t_name{
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 5%;
				top: 0;
				font-size: 58rpx;
				// color: #FFEBD2;字体的渐变
				 background-image:-webkit-linear-gradient(bottom,#F7D5AC,#FFEBD2,#F7D5AC); 
				  -webkit-background-clip:text; 
				    -webkit-text-fill-color:transparent; 
			}
			.box_t_state{
				position: absolute;
				width: 100%;
				top: 90rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.box_t_state_c{
					width: 252rpx;
					height: 40rpx;
					background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbandt.png') ;
					background-size:cover;
					font-size: 14px;
					color: #503614;
					text-align: center;
					line-height: 40rpx;
					
				}
			}
			.box_t_Sponsor{
				position: absolute;
				width: 100%;
				bottom: 14rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.box_t_Sponsor_text{
					font-size: 14px;
					color: #F7D5AC;
					height: 27px;
					line-height: 27px;
					border:1px solid #F6EDCC;
					padding: 0 15px;
					border-radius: 13px;
					background: #1E1E1E;
				}
			}
		}
		.box_conent{
			padding: 0 15px;
			.box_conent_basic{
				width: 100%;
				background: #333333;
				border-radius: 15px;
				padding: 15px;
				position: relative;
				margin-top: 15px;
				.box_conent_basic_img{
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.box_conent_basic_img_t{
						width: 370rpx;
						height: 54rpx;
						background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbandb.png') ;
						background-size:cover;
						font-size: 14px;
						color: #503614;
						text-align: center;
						line-height: 54rpx;
						
					}
				}
				.box_conent_basic_c{
					margin-top: 84rpx;
					.box_conent_basic_item{
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 5px;
						.box_c_b_item_l{
							width: 164rpx;
							font-size: 13px;
							color: #FFF;
						}
						.box_c_b_item_r{
							margin-left: 5px;
							display: flex;
							align-items: center;
							font-size: 13px;
							color: #FFF;
							font-weight: 500;
						}
					}
					.box_c_b_c_item{
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20px;
						.cbc_item_l{
							width: 16px;
							height: 24px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 12px;
							color: #FFFFFF;
						}
						.cbc_item_c{
							width: 50px;
							height: 50px;
							border-radius: 50px;
							margin:0 15px ;
							
						}
						.cbc_item_r{
							width: calc(100vw - 30px - 30px - 10px - 16px - 80px);
							height: 50px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}
						
					}
					.cans_c{
						width: 100%;
						display: flex;
						align-items: flex-start;
						margin-bottom: 15px;
						.cans_c_l{
							width: 100px;
							font-size: 12px;
							color: #FFFFFF;
						}
						.cans_c_r{
							width: 1px;
							flex:1;
							font-size: 13px;
							color: #FFFFFF;
							font-weight: bold;
						}
						
					}
					.img{
						width: 190rpx ;
						height: 190rpx ;
						margin-bottom: 10px;
						margin: 0 5px;
					}
				}
			}
			.btn_bm{
				width: 100%;
				height: 44px;
				border-radius: 10px;
				background: #F70027;
				font-size: 16px;
				color: #FFF;
				text-align: center;
				line-height: 44px;
				margin: 25px 0;
				font-weight: bold;
			}
		}
		.oneText{
			overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
			
		}
	}
</style>

<template>
	<view class="box">
		<view class="box-top">
			<image mode="aspectFill" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbandr.jpg' style="width: 100%;height: 500rpx;"></image>
			<view class="box_t_name">{{detailsData?detailsData.ListName:''}}</view>
			<view class="box_t_state" v-if='detailsData && detailsData.ListState'>
				<view class="box_t_state_c" >
					<span v-if="detailsData.ListState==1">榜单进行中</span>
					<span v-if="detailsData.ListState==2">榜单评选中</span>
					<span v-if="detailsData.ListState==3">榜单已放榜</span>
				</view>
			</view>
			<view class="box_t_Sponsor">
				<view class="box_t_Sponsor_text">
					{{detailsData?detailsData.Sponsor:''}}
				</view>
			
			</view>
		</view>
		<view class="box_conent">
			<view class="box_conent_basic">
				<view class="box_conent_basic_img">
					<view class="box_conent_basic_img_t">榜单信息</view>
				</view>
				<view class="box_conent_basic_c" v-if="detailsData">
					<view class="box_conent_basic_item">
						<view class="box_c_b_item_l">报名时间:</view>
						<view class="box_c_b_item_r">{{detailsData.StartDate}} <span style='margin:0 2px'>至</span>{{detailsData.EndDate}} </view>
					</view>
					<view class="box_conent_basic_item">
						<view class="box_c_b_item_l">公示时间:</view>
						<view class="box_c_b_item_r">{{detailsData.FinishDate}}</view>
					</view>
					<view class="box_conent_basic_item">
						<view class="box_c_b_item_l">入围名额:</view>
						<view class="box_c_b_item_r">{{detailsData.PrizeNum}}个</view>
					</view>
					
					<view class="details" style="margin-top: 15px;color: #FFF;">
						<rich-text :nodes="detailsData.Content"></rich-text>
					</view>
				</view>
			</view>
			
			<view class="box_conent_basic" v-if="detailsData && detailsData.ListState==3">
				<view class="box_conent_basic_img">
					<view class="box_conent_basic_img_t">评比结果</view>
				</view>
				<view class="box_conent_basic_c" style="padding: 0 5px;" v-if="detailsData">
					<view v-for="(x,y) in RankList" :key='y' class="box_c_b_c_item">
						<view class="cbc_item_l">
							<view v-if="detailsData.EnableRank==1" class="cbc_item_l">
								<image v-if="y==0" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbando.png' style="width: 100%;height: 100%;"></image>
								<image v-if="y==1" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbandtwo.png' style="width: 100%;height: 100%;"></image>
								<image v-if="y==2" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/bdbandtree.png' style="width: 100%;height: 100%;"></image>
								<span v-if="y>2">{{y+1}}</span>
							</view>
							<view v-if="detailsData.EnableRank!=1" class="cbc_item_l">
								{{y+1}}
							</view>
						</view>
						<view class="cbc_item_c">
							<image mode="aspectFill" v-if="x.ObjectIcon && x.ObjectIcon!=''" :src='x.ObjectIcon' style="width: 100%;height: 100%;border-radius: 50%;"></image>
							<image mode="aspectFill" v-else src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616552371000_195.png' style="width: 100%;height: 100%;border-radius: 50%;"></image>
							
						</view>
						<view class="cbc_item_r">
							<view style="display: flex;align-items: center;font-size: 14px;color: #FFFFFF;font-weight: 500;">
								<view class="oneText" style="max-width: calc(100vw - 30px - 30px - 10px - 16px - 80px - 50px);">{{x.ObjectName}}</view>
								<image v-if="x.MedalImage && x.MedalImage!=''" :src="x.MedalImage" mode="aspectFill" style="width: 20px;height: 20px;margin-left: 10px;"></image>
							</view>
							<view class="oneText" style="max-width: calc(100vw - 30px - 30px - 10px - 16px - 80px);font-size: 14px;color: #FFFFFF;">{{x.Reviews}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="detailsData && detailsData.ListState==1 &&type==2 && detailsData.EnrollList.length>0">
				<view class="box_conent_basic"  v-for="(x,y) in detailsData.EnrollList">
					<view class="box_conent_basic_img">
						<view class="box_conent_basic_img_t">参数内容</view>
					</view>
					<view class="box_conent_basic_c" style="padding: 0 5px;" >
						<view class="cans_c">
							<view class="cans_c_l">参与品牌:</view>
							<view class="cans_c_r">{{x.ObjectName}}</view>
						</view>
						<view v-for="(item,index) in x.Content" :key='index' class="cans_c">
							<!-- 图片 -->
							<view v-if="item.CompKey=='ImageUploadComp' && item.CompData.FileList && item.CompData.FileList.length>0">
								<view  style="display: flex;flex-wrap: wrap;"
								  v-for="(src, sindex) in item.CompData.FileList"
								  :key="sindex"
								>
								  <image
								    :src="src"
								    class="img"
								    mode="aspectFill"
								    @click="previewImage(sindex,item.CompData.FileList)"
								    style="border-radius: 10rpx"
								  ></image>
								  
								</view>
							</view>
							<!-- 视频 -->
							<view v-if="item.CompKey=='VideoUploadComp'&& item.CompData.FileList && item.CompData.FileList.length>0">
								<view style="width:100%; height: 320rpx;position: relative;margin-bottom: 10px;" v-for="(x,y) in FileList" :key="y">
									
									<video class="mmyVideo" :id="'myVideo'+y" :src="x" controls='true' 
										></video>
								
									<!-- <view
										style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;"
										@click="enlarge('myVideo'+y)">
										<u-icon name="play-circle-o" :size="70" color="#FFF"></u-icon>
									</view> -->
								
								</view>
							</view>
							<view style="display: flex;align-items: flex-start;width: 100%;" v-if="(item.CompKey=='SingleLineText' || item.CompKey=='MultiLineText')&& item.CompData.TextValue && item.CompData.TextValue!=''">
								<view class="cans_c_l">{{item.CompData.Name}}:</view>
								<view class="cans_c_r">{{item.CompData.TextValue}}</view>
							</view>
							<view style="display: flex;align-items: flex-start;width: 100%;" v-if="(item.CompKey=='DorpDownList' )&& item.CompData.OptionValue && item.CompData.OptionValue!=''">
								<view class="cans_c_l">{{item.CompData.Name}}:</view>
								<view class="cans_c_r">{{getDorpDownData(item.CompData.OptionValue,item.CompData.OptionList)}}</view>
							</view>
						</view>
						<view class="btn_bm" v-if="detailsData.ListState==1" @click="goeditsignUp(x)">编辑</view>
						
					</view>
				</view>
			</view>
			
			<view v-if='type==1 && detailsData'>
				<view class="btn_bm" v-if="detailsData.ListState==1" @click="gosignUp">立即报名</view>
				<view class="btn_bm" style="background: #CCCCCC;" v-if="detailsData.ListState!=1">报名已截止</view>
			</view>
			<view style="width: 100%;height: 20px;"></view>
			
			
			
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Id:0,
				detailsData:null,
				RankList:[],
				type:1,//1位列表过来的 2 为自己报名列表过来的
			}
		},
		onLoad(options) {
			// uni.setNavigationBarTitle({
			// 	title: "详情"
			// })
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#111111',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			if(options && options.Id){
				this.Id = options.Id
				this.getDetails()
			}
			if(options && options.type){
				this.type = options.type
			}
		},
		methods:{
			getDetails(){
				let parms = {
					url: "/api/AppletTrade/GetAppletFistShopListInfo",
					data:{ListId:this.Id}
				}
				uni.showLoading({
					title:'加载中...'
				})
				this.loading = true
				this.request2(parms, (res) => {
					this.loading = false
					uni.hideLoading()
					if (res.resultCode == 1) {
						this.detailsData = res.data
						if(this.detailsData.EnrollList && this.detailsData.EnrollList.length>0){
							this.detailsData.EnrollList.forEach(x=>{
								x.Content = JSON.parse(x.Content)
							})
							console.log(this.detailsData.EnrollList)
						}
						
					}
				})
			},
			gosignUp(){//立即报名
				let data = {
					Id : this.detailsData.Id,
					ListType:this.detailsData.ListType,
					template_message_list : this.detailsData.template_message_list
				}
				uni.navigateTo({//编码
					url: "/pages/kotra/billboard/listsignUp?formData="+encodeURIComponent(JSON.stringify(data)),
				});
				
			},
			goeditsignUp(data){
				
				data.template_message_list = this.detailsData.template_message_list;
				data.ListId = this.detailsData.Id;
				
				console.log(data)
				uni.navigateTo({//编码
					url: "/pages/kotra/billboard/listsignUp?formData="+encodeURIComponent(JSON.stringify(data)),
				});
				
			},
			previewImage(i,list) {
			  console.log(i);
			  uni.previewImage({
			    urls: list,
			    current: i,
			    longPressActions: {
			      itemList: ["发送给朋友", "保存图片", "收藏"],
			      success: function (data) {},
			      fail: function (err) {
			        console.log(err.errMsg);
			      },
			    },
			  });
			},
			getDorpDownData(value,list){
				let data = value.split(',')
				console.log(data,list)
				let text = ''
				data.forEach((x,y)=>{
					list.map(j=>{
						if(j.Id==x){
							if(y+1==data.length){
								text =text+ j.Name
							}else{
								text = text+j.Name+'、'
							}
							return
							
						}
					})
				})
				console.log(text)
				return text
			}
		}
	}
</script>

