<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">
				<text class="topLayout_item_left1">1</text>
				<text style="font-size: 28rpx;color: #262626;margin-left: 10rpx;">基本信息</text>
			</view>

			<view class="topLayout_item" @click="topClik(2)">
				<text class="topLayout_item_left2">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)">
				<text class="topLayout_item_left2">3</text>
				<text style="font-size: 28rpx;color: #979797;margin-left: 10rpx;">奖项及其他</text>
			</view>
		</view>

		<PublishItem leftText="标题" :isShowRight="false"></PublishItem>
		<EditText hint="请输入活动名称" @onTextChange="text" :text="info.activityBaseInfo.name"></EditText>
		<view class=" line">
		</view>

		<PublishItem leftText="赛事简介" rightText="编辑" :isShowRight="true" @rightClick="clickItem('赛事介绍')">
		</PublishItem>
		<view style="display: flex;margin-left: 30rpx; margin-right: 30rpx;">
			<editor id="editor1" style="height: 50rpx; white-space: pre-wrap;" placeholder="点击进行编辑..." showImgSize
				showImgToolbar showImgResize :read-only="true" @click="clickItem('赛事介绍')" @ready="onEditorReady1">
			</editor>
		</view>
		<view class="line"></view>

		<view style="display: flex; flex-direction: row;margin-top: 20rpx;margin-bottom: 20rpx;">
			<view
				style="display: flex; justify-content: center;align-items: center;padding-left: 30rpx;padding-right: 30rpx;"
				@click="clickItem('宣传海报')">
				<image style="width: 130rpx;height: 130rpx;" src="../../static/upload_image.png" mode="aspectFill">
				</image>
			</view>

			<scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true">
				<view v-for="(item,index) in info.activityBaseInfo.listCoverImageUrl" :key="index"
					style="display: inline-block;">
					<view style="margin-left: 20rpx;margin-right: 20rpx;display: flex;">
						<image :src="item" style="width: 220rpx;height: 150rpx;z-index: 1;" mode="aspectFill"
							@click="showImage(item)">
						</image>
						<image src="../../static/event-icon/delete1.png"
							style="margin-left: -60rpx;margin-top: 10rpx;width: 50rpx;height: 50rpx;z-index: 2;"
							@click="deleteItem(item)">
						</image>
					</view>

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

		<biaofun-datetime-picker :start="info.activityBaseInfo.enrollStartTime" @change="dateChange1">
			<PublishItem leftText="报名开始时间" :middleText="info.activityBaseInfo.enrollStartTime" rightText="修改"
				:isShowRight="true"></PublishItem>
		</biaofun-datetime-picker>
		<view class="line"></view>

		<biaofun-datetime-picker :start="info.activityBaseInfo.enrollEndTime" @change="dateChange2">
			<PublishItem leftText="报名截止时间" :middleText="info.activityBaseInfo.enrollEndTime" rightText="修改"
				:isShowRight="true">
			</PublishItem>
		</biaofun-datetime-picker>
		<view class="line"></view>

		<PublishItem leftText="联系方式" :middleText="name_mobile" rightText="修改" :isShowRight="true"
			@rightClick="clickItem('联系方式')"></PublishItem>

		<view class="line"></view>
		<!-- 
		<view class="layout1" style="flex-direction:column">
			<view class="layout">
				<image style="width: 45rpx;height: 45rpx;" src="../../static/custom-icon/line.png" mode="aspectFill">
				</image>
				<text class="layout_lift">报名条件</text>
				<view class="layout_right" style="flex: 1;margin-left: 50rpx;">
					<radio-group @change="radioChange">
						<radio :checked="info.activityBaseInfo.radioType1">认证用户</radio>
						<radio :checked="info.activityBaseInfo.radioType2" style="margin-left: 50rpx;">不限制</radio>
					</radio-group>
				</view>
			</view>
			<text style="font-size: 24rpx; color:#ff0000 ; margin-left: 50rpx;">注：规模活动请选择认证用户，便于管理及实施。</text>
		</view>

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

		<PublishItem leftText="免责声明" rightText="编辑" :isShowRight="true" @rightClick="clickItem('免责声明')">
		</PublishItem>
		<view style="display: flex;margin-left: 30rpx; margin-right: 30rpx;">
			<editor id="editor2" style="white-space: pre-wrap;" placeholder="点击进行编辑..." showImgSize showImgToolbar
				showImgResize :read-only="true" @click="clickItem('免责声明')" @ready="onEditorReady2">
			</editor>
		</view>

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

		<view class="layout">
			<image style="width: 45rpx;height: 45rpx;" src="../../static/custom-icon/line.png" mode="aspectFill">
			</image>
			<text class="layout_lift" style="flex: 1;">参赛者取消报名</text>
			<view style="display: flex; flex: 1;justify-content: flex-end;margin-right: 15rpx;">
				<fui-dropdown-menu :size="30" selectedColor="#465CFF" :options="options" @click="typeItemClick"
					@close="typeClose" ref="ddmtype">
					<view class="fui-filter__item" @tap="filterTap()">
						<image style="width: 22rpx;height: 22rpx; margin-left: 15rpx;"
							src="../../static/event-icon/xia.png" mode="aspectFit" class="fui-filter__icon"
							:class="{'fui-icon__ani':typeShow}">
						</image>
						<text>{{type}}</text>
					</view>
				</fui-dropdown-menu>
			</view>
		</view>

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

		<view class="layout1" style="flex-direction:column">
			<view class="layout">
				<image style="width: 45rpx;height: 45rpx;" src="../../static/custom-icon/line.png" mode="aspectFill">
				</image>
				<text class="layout_lift" style="flex: 1;">是否公开</text>
				<view class="layout_right">
					<switch class="tui-fr" :checked="switch1Checked" @change="switch1Change">
					</switch>
				</view>
			</view>
			<text style="font-size: 24rpx; color:#ff0000 ; margin-left: 50rpx;">注：非公开赛事在“我的赛事”可见，分享后好友可报名。</text>
		</view>

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

		<text class="btn" @click="jump()">设置活动项目</text>

		<cropper saveMode="ScaleTo500" ref="cropper" :aspectRatio="1.25" @complete="complete" @cancel="cancel">
		</cropper>
	</RefreshView>
