<template>
	<RefreshView ref="mescrollRef" text="活动详情" :useDownScroll="false" :useUpScroll="false" 
	:useTitleLeftBtn="parameter.userRoleId==1?1:0" titleLeftBtnSource=" 管理" :dropLeftList="page.manageList" @drop="selectManage">
		<view class="activity-detail">
			<!-- 广告 -->
			<view class="image-area">
				<swiper indicator-dots="true" autoplay="true">
					<swiper-item v-for="(item,index)  in page.activityDetails.listActivityImage" :key="index">
						<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 名称和活动类型 -->
			<view class="name-category">
				<h1>{{page.activityDetails.name}}</h1>
				<text class="category">{{page.activityDetails.sportCategoryName}}</text>
			</view>
			
			<!-- 报名截止和整体活动时间 -->
			<view class="row">
			<!-- <view style="display: flex;flex-direction: row;margin-top: 15rpx;align-items: center;margin-left: 20rpx;margin-right: 30rpx;"> -->
				<text class="field">报名截止：</text>
				<text>{{page.activityDetails.enrollEndTime}}</text>
				<!-- <text style="color: #E99D42;font-size: 26rpx;flex: 1;text-align: right;">还有1天</text> -->
			</view>
			
			<view class="line-thin"></view>
			<view class="row">
				<text class="field">整体活动：</text>
				<view style="display: flex;flex-direction: column;">
					<text>{{page.activityDetails.startTime}}</text>
					<text class="margin-top20">{{page.activityDetails.endTime}}</text>
				</view>
			</view>
			<!-- 活动项目 -->
			<view v-for="(item,index) in page.activityDetails.listActivityItem" :key="index" >
				<view class="item-area">
					<!-- 活动项目名称类型金额 -->
					<view class="item-name-mold-money">
						<h2>{{item.name}}</h2>
						<text class="mold-money">{{item.enrollMoldName}}/{{item.enrollMoney==0?"免费":item.enrollMoney+'元'}}</text>
					</view>
					<!-- 活动项目介绍 -->
					<view class="item-introduction">
						<text>{{item.introduction}}</text>
					</view>
					<view class="line-thin"></view>
					<!-- 日期地点 -->
					<view class="row">
						<text class="date">{{item.startTime}}</text>
						<text class="address">{{item.address}}</text>
						<image v-if="!showAddress(item.gymnasiumSid)" style="width: 30rpx;height: 30rpx;" src="../../static/img/public/more.png" @click="gymnasiumName(item.gymnasiumSid)"></image>
					</view>
					<view class="line-thin"></view>
					<view class="row" @click="userList(item.sid)">
						<text class="field">报名数</text>
						<text class="margin-left20 ">{{item.enrollNumbers==0?"暂无":item.enrollNumbers+'人'}}/{{item.enrollNumbersLimit==0?"不限":item.enrollNumbersLimit+'人'}}</text>
						<view v-if="item.listUserHeadImageUrl.length>0" style="display:flex;flex-direction: row; margin-left:10rpx;" >
							<view v-for="(url,i) in item.listUserHeadImageUrl " :key="i">
								<view
									style="display:flex; width:100%;margin-left:2rpx;margin-right:2rpx;">
									<image style="border-radius: 50%; width: 50rpx;height: 50rpx;" :src="url" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<image class="more" src="../../static/img/public/more.png" ></image>
					</view>
				</view>
			</view>
			<view class="line-thin"></view>
			<!-- 活动介绍 -->
			<view class="row">
				<text class="field">活动介绍</text>
				<view class="line"></view>
			</view>
			<text class="introduction">{{page.activityDetails.introduction}}</text>
			<!-- 奖品奖项 -->
			<view class="row" v-if="page.activityDetails.listSponsor ===''">
				<text class="field">奖品奖项</text>
				<view class="line"></view>
			</view>
			<text class="introduction">{{page.activityDetails.notes}}</text>
			<!-- 特别鸣谢 -->
			<view class="row" v-if="page.activityDetails.listSponsor ==='[]'">
				<text class="field">特别鸣谢</text>
				<view class="line"></view>
			</view>
			<view
				style="display: flex;margin-left: 40rpx;margin-right: 40rpx;flex-direction: column; margin-top: 30rpx;">
				<view v-for="(item,pos) in page.activityDetails.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 class="line-thin"></view>
			<!-- 主办方 -->
			<view class="row">
				<text class="field">主办方：</text>
				<text style="color: #898989;font-size: 25rpx;">{{page.activityDetails.organizer}}</text>
			</view>
			<view class="line-thin"></view>
			<!-- 联系人 -->
			<view class="row">
				<text class="field">联系人：</text>
				<view style="display: flex;flex-direction: row;">
					<text style="color: #898989;font-size: 25rpx;">{{page.activityDetails.linkerName}}</text>
					<view style="width: 30rpx;"></view>
					<text style="color: #898989; font-size: 25rpx;">{{page.activityDetails.linkerPhone}}</text>
				</view>

			</view>
			<view class="line-thin"></view>
			<view class="row">
				<text class="field">报名必填</text>
				<text>{{page.enrollRequiredName}}</text>
				<!-- <image class = "more" src="../../static/img/public/more.png" ></image> -->
			</view>
			<view class="line-wide"></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="enroll()"> 我要报名 </text>
			</view>
			<view style="height: 300rpx;"></view>
		</view>
	</RefreshView>
