<template>
	<RefreshView ref="mescrollRef" :hasBack="true" text="发起活动" :useDownScroll="false" :useUpScroll="false"
		:isInterceptBack="true" @backClick="backClick" :useTitleLeftBtn="isCreate==0?1:0" titleLeftBtnSource="存草稿"
		@leftBtn='leftBtnClick' :useTitleRightBtn="isCreate==0?0:1" titleRightBtnSource="发布" @rightBtn='rightBtnClick'>

		<view class="topLayout">
			<view class="topLayout_item" @click="topClik(1)">
				<!-- <image style="width: 34rpx;height: 38rpx;" src="../../static/event-icon/finished.png" mode="aspectFit">
				</image> -->
				<text class="topLayout_item_left1">1</text>
				<text style="font-size: 28rpx;color: #262626;margin-left: 10rpx;">基本信息</text>
			</view>

			<view class="topLayout_item">
				<!-- <image style="width: 34rpx;height: 38rpx;" src="../../static/event-icon/finished.png" mode="aspectFit">
				</image> -->
				<text class="topLayout_item_left1">2</text>
				<text
					style="font-size: 28rpx; font-family: Adobe Heiti Std;font-weight: normal;color: #262626;margin-left: 10rpx;">设置活动项目</text>
			</view>

			<view class="topLayout_item" @click="topClik(3)">
				<!-- <image style="width: 34rpx;height: 38rpx;" src="../../static/event-icon/unfinished.png"
					mode="aspectFit">
				</image> -->
				<text class="topLayout_item_left2">3</text>
				<text style="font-size: 28rpx;color: #979797;margin-left: 10rpx;">奖项及其他</text>
			</view>
		</view>

		<view>
			<view v-for="(item,index) in info.listActivityItems " :key="index">
				<view class="items">
					<view class="layout1">
						<text class="number">{{index+1}}</text>
						<input class="name" type="text" @input="nameText($event, index)" placeholder="请输入活动项目名称"
							:value="item.name" />
						<view style="display: flex;padding-left: 30rpx; align-items: center;" @click="deleteItem(item)">
							<image style="width: 34rpx;height: 38rpx;" src="../../static/event-icon/delete.png"
								mode="aspectFit">
							</image>
						</view>
					</view>
					<view class="line"></view>
					<view class="layout2">
						<textarea class="explain" @input="explainText($event, index)" placeholder="活动项目说明（点击编辑）"
							:value="item.introduction" />
					</view>
					<view class="line"></view>

					<view class="tabLayout" style="flex-direction:column">
						<view class="layout">
							<image style="width: 45rpx;height: 45rpx;" src="../../static/custom-icon/line.png"
								mode="aspectFill">
							</image>
							<view>
								<text class="layout_lift">体育活动标签：</text>
								<text
									style="color: #F2BF5C;font-size: 30rpx;margin-left: 5rpx;">{{item.SportCategoryName}}</text>
							</view>
						</view>

						<view style="display: flex; flex-direction: row;margin-left: 30rpx;margin-right: 30rpx;">
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid===1}"
								@click="onClick(index,1)">乒乓球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==2}"
								@click="onClick(index,2)">户外运动</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==3}"
								@click="onClick(index,3)">羽毛球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==4}"
								@click="onClick(index,4)">足球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==5}"
								@click="onClick(index,5)">篮球</text>
						</view>

						<view
							style="display: flex; flex-direction: row;margin-left: 30rpx;margin-right: 30rpx;margin-top: 20rpx;">
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==6}"
								@click="onClick(index,6)">网球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==7}"
								@click="onClick(index,7)">台球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==8}"
								@click="onClick(index,8)">游泳</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==9}"
								@click="onClick(index,9)">保龄球</text>
							<text class="labelLayout" :class="{'labelLayout2':item.SportCategorySid==10}"
								@click="onClick(index,10)">滑雪</text>
						</view>
					</view>


					<PublishItem leftText="人数费用" :middleText="getData(item)" rightText="设置" :isShowRight="true"
						@rightClick="clickItem('人数费用',index)">
					</PublishItem>
					<view class="line"></view>

					<biaofun-datetime-picker :start="item.startTime" @change="dateChange1($event, index)">
						<PublishItem leftText="开始时间" :middleText="item.startTime" rightText="修改" :isShowRight="true">
						</PublishItem>
					</biaofun-datetime-picker>

					<view class="line"></view>

					<biaofun-datetime-picker :start="item.endTime" @change="dateChange2($event, index)">
						<PublishItem leftText="结束时间" :middleText="item.endTime" rightText="修改" :isShowRight="true">
						</PublishItem>
					</biaofun-datetime-picker>

					<view class="line"></view>

					<PublishItem leftText="活动地点" :middleText="item.address" rightText="选择" :isShowRight="true"
						@rightClick="clickItem('活动地点',index)">
					</PublishItem>
					<!-- 	<PublishItem leftText="活动地点" :isShowRight="false"></PublishItem>
					<EditText hint="请输入活动地点" @onTextChange="addressText($event, index)" :value="item.address">
					</EditText> -->
					<view class="line"></view>

					<view class="line" style="height: 25rpx;"></view>

				</view>
			</view>
		</view>

		<view style="height: 100rpx;background: #FFFFFF;" v-if="info.listActivityItems.length<6">
			<view class="addData" @click="addData()">
				<image style="width: 48rpx;height: 48rpx;" src="../../static/event-icon/add.png" mode="aspectFit">
				</image>
				<text style="color: #898989 ; margin-left: 10rpx;">点击继续添加活动项目</text>

			</view>
		</view>

		<view style="height: 150px;"></view>
		<!-- <view style="display: flex;flex-direction: column; margin-top: 100rpx; margin: 30rpx;height: 400rpx;">

			<text style="color: #ff0000; font-size: 24rpx;">提示：</text>
			<text style="color: #ff0000; font-size: 24rpx; margin-top: 20rpx; line-height: 40rpx;">{{str}}</text>

		</view> -->


		<text class="btn" @click="jump()">奖项及其他设置</text>
	</RefreshView>
