<template>
	<RefreshView ref="mescrollRef" :hasBack="true" :text="data.name" :useDownScroll="false" :useUpScroll="false"
		useTitleRightBtn="0">

		<view class="banner">
			<swiper class="swiper" indicator-dots="true" autoplay="true">
				<swiper-item class="swiper-item" v-for="(item,index)  in data.listCoverImage" :key="index">
					<image style="width: 100%;height: 450rpx;" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view style="display: flex;flex-direction: column;background: #FFFFFF; width: 100%;height: 100%;">

			<!-- <view
				style="display: flex;flex-direction: column;background: #FFFFFF;
				margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;  border: 2rpx solid #666666;  border-radius: 30rpx;padding: 20px;">
 -->
			<view>
				<view style="display: flex; flex-direction: row; margin-left: 20rpx;margin-top: 20rpx;">
					<text
						style="color: #101010; font-size: 36rpx;font-weight: 520;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis">{{data.name}}</text>
					<text
						style=" word-break:keep-all;
  white-space:nowrap;display: flex;align-items: center; margin-left: 30rpx; color: #fff; font-size: 20rpx; background-color: #F2BF5C; padding: 3rpx 15rpx;border-radius: 5rpx;">{{data.sportCategoryName}}</text>
				</view>
			</view>

			<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;"></view>

			<view
				style="display: flex;flex-direction: row;margin-top: 15rpx;align-items: center;margin-left: 20rpx;margin-right: 30rpx;">
				<text style="font-size: 30rpx;color: #080808;">报名截止：</text>
				<text style="color: #666666;font-size: 26rpx;">{{data.enrollEndTime}}</text>
				<text style="color: #E99D42;font-size: 26rpx;flex: 1;text-align: right;">还有1天</text>
			</view>

			<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;"></view>

			<view style="display: flex;flex-direction: row;margin-top: 15rpx;margin-left: 20rpx;margin-right: 30rpx;">
				<text style="font-size: 30rpx;color: #080808;">整体活动：</text>
				<view style="display: flex;flex-direction: column;">
					<text style="color: #666666; font-size: 26rpx;">{{data.startTime}}</text>
					<text style="color: #666666;margin-top: 20rpx;font-size: 26rpx;">{{data.endTime}}</text>
				</view>
			</view>

			<view style="">
				<view v-for="(item,index) in data.listActivityItemsDetails " :key="index" style="margin-top: 20rpx;">
					<view
						style="display: flex;flex-direction: row;margin-top: 20rpx;background-color: #F1F1F1;padding: 20rpx 30rpx;">
						<text style="font-size: 30rpx;flex: 1;">{{item.name}}</text>
						<view style="display: flex;flex-direction: row;">
							<text style="font-size: 25rpx; color: #E99D42; ">{{item.enrollMoldName}}</text>
							<text
								style="color: #E99D42; margin-left: 10rpx;margin-right: 10rpx; font-size: 25rpx;">/</text>
							<text
								style="color: #E99D42; font-size: 25rpx;">{{item.enrollMoney==0?"免费":item.enrollMoney+'元'}}</text>
						</view>
					</view>

					<view
						style="display: flex;flex-direction: column;margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;">
						<text style="color: #666666; margin-top: 15rpx;font-size: 28rpx;">{{item.introduction}}</text>
					</view>

					<view style="background-color: #F1F1F1; height: 5rpx; width: 100%;margin-top: 15rpx; ">
					</view>
					<!-- <view
						style="display: flex;margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;align-items: center;">
						<text style="font-size: 30rpx;">活动时间：</text>
						<text
							style="color: #666666; font-size: 25rpx;flex: 1;">{{item.startTime+" 至 "+item.endTime}}</text>
					</view>
 -->
					<view
						style="display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;align-items: center;">
						<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
							<text style="font-size: 30rpx;color: #E3A428 ;">{{item.startTime}}</text>
							<text
								style="color: #666666; font-size: 30rpx;text-align: right;flex: 1;">{{item.gymnasiumName}}</text>
						</view>
						<image v-if="!showAddress(item.gymnasiumSid)" style="width: 30rpx;height: 30rpx;"
							src="../../static/home-icon/more.png" @click="gymnasiumName(item.gymnasiumSid)">
						</image>
					</view>

					<view style="background-color: #F1F1F1; height: 5rpx; width: 100%;margin-top: 15rpx; "></view>

					<view
						style="display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 30rpx;margin-right: 30rpx;align-items: center;">
						<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">

							<text style="font-size: 30rpx;">报名数</text>
							<text
								style="color: #919191 ; font-size: 25rpx; margin-left: 20rpx;">{{item.enrollNumbers==0?"暂无":item.enrollNumbersLimit+'人'}}</text>
							<text
								style="color: #919191 ; font-size: 25rpx;margin-left: 10rpx;margin-right: 10rpx;">/</text>
							<text
								style="color: #919191 ; font-size: 25rpx;">{{item.enrollNumbersLimit==0?"不限":item.enrollNumbersLimit+'人'}}</text>
						</view>

						<view v-if="item.listUserHeadImageUrl.length>0" style="display: flex;flex-direction: row; "
							@click="userList(item.sid)">
							<view v-for="(url,i) in item.listUserHeadImageUrl " :key="i">
								<view
									style="display: flex; width: 100%; margin-left: 5rpx; margin-right: 5rpx;justify-content: center;">
									<image style="border-radius: 50%; width: 50rpx;height: 50rpx;" :src="url"
										mode="aspectFit"></image>
								</view>

							</view>
						</view>
						<image style="width: 30rpx;height: 30rpx;" src="../../static/home-icon/more.png"
							@click="userList(item.sid)">
						</image>
					</view>

				</view>
			</view>

			<view style="margin-top: 20rpx;background-color: #F1F1F1;height: 20rpx;">
			</view>
			<view style="display: flex;flex-direction: row;margin: 20rpx 30rpx 0rpx 30rpx; align-items: center;">
				<text style="font-size: 30rpx;">活动介绍</text>
				<view style="background-color: #F1F1F1; height: 10rpx; flex: 1;margin-left: 20rpx; "></view>
			</view>
			<text style="margin: 30rpx; color: #999999;font-size: 28rpx; ">{{data.introduction}}</text>

			<view style="display: flex;flex-direction: row;margin: 20rpx 30rpx 0rpx 30rpx; align-items: center;">
				<text style="font-size: 30rpx;">奖品奖项</text>
				<view style="background-color: #F1F1F1; height: 10rpx; flex: 1;margin-left: 20rpx; "></view>
			</view>
			<text style="margin: 30rpx; color: #999999;font-size: 28rpx; ">{{data.notes}}</text>
			<!-- 
			<textarea style="margin: 30rpx; color: #999999 ; font-size: 25rpx;white-space: pre-wrap; "
				read-only="readOnly" disabled="disabled " placeholder="无" v-model="data.notes" /> -->



			<view style="display: flex;flex-direction: row;margin: 10rpx 30rpx 0rpx 30rpx; align-items: center;">
				<text style="font-size: 30rpx;">特别鸣谢</text>
				<view style="background-color: #F1F1F1; height: 10rpx; flex: 1;margin-left: 20rpx; "></view>
			</view>
			<view
				style="display: flex;margin-left: 40rpx;margin-right: 40rpx;flex-direction: column; margin-top: 30rpx;">
				<view v-for="(item,pos) in data.listSpecialThanks " :key="pos">
					<view
						style="display: flex; width: 100%; padding-top: 10rpx;padding-bottom: 10rpx;justify-content: center;">
						<text style="color: #898989;font: size 28rpx;flex: 1;">{{item.name}}</text>
					</view>

				</view>
			</view>
			<view style="background-color: #F1F1F1; height: 5rpx; width: 100%;margin-top: 20rpx; "></view>
			<view
				style="display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 30rpx; margin-right: 30rpx; align-items: center;">
				<text style="color: #898989; font-size: 28rpx;">主办方：</text>

				<text style="color: #898989;font-size: 25rpx;">{{data.organizer}}</text>
			</view>
			<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;"></view>
			<view
				style="display: flex;flex-direction: row;margin-top: 20rpx;margin-left: 30rpx; margin-right: 30rpx; align-items: center;">
				<text style="color: #898989;font-size: 28rpx;">联系人：</text>

				<view style="display: flex;flex-direction: row;">
					<text style="color: #898989;font-size: 25rpx;">{{data.linkerName}}</text>
					<view style="width: 30rpx;"></view>
					<text style="color: #898989; font-size: 25rpx;">{{data.linkerPhone}}</text>
				</view>

			</view>
			<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;"></view>
			<view class="agreeMent">
				<checkbox-group @change="checkboxChange">
					<checkbox style="transform:scale(0.7)" :checked="checked1"></checkbox>
				</checkbox-group>
				<text class="text2">我已阅读并同意</text>
				<text style="color: #007AFF;">《参赛须知》</text>
				<text style="display: flex;text-align: center; margin-left: 20rpx; padding: 5rpx 10rpx;background: #0081D5;
									 color: #FFFFFF; font-size: 28rpx;" @click="click()"> 我要报名 </text>
			</view>
		</view>

		</view>
		<view style="height: 300rpx;"></view>

	</RefreshView>
