<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:20px 0 5px 0;
	}

	.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 style="width:100%;margin-top:25%"></view>
			<template v-for="(item, index) in tradeData">
				<view class="tradeTop" v-if="item.GroupName">
					<text class="Top_LEFT"></text>{{item.GroupName}}
				</view>
				<view v-if="item.DateStr" style="font-size:26rpx;margin:0 0 20px 10px;color:gray;">{{item.DateStr}}</view>
				<view class="trade_List" v-for="subItem in item.DataList">
					<view class="tradeImgDiv">
						<image :src="subItem.CoverImg" style="width:100%;height:100%" mode="aspectFill"></image>
					</view>
					<view>
						<view class="tradeName">
							<view class="Activity_Name">{{subItem.ActivityName}}</view>
							<view>
								<u-checkbox-group>
									<u-checkbox v-model="subItem.IsCheck" :disabled="subItem.IsDefault"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
						<view class="Activity_Time" style="margin-top:20rpx;">
							活动时间：{{subItem.StartTime}}
						</view>
					</view>
				</view>
			</template>
			<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;
			console.log(this.dataObj, 'dataObj');
		},
		created() {},
		onShow() {},
		methods: {
			getShow() {
				this.isShowSign = false;
			},
			//跳转报名
			goSignUp() {
				if (this.isShowSign) {
					let MyArray = [];
					if(this.tradeData&&this.tradeData.length>0){
						this.tradeData.forEach(x => {
							x.DataList.forEach(y=>{
								if(y.IsCheck){
									MyArray.push(y.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>