</template>

<script>
	export default {
		data() {
			return {
				isCreate: 0,
				pos: 0,
				str: "\u3000\u3000为简化业余比赛中记分的繁琐，我们特加了简易记分模式，选择'记到场分'、'记到局分'时可以不录小分，如积分相同则随机抽签确定名次。",

				price: "",
				info: {
					sid: "",
					listActivityItems: [{
						SportCategorySid: 1,
						SportCategoryName: "乒乓球"
					}],
				}
			}

		},
		onLoad: function(option) {
			console.log('option.isCreate', option.isCreate)
			this.isCreate = option.isCreate
			this.info = JSON.parse(option.info)

			console.log("info1===>" + option.info)
			console.log("info2===>" + this.info)

			if (this.info.listActivityItems.length == 0) {
				console.log("2222>" + this.info.listActivityItems.length)
				this.info.listActivityItems.push({
					address: "",
					placeSid: "",
					endTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
					enrollMoney: "",
					enrollNumbersLimit: "",
					introduction: "",
					name: "",
					SportCategorySid: 1,
					SportCategoryName: "乒乓球",
					startTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
				})
			}

			console.log("info3===>>" + JSON.stringify(this.info.listActivityItems))

		},
		onShow() {
			let backResult = this.OnActivityResult();
			if (backResult != undefined) {

				if (!this.IsEmpty(backResult.sid)) {
					console.log("选择的球馆>" + JSON.stringify(backResult))
					// 选择的球馆
					this.info.listActivityItems[this.pos].gymnasiumSid = backResult.sid
					this.info.listActivityItems[this.pos].address = backResult.name
					console.log("选择的球馆>" + JSON.stringify(this.info.listActivityItems))

				}

				if (!this.IsEmpty(backResult.enrollMoney)) {
					// 人数费用
					console.log("enrollMoney>" + backResult.enrollMoney)

					this.info.listActivityItems[this.pos].enrollMoney = backResult.enrollMoney
					this.info.listActivityItems[this.pos].enrollNumbersLimit = backResult.enrollNumbersLimit
				}

			}

		},
		methods: {
			backClick() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '赛事未发布，是否保存草稿？',
					success: function(res) {
						if (res.confirm) { //这里是点击了确定以后
							console.log('用户点击确定')
							that.WriteGameCahce(that.info)
							uni.navigateBack({
								delta: 2
							})
						} else { //这里是点击了取消以后
							console.log('用户点击取消')
							uni.navigateBack({
								delta: 2
							})
						}
					}
				})
			},
			leftBtnClick() {
				this.WriteGameCahce(this.info)
				uni.navigateBack({
					delta: 2
				})

			},
			rightBtnClick() {
				if (this.IsEmpty(getApp().globalData.memberSid)) {
					console.log('createSid', "无sid")
				} else {
					this.info.createSid = getApp().globalData.memberSid
					console.log('createSid', JSON.stringify(this.info))
					// this.HTTP({
					// 	url: 'v1/activityManagement/saveActivity',
					// 	method: 'POST',
					// 	data: this.info,
					// 	paramsType: "FORM",
					// 	loading: true
					// }).then((res) => {
					// this.ClearGameCache(this.info)
					// 		wx.navigateBack({
					// 		delta: 3
					// 	})

					// });
				}

			},
			topClik(index) {
				this.WriteGameCahce(this.info)
				switch (index) {
					case 1:
						uni.navigateTo({
							url: "exemptionActivity?isCreate=" + this.isCreate +
								"&info=" + JSON.stringify(this.info) // 页面 A
						})
						break
					case 3:
						uni.navigateTo({
							url: "prizeActivity?isCreate=" + this.isCreate +
								"&info=" + JSON.stringify(this.info) // 页面 A
						})
						break
				}
			},
			nameText(e, index) {
				this.info.listActivityItems[index].name = e.detail.value
			},
			explainText(e, index) {
				this.info.listActivityItems[index].introduction = e.detail.value
			},
			onClick(index, pos) {
				console.log("index=====>" + index)
				console.log("pos=====>" + pos)
				switch (pos) {
					case 1:
						this.info.listActivityItems[index].SportCategorySid = 1,
							this.info.listActivityItems[index].SportCategoryName = "乒乓球"
						console.log("info3===>>" + JSON.stringify(this.info.listActivityItems))
						break
					case 2:
						this.info.listActivityItems[index].SportCategorySid = 2,
							this.info.listActivityItems[index].SportCategoryName = "户外运动"
						break
					case 3:
						this.info.listActivityItems[index].SportCategorySid = 3,
							this.info.listActivityItems[index].SportCategoryName = "羽毛球"
						break
					case 4:
						this.info.listActivityItems[index].SportCategorySid = 4,
							this.info.listActivityItems[index].SportCategoryName = "足球"
						break
					case 5:
						this.info.listActivityItems[index].SportCategorySid = 5,
							this.info.listActivityItems[index].SportCategoryName = "篮球"
						break
					case 6:
						this.info.listActivityItems[index].SportCategorySid = 6,
							this.info.listActivityItems[index].SportCategoryName = "网球"
						break
					case 7:
						this.info.listActivityItems[index].SportCategorySid = 7,
							this.info.listActivityItems[index].SportCategoryName = "台球"
						break
					case 8:
						this.info.listActivityItems[index].SportCategorySid = 8,
							this.info.listActivityItems[index].SportCategoryName = "游泳"
						break
					case 9:
						this.info.listActivityItems[index].SportCategorySid = 9,
							this.info.listActivityItems[index].SportCategoryName = "保龄球"
						break
					case 10:
						this.info.listActivityItems[index].SportCategorySid = 10,
							this.info.listActivityItems[index].SportCategoryName = "滑雪"
						break


				}

			},
			getData(info) {

				let num = info.enrollNumbersLimit == 0 ? "不限制人数" : info.enrollNumbersLimit + "人"
				let price = info.enrollMoney == 0 ? "免费" : info.enrollMoney + "元"

				return num + " / " + price
			},
			dateChange1(e, index) {
				console.log("eee>" + e.f3)
				console.log("index>" + index)
				this.info.listActivityItems[index].startTime = e.f1 + " " + e.hh + ":" + e.mm

			},
			dateChange2(e, index) {
				this.info.listActivityItems[index].endTime = e.f1 + " " + e.hh + ":" + e.mm
			},
			addressText(e, index) {
				this.info.listActivityItems[index].address = e
			},
			deleteItem(item) {
				let _this = this
				console.log("====>" + _this.info.listActivityItems.length);

				uni.showModal({
					title: '温馨提示',
					content: '确定要删除这条活动项目吗？',
					success(res) {
						if (res.confirm) {
							_this.info.listActivityItems.splice(_this.info.listActivityItems.indexOf(item),
								1);
							console.log("====>" + _this.info.listActivityItems.length);
						}
					}
				});

			},

			clickItem(e, index) {
				this.pos = index
				let _this = this
				console.log("index====>" + index);
				console.log("this.pos====>" + this.pos);
				switch (e) {
					case "人数费用":
						uni.navigateTo({
							url: "InputHappyGameLimitActivity?enrollNumbersLimit=" +
								(_this.info.listActivityItems[index].enrollNumbersLimit == undefined ? "" :
									_this.info.listActivityItems[index].enrollNumbersLimit) +
								"&enrollMoney=" + (_this.info.listActivityItems[index].enrollMoney ==
									undefined ? "" :
									_this.info.listActivityItems[index].enrollMoney) +
								"&type=" + (_this.info.listActivityItems[index].type == undefined ? "" :
									_this.info.listActivityItems[index].type),
						})
						break;
					case "活动地点":
						uni.navigateTo({
							url: "InputHappyGameAreaActivity",
						})
						break;
				}
			},
			addData() {
				this.info.listActivityItems.push({
					name: "",
					introduction: "",
					enrollNumbersLimit: "",
					enrollMoney: "",
					startTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
					endTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
					address: "",
					SportCategorySid: 1,
					SportCategoryName: "乒乓球",
				})
			},
			jump() {
				let info = this.info.listActivityItems;

				if (info.length == 0) {
					this.Toast("请添加活动项目")
					return
				}

				// 设置比赛项目
				for (var i = 0; i < info.length; i++) {

					if (this.IsEmpty(info[i].name)) {
						this.Toast("请输入活动项目名称")
						return
					}
					if (this.IsEmpty(info[i].introduction)) {
						this.Toast("请输入活动项目说明")
						return
					}
					if (this.IsEmpty(info[i].address)) {
						this.Toast("请输入活动地点")
						return
					}
				}

				// console.log("leagth" + this.listActivityItems.length)
				uni.navigateTo({
					url: "prizeActivity?isCreate=" + this.isCreate +
						"&info=" + JSON.stringify(this.info)
				})
			}
		}
	}
