<style>
	.trade-activity {
		background-color: #F6F6F6;
	}

	.trade_List {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
	}

	.tradeImgDiv {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.tradeName {
		width:100%;
		display: flex;
		justify-content: space-between;
	}
	.Activity_Name{
		font-weight: bold;
		font-size: 30rpx;
		width:400rpx;
		color: #1F1F1F;
		padding-right: 10rpx;
	}
	.Activity_Time {
		color: #999999;
		font-size: 25rpx;
	}
	.trade_Btn{
		position: fixed;
		width:100%;
		bottom:35rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tradeActive{
		background-color: #F6F6F6;
		width:100%;
		position: fixed;
		top: 0;
		/* top: 65px; */
		left: 0;
		overflow: auto;
		flex:1;
		padding: 30rpx;
	}
	.tradeTop{
		display: flex;
		font-size:30rpx;
		margin-bottom:20px;
	}
	.Top_LEFT{
		display: inline-block;
		width:10rpx;
		height:30rpx;
		background-color: #ff4544;
		margin:3px 7px 0 0;
	}
</style>
<template>
	<!-- <view class="trade-activity" :style="{height:!isShowSign?'0':'calc(100vh  - '+pagePaddingBottom+')'}" :class="{'tradeActive':isShowSign}"> -->
	<view class="trade-activity" :style="{height:!isShowSign?'0':'calc(100vh)'}" :class="{'tradeActive':isShowSign}">
		<template v-if="isShowSign">
			<view class="tradeTop" style="margin-top:23%;">
				<text class="Top_LEFT"></text>
				请选择你要报名的活动
			</view>
			<view class="trade_List" v-for="(item, index) in tradeData">
				<view class="tradeImgDiv">
					<image :src="item.CoverImg" style="width:100%;height:100%" mode="aspectFill"></image>
				</view>
				<view>
					<view class="tradeName">
						<view class="Activity_Name">{{item.ActivityName}}</view>
						<view>
							<u-checkbox-group>
								<u-checkbox v-model="item.IsCheck" :disabled="item.IsDefault"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view class="Activity_Time" style="margin-top:20rpx;">
						活动时间：{{item.StartTime}}
					</view>
				</view>
			</view>
			<view style="width:100%;height:100rpx;"></view>
		</template>
		<view class="trade_Btn">
			<u-button size="80"  :ripple="true" v-if="!isShowSign" :custom-style="{
				  backgroundColor: mc,
				  height: '80rpx',
				  color: '#FFF',
				  fontSize: '14px',
				  margin: '0 3vw',
				  width: '60vw',
				  border:'none'
				}" @click="isShowSign=true">立即报名</u-button>
			<u-button size="80"  :ripple="true" v-if="isShowSign" :custom-style="{
				  backgroundColor: mc,
				  height: '80rpx',
				  color: '#FFF',
				  fontSize: '14px',
				  margin: '0 3vw',
				  width: '60vw',
				  border:'none'
				}" @click="goSignUp()">立即报名</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["dataObj",'pagePaddingBottom'],
		data() {
			return {
				mc: '',
				tradeData: this.dataObj,
				Ids: '',
				isShowSign:false
			}
		},
		mounted() {
			this.mc = this.$uiConfig.mainColor;
		},
		created() {
		},
		onShow() {
		},
		methods: {
			getShow(){
				this.isShowSign=false;
			},
			//跳转报名
			goSignUp() {
				if(this.isShowSign){
					let MyArray=[];
					this.tradeData.forEach(x=>{
						if(x.IsCheck){
							MyArray.push(x.Id);	
						}
					})
					if(MyArray.length==0){
						uni.showToast({
						  title: '请选择活动',
						  icon: 'none'
						})
						return
					}
					this.Ids = MyArray.toString();				
					uni.navigateTo({
						url: "/pages/kotra/activeSignUp?Id=" + this.Ids
					});
				}
			}
		},
	};
</script>

<style>

</style>