</template>

<script>
	import asyncSwitch from "@/components/helang-asyncSwitch/helang-asyncSwitch.vue";
	import fuiButton from "@/components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue"
	export default {
		components: {
			"async-switch": asyncSwitch,
			"fuiButton": fuiButton
		},
		data() {
			return {
				isCreate: 0,
				options: [{
					text: '退还报名费',
					value: 1,
				}, {
					text: '不退报名费',
					value: 0
				}],

				name_mobile: "",
				typeShow: false,
				type: "退报名费",
				switch1Checked: false,
				switch2Checked: false,
				info: {
					sid: "",
					activityBaseInfo: {
						enrollStartTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
						enrollEndTime: this.TimeFormat(this.CurrentMillions(), "yyyy-MM-dd HH:mm"),
						listCoverImageUrl: [],
						cancelEnrollRefund: 0,
						inviteType: 0
					},
					listActivityItems: [],
					activityNotesOther: {}
				},


			};

		},
		onLoad: function(option) {
			console.log('option.isCreate', option.isCreate)
			this.isCreate = option.isCreate
			let that = this

			if (this.HasCache()) {
				uni.showModal({
					title: '提示',
					content: '是否使用草稿内容',
					success: function(res) {
						if (res.confirm) { //这里是点击了确定以后
							console.log('用户点击确定')
							console.log('---->1', that.ReadGameCahce())
							that.info = that.ReadGameCahce()
							console.log('---->2', that.info)

							if (that.info.activityBaseInfo.linkerName != null && that.info
								.activityBaseInfo.linkerPhone != null) {
								that.name_mobile = that.info.activityBaseInfo.linkerName + "\u3000" +
									that.info.activityBaseInfo.linkerPhone
							}

							that.switch1Checked = that.info.activityBaseInfo.cancelEnrollRefund == 1 ?
								true :
								false
							that.switch2Checked = that.info.activityBaseInfo.inviteType == 1 ? true :
								false

							that.onEditorReady1()
							that.onEditorReady2()

						} else { //这里是点击了取消以后
							console.log('用户点击取消')
						}
					}
				})
			}
		},
		onShow() {
			let backResult = this.OnActivityResult();
			if (backResult != undefined) {
				this.info.activityBaseInfo = backResult;
				if (!this.IsEmpty(this.info.activityBaseInfo.linkerName) && !this.IsEmpty(this.info.activityBaseInfo
						.linkerPhone)) {
					this.name_mobile = this.info.activityBaseInfo.linkerName + "\u3000" + this.info.activityBaseInfo
						.linkerPhone
				}
				console.log(backResult)
				this.onEditorReady1()
				this.onEditorReady2()
			}

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

			},
			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) {
				switch (index) {
					case 2:
						uni.navigateTo({
							url: "setEventActivity?isCreate=" + this.isCreate +
								// "&activityBaseInfo=" + encodeURIComponent(JSON.stringify(this.activityBaseInfo))
								"&info=" + JSON.stringify(this.info) // 页面 A
						})
						break
					case 3:
						uni.navigateTo({
							url: "prizeActivity?isCreate=" + this.isCreate +
								"&info=" + JSON.stringify(this.info) // 页面 A
						})
						break
				}
			},

			deleteItem(item) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success(res) {
						if (res.confirm) {
							this.info.activityBaseInfo.listCoverImageUrl.splice(this.info.activityBaseInfo
								.listCoverImageUrl.indexOf(item), 1)
						}
					}
				});

			},
			showImage(item) {
				// 从相册选择6张图
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						// 预览图片
						uni.previewImage({
							urls: res.tempFilePaths,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					}
				});
			},
			clickItem(e) {
				let _this = this
				switch (e) {
					case "宣传海报":
						uni.chooseImage({
							count: 9,
							sizeType: ['compressed'],
							success: function(res) {
								console.log(JSON.stringify(res.tempFilePaths));
								for (var i = 0; i < res.tempFilePaths.length; i++) {
									_this.info.activityBaseInfo.listCoverImageUrl.push(res.tempFilePaths[i])
								}

							}
						})
						break;
					case "联系方式":
						uni.navigateTo({
							url: "mobileInfoActivity?activityBaseInfo=" + JSON.stringify(_this.info
								.activityBaseInfo)
						})
						break;
					case "赛事介绍":
						uni.navigateTo({
							url: "explainActivity?activityBaseInfo=" + JSON.stringify(_this.info
								.activityBaseInfo)
						})
						break;
					case "免责声明":
						uni.navigateTo({
							url: "eventActivity?activityBaseInfo=" + JSON.stringify(_this.info
								.activityBaseInfo)
						})
						break;
				}
			},
			radioChange(e) {
				this.info.activityBaseInfo.radioType1 = !this.info.activityBaseInfo.radioType1
				this.info.activityBaseInfo.radioType2 = !this.info.activityBaseInfo.radioType2
				console.log('radio1发生change事件，携带value值为：', this.info.activityBaseInfo.radioType1)
				console.log('radio2发生change事件，携带value值为：', this.info.activityBaseInfo.radioType2)
			},
			cancel() {
				this.$refs.cropper.close(true);
			},
			complete(e) {
				this.activityBaseInfo.logo = e.path
				this.$refs.cropper.close(true);
			},
			dateChange1(e) {
				this.info.activityBaseInfo.enrollStartTime = e.f1 + " " + e.hh + ":" + e.mm
				console.log(e)
			},
			dateChange2(e) {
				this.info.activityBaseInfo.enrollEndTime = e.f1 + " " + e.hh + ":" + e.mm
			},
			onEditorReady1() {

				// #ifdef  APP-PLUS
				uni.createSelectorQuery().select('#editor1').context((res) => {
					this.editorCtx1 = res.context
					this.editorCtx1.setContents({
						html: this.info.activityBaseInfo.introduction
					})
				}).exec()
				// #endif

				// #ifdef H5 || MP-WEIXIN
				this.createSelectorQuery().select('#editor1').context((res) => {
					this.editorCtx1 = res.context
					this.editorCtx1.setContents({
						html: this.info.activityBaseInfo.introduction
					})
				}).exec()
				// #endif
			},
			onEditorReady2() {

				// #ifdef  APP-PLUS
				uni.createSelectorQuery().select('#editor2').context((res) => {
					this.editorCtx2 = res.context
					this.editorCtx2.setContents({
						html: this.info.activityBaseInfo.disclaimer
					})
				}).exec()
				// #endif

				// #ifdef H5 || MP-WEIXIN
				this.createSelectorQuery().select('#editor2').context((res) => {
					this.editorCtx2 = res.context
					this.editorCtx2.setContents({
						html: this.info.activityBaseInfo.disclaimer
					})
				}).exec()
				// #endif
			},

			filterTap() {
				// this.$refs.ddmtype.show()
				this.typeShow = true;
			},
			typeItemClick(e) {
				this.type = e.text
				this.info.activityBaseInfo.cancelEnrollRefund = e.value
				console.log(this.type)
				console.log(this.info.activityBaseInfo.cancelEnrollRefund)
				this.typeClose()
			},
			typeClose() {
				this.typeShow = false;
			},

			switch1Change: function(e) {
				this.switch1Checked = !this.switch1Checked;
				this.info.activityBaseInfo.cancelEnrollRefund = this.switch1Checked == true ? 0 : 1;
				console.log(`switch1Change样式点击后是否选中：`, this.switch1Checked)
				console.log(`cancelEnrollRefund是否选中：`, this.info.activityBaseInfo.cancelEnrollRefund)
			},
			switch2Change: function(e) {
				this.switch2Checked = !this.switch2Checked;
				this.info.activityBaseInfo.inviteType = this.switch2Checked == true ? 0 : 1;
				console.log(`switch2Change样式点击后是否选中：`, this.switch1Checked)
				console.log(`inviteType是否选中：`, this.info.activityBaseInfo.inviteType)
			},
			jump() {

				if (this.IsEmpty(this.info.activityBaseInfo.name)) {
					this.Toast("请输入活动名称");
					return;
				}
				if (this.IsEmpty(this.info.activityBaseInfo.linkerName) || this.IsEmpty(this.info.activityBaseInfo
						.linkerPhone)) {
					this.Toast("联系方式不能为空");
					return;
				}
				if (this.IsEmpty(this.info.activityBaseInfo.introduction)) {
					this.Toast("活动介绍不能为空");
					return;
				}
				if (this.IsEmpty(this.info.activityBaseInfo.disclaimer)) {
					this.Toast("免责声明不能为空");
					return;
				}

				uni.navigateTo({
					url: "setEventActivity?isCreate=" + this.isCreate +
						// "&activityBaseInfo=" + encodeURIComponent(JSON.stringify(this.activityBaseInfo))
						"&info=" + JSON.stringify(this.info)
				})

			}
		}

	};
</script>

<style lang="scss">
	.line {
		width: 100%;
		height: 5rpx;
		background-color: #f5f4f9;
	}

	.logo {
		width: calc(100vw - 40rpx);
		height: calc((100vw - 40rpx)*0.8);
		margin-left: 20rpx;
	}

	.topLayout {
		background: #F7F7F7;
		display: flex;
		padding: 30rpx 60rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

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

			.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;
			}
		}
	}

	.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;
	}

	.tui-fr {
		zoom: .7
	}

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

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

	.fui-filter__item {
		height: auto;
		width: 300rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		font-size: 30rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}
</style>