</script>

<style lang="scss">
	.topLayout {
		background: #F7F7F7;
		display: flex;
		padding: 30rpx 60rpx;
		flex-direction: row;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;

		.topLayout_item {
			display: flex;
			align-items: center;
			flex-direction: row;

			.topLayout_item_left1 {
				width: 48rpx;
				height: 48rpx;
				background-color: #007AFF;
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 36rpx;
				text-align: center;
			}

			.topLayout_item_left2 {
				width: 48rpx;
				height: 48rpx;
				border: 1rpx solid #D9D9D9;
				border-radius: 50%;
				color: #D9D9D9;
				font-size: 36rpx;
				text-align: center;
			}
		}
	}

	.line {
		width: 100%;
		height: 5rpx;
		background-color: #f5f4f9;
	}

	.tabLayout {
		background: #FFFFFF 100%;
		display: flex;
		flex-direction: row;
		padding-bottom: 20rpx;
	}

	.layout {
		background: #FFFFFF 100%;
		display: flex;
		flex-direction: row;
		padding: 30rpx 15rpx;
		align-items: center;

		.layout_lift {
			font-size: 30rpx;
			color: #101010;
		}

		.layout_right {
			display: flex;
			right: 32rpx;
			align-items: center;
		}
	}

	.labelLayout {
		display: flex;
		flex: 1;
		margin-left: 10rpx;
		margin-right: 10rpx;
		background-color: #F2BF5C;
		color: #FFFFFF;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		justify-content: center;
		text-align: center;
		font-size: 30rpx;
	}

	.labelLayout2 {
		background-color: #007AFF;
	}


	.items {
		display: flex;
		flex-direction: column;

		.layout1 {
			padding: 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #FFFFFF;

			.number {
				width: 48rpx;
				height: 48rpx;
				background-color: #007AFF;
				border-radius: 50%;
				color: #FFFFFF;
				font-size: 36rpx;
				text-align: center;
			}

			.name {
				margin-left: 20rpx;
				width: 80%;
			}
		}

		.layout2 {
			margin-top: 10rpx;
			background: #FFFFFF;
			display: flex;
			padding: 32rpx;
			height: auto;

			.explain {
				width: 100%;

			}
		}

		.layout3 {
			background: #FFFFFF;
			display: flex;
			margin-top: 10rpx;
			flex-direction: row;
			padding: 32rpx;

			.layout_lift {
				font-size: 28rpx;
				color: #101010;
			}

			.layout_mobile {
				display: flex;
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #8F8F94;
			}

			.input {
				flex: 1;
				width: auto;
				margin-left: 20rpx;
			}

			.layout_right {
				display: flex;
				right: 32rpx;
				align-items: center;


				.layout_right_text {
					margin-right: 10rpx;
					font-size: 28rpx;
					color: #080808;
				}
			}
		}




	}

	.addData {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		padding: 32rpx;
		align-items: center;
	}

	.btn {
		justify-content: center;
		width: 100%;
		margin-top: 100rpx;
		padding: 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #007AFF;
		text-align: center;
		flex: 1;
		position: absolute;
		bottom: 0;
	}
</style>
