<style scoped lang="scss">
	.billboardList{
		width: 100vw;
		height: 100vh;
		background: #F6F6F6;
		.box-top{
			
			line-height: 45px !important;
			font-size: 16px;
			text-align: center;
			// position: fixed;
			// left: 0;
			// top: 0;
			width: 100%;
			color: #111;
			box-sizing: content-box;
			z-index: 10;
			display: flex;
			align-items: center;
			background-color: #f6f6f6;
			padding:0 6rpx;
		}
		.box_conent{
			width: 100%;
			height: 100vh;
			.boxitem{
				width: 100%;
				height: 460rpx;
				background: #FFFFFF;
				border-radius: 15px;
				margin-top: 15px;
			}
			.boxitem_c{
				width: 100%;
				height: calc(460rpx - 340rpx);
				padding: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.boxitem_c_t{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.boxitem_c_t_l{
						width: 1px;
						flex: 1;
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 800;
						color: #111111;
					}
					.boxitem_c_t_r{
						width: 140rpx;
						margin-left: 5px;
						text-align: right;
						font-size: 12px;
						font-weight: 500;
						color: #999999;
					}
				}
				.boxitem_c_b{
					width: 100%;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					
				}
			}
			.oneText{
				overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;
				
			}
		}
	}
</style>
<template>
	<view class='billboardList'>
		<view class='box-top' :style="[titleStyle]">
			<view @click="goback" >
				<u-icon name="arrow-left" size="44"></u-icon>
			</view>
			<view style="flex: 1;display: flex; align-items: center;justify-content: center;" @click="showStart=true">{{msg.Year}}年<u-icon name="arrow-down" style="margin-left: 5px;" size="20"></u-icon></view>
			<view style="width: 22px;"></view>
			<u-picker v-model="showStart" mode="time" :params="params" @confirm='btnStart' :default-time='defaulttime'></u-picker>
			
		</view>
		<u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
		<view class='box_conent' :style="{'height':'calc(100vh - '+topHeight+'px)'}" v-if="!loading && g.length > 0">
			<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scrolltolower="lower" >
				<view style="padding: 0 15px;">
					<view v-for="(x,y) in g" :key="y" class="boxitem" @click="godetails(x)">
						<image mode="aspectFill" :src='x.CoverImage' style="width: 100%;height: 340rpx;border-radius: 15px 15px 0 0;"></image>
						<div class='boxitem_c'>
							<div class='boxitem_c_t'>
								<div class='boxitem_c_t_l oneText'>
									{{x.ListName}}
								</div>
								<div class='boxitem_c_t_r' style="color: #00DFB8;" v-if="x.State==1">进行中</div>
								<div class='boxitem_c_t_r'  v-if="x.State==2">报名已截止</div>
								<div class='boxitem_c_t_r' v-if="x.State==3">已放榜</div>
							</div>
							<div class="boxitem_c_b oneText">
								主办方：{{x.Sponsor?x.Sponsor:'无'}}
							</div>
						</div>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#F6F6F6" />
				<div style='width: 100%;height: 30px;'></div>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				titleStyle: {},
				loading:false,
				showStart:false,
				mainColor:'',
				year:'2021',
				defaulttime:'2021-01-01 13:01:00',
				topHeight:0,
				msg:{
					pageIndex:1,
					pageSize:10,
					ListType:0,
					ObjectTypeId:0,
					ListState:0,
					Sponsor:'',
					ListName:'',
					Year:'',
				},
				params: {//时间的配置
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
				},
				g:[],
				pageCount:0,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
			}
		},
		created() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "1"
					};
					that.topHeight = res.statusBarHeight+45 
				},
			});
			that.mainColor = that.$uiConfig.mainColor;
			var myDate = new Date();
			that.msg.Year = myDate.getFullYear(); 
			that.getList()
		},
		methods:{
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			btnStart(e){
				this.msg.Year = e.year
				this.defaulttime = e.year+'-01-01 13:01:00'//拿来做为默认值 使用 不做显示
				this.msg.pageIndex=1
				this.getList();
			},
			getList(){
				let parms = {
					url: "/api/AppletTrade/GetAppletFirstShopListPageList",
					data:this.msg
				}
				uni.showLoading({
					title:'加载中...'
				})
				this.loading = true
				this.request2(parms, (res) => {
					this.loading = false
					uni.hideLoading()
					if (res.resultCode == 1) {
						this.g = this.g.concat(res.data.pageData);
						this.pageCount = res.data.pageCount
						if (this.pageCount == 1) {
							this.status = "nomore";
						}
					}
				})
			},
			//触底事件
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			godetails(x){//跳转到详情
				uni.navigateTo({
				  url: "/pages/kotra/billboard/billboarddetails?Id="+x.Id,
				});
			}
		}
	}
</script>


