
<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: calc((100vw - 30px - 30px - 10px - 30px)/3 ) ;
						height: calc((100vw - 30px - 30px - 10px - 30px)/3 );
						margin: 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;
			}
		}
		.mmyVideo{
			width: 100%;
			height: 100%;
		}
		.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.State'>
				<view class="box_t_state_c" >
					<span v-if="detailsData.State==1">榜单进行中</span>
					<span v-if="detailsData.State==2">榜单评选中</span>
					<span v-if="detailsData.State==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.State==3 && detailsData.RankList.length>0">
				<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 detailsData.RankList" :key='y' class="box_c_b_c_item" @click="goxiangqin(x)">
						<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.State==1  && 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' >
							<!-- 图片 -->
							<view class="cans_c" v-if="item.CompKey=='ImageUploadComp' && item.CompData.FileList && item.CompData.FileList.length>0" style="display: flex;flex-wrap: wrap;">
								<view  
								  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 class="cans_c" v-if="item.CompKey=='VideoUploadComp'&& item.CompData.FileList && item.CompData.FileList.length>0">
								<view style="width:calc(100vw - 70px); height: 320rpx;position: relative;margin-bottom: 10px;" v-for="(src,sindex) in item.CompData.FileList" :key="y">
									<!-- <video class="mmyVideo" :id="'myVideo'+sindex" :src="src" controls='true' :ref="'myVideo'+sindex" ></video> -->
									<video class="mmyVideo" :id="'myVideo'+y+index+sindex" :src="src" :controls='controls' :show-center-play-btn='false'
										:show-fullscreen-btn='false' @fullscreenchange='videoControl'></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+index+sindex)">
										<u-icon name="play-circle-o" :size="100" color="#FFF"></u-icon>
									</view>
								
								</view>
							</view>
							<view class="cans_c" 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 class="cans_c" 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 class="cans_c" style="display: flex;align-items: flex-start;width: 100%;" v-if="item.CompKey=='CommonUploadComp' && item.CompData.FileList && item.CompData.FileList.length>0">
								<view class="cans_c_l">{{item.CompData.Name}}:</view>
								<view class="cans_c_r">
									<view v-for="(src, sindex) in item.CompData.FileListName">{{src}}</view>
								</view>
							</view>
						</view>
						<view class="btn_bm" v-if="detailsData.State==1" @click="goeditsignUp(x)">编辑</view>
						
					</view>
				</view>
			</view>
			
			<view v-if='detailsData&& (detailsData.RankList==null  || detailsData.RankList.length==0)'>
				<view class="btn_bm" v-if="detailsData.State==1" @click="gosignUp">立即报名</view>
				<view class="btn_bm" style="background: #CCCCCC;" v-if="detailsData.State==2">报名已截止</view>
			</view>
			<view style="width: 100%;height: 20px;"></view>
			
			
			
		</view>
		<auth
		  v-if="showAuth"
		  @changeuserinfo="reloadUserinfo"
		  @gbAuth="gbAuth"
		></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import hParse from "@/components/u-parse/parse.vue";
	export default{
		components: {
			auth,
			hParse
		},
		data(){
			return{
				Id:0,
				detailsData:null,
				RankList:[],
				
				controls:false,
				showAuth:false,
				u: {}
			}
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#111111',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			if(options && options.Id){
				this.Id = options.Id
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
				  this.u = {
				    nickName: "未登录",
				    avatarUrl: "",
				  };
				    this.showAuth = true;
				} else {
					this.getDetails()
				}
				
			}
		},
		methods:{
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.getDetails()
			},
			//关闭登录窗口
			gbAuth() {
			  uni.navigateBack()
			},
			enlarge(file) {
				// 全屏
				this.videoContext = uni.createVideoContext(file);
				this.videoContext.requestFullScreen({
					direction: 0
				})
			},
			videoControl(e) {
				if (e.detail.fullScreen == false) {
					this.videoContext.stop()
					this.controls = false
				} else {
					this.videoContext.play()
					this.controls = true
				}
			},
			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)
								
							})
							
						}
						
					}
				})
			},
			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;
				uni.navigateTo({//编码
					url: "/pages/kotra/billboard/listsignUp?formData="+encodeURIComponent(JSON.stringify(data)),
				});
				
			},
			previewImage(i,list) {
			  
			  uni.previewImage({
			    urls: list,
			    current: i,
			    longPressActions: {
			      itemList: ["发送给朋友", "保存图片", "收藏"],
			      success: function (data) {},
			      fail: function (err) {
			        
			      },
			    },
			  });
			},
			getDorpDownData(value,list){
				
				let data = value.toString().split(',')
				
				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
							
						}
					})
				})
				return text
			},
			goxiangqin(item){//点击放榜列表 进入详情
				if(item.ObjectType==1){//品牌
					 uni.navigateTo({
						 url:"/pages/kotra/brand/detail?id="+item.ObjectId
					 })
				}else if(item.ObjectType==2){//载体
					uni.navigateTo({
						url:"/pages/kotra/carrier/detail?id="+item.ObjectId
						
					})
				}
				
			}

		}
	}
</script>