</template>

<script>
	export default {
		data() {
			return {
				checked1: true,
				data: {

				},
				raceSid: ""

			}
		},
		onLoad: function(option) {
			this.raceSid = option.raceSid;
			this.HTTP({
				url: 'aos/v1/activityManagement/getActivityDetails/' + this.raceSid,
				method: 'GET',
				paramsType: "FORM",
				loading: true
			}).then((res) => {
				if (200 == res.code) {
					this.data = res.data
				} else {
					this.Toast(res.msg)
					uni.navigateBack({
						delta: 1
					})
				}

			});
		},

		methods: {
			showAddress(s) {
				console.log("..." + s);
				return this.IsEmpty(s)
			},
			checkboxChange(e) {
				this.checked1 = !this.checked1
				console.log(this.checked1)
			},
			gymnasiumName(e) {
				uni.navigateTo({
					url: "ArenaDetailActivity?sid=" + e
				})
				console.log("gymnasiumName>>", e)
			},
			userList(sid) {
				console.log("zazzz>>", this.data.sid)
				console.log("userList>>", sid)
				uni.navigateTo({
					url: "BaoMingListActivity?activitySid=" + this.data.sid + "&activityItemSid=" + sid
				})

			},
			click() {
				let _this = this;

				if (!this.checked1) {
					this.Toast("请认真阅读参赛须知，并勾选。")
					return
				}

				// if (this.data.listActivityItemsDetails.length == 1) {
				// 	let evendSid = this.data.sid
				// 	let eventsSubprojectSid = this.data.listActivityItemsDetails[0].sid
				// 	this.HTTP({
				// 		url: 'aos/events/v1/eventsenroll/save',
				// 		method: 'POST',
				// 		data: {
				// 			'eventsSid': evendSid,
				// 			'eventsSubprojectSid': eventsSubprojectSid,
				// 			'participantSid': getApp().globalData.memberSid,
				// 			'paymentMemberSid': "",
				// 		},
				// 		paramsType: "JSON",
				// 		loading: true
				// 	}).then((res) => {

				// 		if (res.code == 200) {
				// 			this.Toast("报名成功！")
				// 			// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				// 			uni.navigateBack({
				// 				delta: 10
				// 			});
				// 		} else {
				// 			this.Toast(res.msg)
				// 		}


				// 	}, (err) => {
				// 		// 错误提示
				// 		_this.Toast("出错了：" + err.data.errmsg)
				// 	});
				// } else {
				console.log("===========" + this.data.listActivityItemsDetails.length)
				let list = this.data.listActivityItemsDetails
				let newList = []
				for (var i = 0; i < list.length; i++) {
					newList.push(list[i].name)
				}
				uni.showActionSheet({
					itemList: newList,
					success: function(res) {
						console.log("itemList==" + newList)
						console.log("res==" + JSON.stringify(res))
						_this.listSelect(res.tapIndex, newList)
					},
					fail(e) {
						console.log("reeees==" + JSON.stringify(e))
					}
				});
				// }

			},
			listSelect(id, info) {
				console.log(id)
				console.log(info)
				let _this = this
				let evendSid = this.data.sid
				let eventsSubprojectSid = this.data.listActivityItemsDetails[id].sid
				console.log(eventsSubprojectSid)
				this.Login()
					.then((res) => {

						this.HTTP({
							url: 'aos/v1/activityItemManagement/enroll',
							method: 'POST',
							data: {
								'activitySid': evendSid,
								'activityItemsSid': eventsSubprojectSid,
								'participantSid': res,
								'paymentMemberSid': "",
							},
							paramsType: "JSON",
							loading: true
						}).then((res) => {

							if (res.code == 200) {
								this.Toast("报名成功！")
								// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
								uni.navigateBack({
									delta: 10
								});
							} else {
								this.Toast(res.msg)
							}


						}, (err) => {
							// 错误提示
							_this.Toast("出错了：" + err.data.errmsg)
						})
					})
			},
		}
	}
</script>

<style lang="scss">
	.items {
		display: flex;
		flex-direction: column;
	}

	.agreeMent {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50rpx;
		margin-left: 30rpx;

		.text2 {
			color: #666666;
			font-size: 30rpx;
		}
	}


	.banner {
		height: 450rpx;
		width: 100%;
		box-sizing: border-box;

		.swiper {
			height: 100%;
			width: 100%;

			.swiper-item {
				height: 100%;
				width: 100%;

				.banner-image {
					width: 100%;
					height: 100%;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}

			}
		}
	}
</style>
