
<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;
						}
						
					}
				}
			}
			.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.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 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>
</template>

<script>
	export default{
		data(){
			return{
				Id:0,
				detailsData:null,
				RankList:[//放榜的模拟数据
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
					{ObjectName:'第一啥子啥子',ObjectIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					Reviews:'评语傻还是得',MedalImage:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616569835000_708.png',
					},
				]
			}
		},
		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()
			}
		},
		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
					}
				})
			},
			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)),
				});
				
			}
		}
	}
</script>

