<template>
	<view class="activate-list-box">
		<view class="activate-list">
			<view class="activate-item" 
				v-for="(item,index) in list" :key="index"
				@click="itemClick(item)"
				>
				<image :src="item.images"></image>
				<view class="title line2">{{item.name}}</view>
				<view class="desc" v-if="showDesc">
					自1992年创立的莫斯科国际平面设计大赛双年展至今已进入18届
				</view>
				<view class="btn-box acea-row row-between-wrapper" v-if="showAuth">
					<view class="auth">{{item.cateName}}</view>
					<view class="btn">即刻报名</view>
				</view>
				<view class="match-bottom acea-row row-between-wrapper" v-if="!showAuth">
					<view class="mb-left acea-row">
						<view class="acea-row row-middle">
							<text>300</text>
							<image src="../../../static/images/eye.png"></image>
						</view>
						<view class="time">2023-02-23 </view>
					</view>
					<view class="btn-box">
						<view class="btn" v-if="index%2 == 0">进行中</view>
						<view class="btn btn-disabled" v-if="index%2 !== 0">已结束</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			list: {
				type: Array,
				default: ()=> []
			},
			showDesc: {
				type: Boolean,
				default: false
			},
			showAuth: {
				type: Boolean,
				default: true
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			itemClick(item){
				this.$yrouter.push({
					path: '/pages/home/activityDetail/index',
					query: {
						id: item.id
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
.activate-list-box{
	width: 100%;
	.activate-list{
		width: 100%;
		.activate-item{
			width: 100%;
			padding: 30rpx 40rpx;
			background: #fff;
			border-bottom: 26rpx solid #F7F7F7;
			image{
				width: 100%;
				height: 480rpx;
			}
			.title{
				width: 100%;
				font-size: 44rpx;
				color: #212121;
				font-weight: 500;
				margin: 30rpx 0 10rpx;
			}
			.desc{
				font-size: 32rpx;
				color: #9F9F9F;
				margin-bottom: 10rpx;
			}
			.btn-box{
				.auth{
					color: #9F9F9F;
					font-size: 32rpx;
				}
				.btn{
					width: 214rpx;
					height: 54rpx;
					border: 2rpx solid #000000;
					border-radius: 25px;
					text-align: center;
					line-height: 54rpx;
					font-size: 24rpx;
					color: #000;
				}
				.btn-disabled{
					background: #7E7E7E;
					color: #fff;
					border-color: #7E7E7E;
				}
			}
			.match-bottom{
				.mb-left{
					font-size: 24rpx;
					color: #707070;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
					.time{
						margin-left: 36rpx;
					}
				}
			}
		}
	}
}
</style>