</template>

<script>
	export default {
		data() {
			return {
				parameter:{
					activitySid:"",
					userRoleId:0,
					userRoleName:"游客",
					passRequired : false,
					noPassMsg : ""
				},
				isCreate:0,
				checked1: true,
				page:{
					activityDetails:{},
					manageList: [{
							'name': '修改活动',
							'src': '../../static/img/public/modi.png',
							'id': 0
						}, {
							'name': '删除活动',
							'src': '/static/img/public/dustbin.png',
							'id': 1
						}],
					enrollRequiredName:""
				},
			}
		},
		onLoad: function(option) {
			// 为参数赋值
			this.parameter.activitySid = option.activitySid
			// 如果用户登陆则获取用户角色
			let _this = this
			if (getApp().globalData.isLogin){
				_this.parameter.userRoleId =1
				let sysUserSid = getApp().globalData.sysUserSid;
				let activitySid = _this.parameter.activitySid;
				_this.HTTP({
					url: 'aos/v1/aosUser/getActivityRole',
					method: 'GET',
					data: {
						'sysUserSid': sysUserSid,
						'activitySid':activitySid
					},
					paramsType: "FORM",
					loading: true
				}).then((res) => {
					if (200 == res.code) {
						_this.parameter.userRoleId = res.data.userRoleId
						_this.parameter.userRoleName = res.data.userRoleName
					// } else {
					// 	_this.Toast(res.msg)
					}
				});
			}else{
				_this.parameter.userRoleId = 0
			}

		},
		onShow() {
			let _this = this
			let activitySid = _this.parameter.activitySid;
			_this.HTTP({
				url: 'aos/v1/activity/getActivityDetails/' + activitySid,
				method: 'GET',
				paramsType: "FORM",
				loading: true
			}).then((res) => {
				if (200 == res.code) {
					_this.page.activityDetails = res.data
					_this.setEnrollRequiredName()
				} else {
					_this.Toast(res.msg)
				}
			});
		},
		methods: {
			setEnrollRequiredName(){
				let enrollRequiredName = ""
				if (this.page.activityDetails.enrollRequired.onRealName == 1){
					enrollRequiredName += "姓名"
				}
				if (this.page.activityDetails.enrollRequired.onSex == 1){
					if (this.page.activityDetails.enrollRequired.onRealName == 1){
						enrollRequiredName += " / "
					}
					enrollRequiredName += "性别"
				}
				if (this.page.activityDetails.enrollRequired.onBirthday == 1){
					if (this.page.activityDetails.enrollRequired.onSex == 1  || this.page.activityDetails.enrollRequired.onRealName == 1){
						enrollRequiredName += " / "
					}
					enrollRequiredName += "生日"
				}
				if (this.page.activityDetails.enrollRequired.onAdCode == 1){
					if (this.page.activityDetails.enrollRequired.onSex == 1  || this.page.activityDetails.enrollRequired.onRealName == 1 || this.page.activityDetails.enrollRequired.onBirthday == 1){
						enrollRequiredName += " / "
					}
					enrollRequiredName += "地区"
				}
				this.page.enrollRequiredName = enrollRequiredName
			},
			selectManage(index, isLeft, selectData) {
				let _this = this;
				let id = selectData.id
				if (id == 0) {
					// 修改活动
					uni.navigateTo({
						url: '../publish/CreateActivity?sid=' + _this.parameter.activitySid
					})
				} else if (id == 1) {
					// 删除活动
					uni.showModal({
						title: '温馨提示',
						content: '确定删除此赛事？',
						success(res) {
							if (res.confirm) {
								_this.HTTP({
									url: 'aos/v1/activity/delActivity/' + _this.parameter.activitySid,
									method: 'DELETE',
									paramsType: "FORM",
									loading: true
								}).then((res) => {
									if (200 == res.code) {
										uni.navigateBack({
											delta: 1
										});
									} else {
										_this.Toast(res.msg)
									}
								});
							}
						}
					});
				} else if (id == -1) {
					// 关闭
				}
			},
			toCreateActivity(){
				let activitySid = this.parameter.activitySid
				uni.navigateTo({
					url: '../publish/CreateActivity?sid=' + activitySid
				});
			},
			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("userList>>", sid)
				uni.navigateTo({
					url: "BaoMingListActivity?activitySid=" + this.parameter.activitySid + "&activityItemSid=" + sid
				})

			},
			enroll() {
				let _this = this;
				
				// 勾选协议
				if (!this.checked1) {
					this.Toast("请认真阅读参赛须知，并勾选。")
					return
				}
				// 报名菜单赋值
				let listEnrollMenu = []
				let listActivityItem = this.page.activityDetails.listActivityItem
				for (var i = 0; i < listActivityItem.length; i++) {
					let enrollMenu = listActivityItem[i].name
					let enrollMold = listActivityItem[i].enrollMold
					if ( enrollMold = 1){
						enrollMenu += "(" + listActivityItem[i].enrollMoldName +")"
					}
					listEnrollMenu.push(enrollMenu)
				}
				
				// 输出报名菜单
				uni.showActionSheet({
					itemList: listEnrollMenu,
					success: function(res) {
						console.log("itemList==" + listEnrollMenu)
						console.log("res==" + JSON.stringify(res))
						_this.selectMenu(res.tapIndex, listEnrollMenu)
					},
					fail(e) {
						console.log("reeees==" + JSON.stringify(e))
					}
				});

			},
			verifyEnrollRequired(){
				
			},
			selectMenu(id, info) {
				// 用户如未登陆则进入授权登陆页面
				if (!getApp().globalData.isLogin){
					uni.navigateTo({
						url: "../me/AuthLogin"
					})
				}
				let _this = this
				let activitySid = _this.page.activityDetails.sid
				let sysUserSid = getApp().globalData.sysUserSid
				// console.log("报名模式=============",JSON.stringify(_this.page.activityDetails))
				// 校验报名必填项
				let onRealName = _this.page.activityDetails.enrollRequired.onRealName
				let onSex = _this.page.activityDetails.enrollRequired.onSex
				let onBirthday = _this.page.activityDetails.enrollRequired.onBirthday
				let onAdCode = _this.page.activityDetails.enrollRequired.onAdCode
				if (onRealName == 0 || onSex == 0 || onBirthday == 0 || onAdCode == 0){
					_this.HTTP({
						url: 'aos/v1/activity/verifyEnrollRequired',
						method: 'GET',
						paramsType: "FORM",
						data: {
							'activitySid': activitySid,
							'sysUserSid': sysUserSid
						},
						loading: true
					}).then((res) => {
						if ( res.code == "200") {
							_this.parameter.passRequired = true
						}else{
							// _this.parameter.noPassMsg = res.msg
							uni.showModal({
								title: '报名需要补充如下个人信息',
								content: res.msg,
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '../me/RealInfo?sysUserSid=' + getApp().globalData.sysUserSid
										})
									}else
									{
										return
									}
								}
							})
						}
					});
				}
				// 获取参数
				console.log(id)
				console.log(info)
				let activityItemSid = _this.page.activityDetails.listActivityItem[id].sid            // 活动项目SId
				let enrollMold =  _this.page.activityDetails.listActivityItem[id].enrollMold         // 报名模式(0为个人，1为团体)
				console.log("用户SID",getApp().globalData.sysUserSid)
				// 活动项目为个人
				if (enrollMold == 0){
					// 校验报名条件
					this.HTTP({
						url: 'aos/v1/activityItem/personalEnroll',
						method: 'POST',
						data: {
							'activityItemSid': activityItemSid,
							'sysUserSid': getApp().globalData.sysUserSid,
							'paymentMemberSid': getApp().globalData.sysUserSid,
						},
						paramsType: "JSON",
						loading: true
					}).then((res) => {
						if (res.code == 200) {
							this.Toast("报名成功！")
						} else {
							this.Toast(res.msg)
						}
					}, (err) => {
						// 错误提示
						_this.Toast("出错了：" + err.data.errmsg)
					})
				}
				return
				// 活动项目为团体
				if (enrollMold == 1){
					// 获取我的队伍
					
					uni.navigateTo({
						url: "../find/TeamEnroll?activityItemSid="+activityItemSid
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	@import url("../../static/columns.css");
	.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;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		background: #FFFFFF; 
		width: 100%;
		height: 100%;
		}
</style>
