<template>
	<view class="add-school-activity">
		<view class="nav-bar-back">
		    <image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
		    <view class="nav-bar-title">发起赛事</view>
			<image class="nav-bar-add" src="../../static/post/send.png"  @click="submit" :disabled="btnDisabled"></image>
		</view>
		<view class="school-activity-icon-wrapper">
			<image class="school-activity-icon" src="/static/discover/activity-icon.png"></image>
		</view>
		<view class="school-activity-item-wrapper">
			 <view class="form-group">
			    <image class="form-icon" src="/static/discover/name.png"></image>
			    <input maxlength="20" class="form-input" type="text" placeholder="请输入活动名称" v-model="name">
			</view>
			<view class="form-group">
			    <image class="form-icon" src="/static/discover/content.png"></image>
				<textarea maxlength="200" class="form-input1" placeholder="请输入活动内容" v-model="content" ></textarea>
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/activity-time.png"></image>
				<view class="input-wrapper">
					<view class="form-input2-wrapper">
						<view class="form-input2">
						  <picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange1">
						    <view class="picker">{{ start_date }}</view>
						  </picker>
						</view>
						<view class="form-input2">
						  <picker mode="time" start="00:00" end="23:59" @change="handleTimeChange1">
						    <view class="picker">{{ start_time }}</view>
						  </picker>
						</view>
					</view>
				  <view class="form-input2-wrapper">
					  
					  <view class="form-input2">
					    <picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange2">
					      <view class="picker">{{ end_date }}</view>
					    </picker>
					  </view>
					  <view class="form-input2">
					    <picker mode="time" start="00:00" end="23:59" @change="handleTimeChange2">
					      <view class="picker">{{ end_time }}</view>
					    </picker>
					  </view>
				  </view>
				</view>
			</view>
			<view class="form-group">
			    <image class="form-icon" src="/static/discover/activity-object.png"></image>
			    <input maxlength="20" class="form-input" type="text" placeholder="请输入活动对象" v-model="object">
			</view>
			<view class="form-group">
			    <image class="form-icon" src="/static/discover/activity-place.png"></image>
			    <input maxlength="20" class="form-input" type="text" placeholder="请输入活动地点" v-model="place">
			</view>
			<view class="form-group">
			    <image class="form-icon" src="/static/discover/activity-contact.png"></image>
			    <input maxlength="20" class="form-input" type="text" placeholder="请输入活动联系方式" v-model="contact">
			</view>
			<view class="form-group1">
				<text>请设置活动封面</text>
				<uni-file-picker class="pic-content" v-model="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
					@select="select" @progress="progress" @success="success" @fail="fail" />
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
	    data() {
	      return {
			btnDisabled: false,
	        name:'',
			content:'',
			object:'',
			place:'',
			contact:'',
			 start_date: '2023-05-04',
			 end_date: '2023-05-04',
			 start_time:'14:00',
			 end_time:'14:00',
			 imageValue:[],
			 teacherId:'',
	      }
	    },
	    methods: {
	      goBack() {
	        uni.navigateBack({
	          delta: 1
	        })
	      },
		 async submit() {
			 if (this.btnDisabled) {
			       return
			     }
			     this.btnDisabled = true
			     setTimeout(() => {
			       this.btnDisabled = false
			     }, 1000)
			 const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
			 const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
			 let time1=this.start_date+' '+this.start_time
			 let time2=this.end_date+' '+this.end_time
			 let obj1 = new Date(time1) //开始时间
			 let obj2 = new Date(time2) //结束时间
				 
			 if(this.name==''||this.content==''||this.object==''||this.place=='') {
				 uni.showToast({
				 	title: '输入内容不能为空',
				 	icon: 'none'
				 	});
				 return;
			 }
			 else if(this.imageValue.length==0) {
				 uni.showToast({
				 	title: '输入图片不能为空',
				 	icon: 'none'
				 	});
				 return;
			 }
			else if (obj1.getTime() >= obj2.getTime()) {
			 	uni.showToast({
			 		title: '开始时间不能大于等于结束时间',
			 		icon: 'none'
			 		});
				return;
			}else if (!(reg.test(this.contact))) {
		           uni.showToast({
		             title: '请输入正确的联系方式（手机号）',
		             icon: 'none'
		           });
		           return;
		         }else {
					 uniCloud.callFunction({
					 		name: 'fe-find-teacher-createActivity',
					 		data: { teacherId:this.teacherId,
									picture:this.imageValue[0]["path"],
									title:this.name,
									content:this.content,
									invitee:this.object,
									startDate:this.start_date+' '+this.start_time,
									endDate:this.end_date+' '+this.end_time,			
									place:this.place,
									contact:this.contact
					 		}
					 	})
					 	.then(res => {
					 					console.log(res);
					 	});
					// console.log(this.teacherId);
					 // uni.showToast({
					 //      title: '提交成功',
					 //      icon: 'success',
					 //    });
						// this.goBack();
						   uni.showToast({
						title: '提交成功',
						duration: 1000,
						success: () => {
						     setTimeout(() => {
						  uni.navigateBack()
						     }, 1000)
						}
						    })
				 }
		       },
			    handleDateChange1(event) {
			           this.start_date = event.detail.value
					   // uni.showToast({
					   //     title: this.start_date,
					   //     icon: 'none'
					   //   })
			         },
				handleDateChange2(event) {
					    this.end_date = event.detail.value
				},
				handleTimeChange1(event) {
					    this.start_time = event.detail.value
				},
				handleTimeChange2(event) {
					    this.end_time = event.detail.value
				},
				select(e) {
					console.log('选择文件：', e)
				},
				// 获取上传进度
				progress(e) {
					console.log('上传进度：', e)
				},
				
				// 上传成功
				success(e) {
					console.log('上传成功',e)
				},
				
				// 上传失败
				fail(e) {
					console.log('上传失败：', e)
				},
			
			},onLoad(e) {
			this.teacherId=e.teacherId;
		}
	  }
</script>

<style>
	.add-school-activity {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}
	.nav-bar-back {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 60px;
			background-color: #EDEEF0;
	}
	.nav-bar-back-icon {
	  width: 40px;
	  height: 30px;
	}
	.nav-bar-title {
	  flex: 1;
	  text-align: center;
	  font-size: 24px;
	  font-weight: bold;
	  color: #F1992D;
	}
	.nav-bar-add {
		width: 30px;
		height: 30px;
		margin-top: 10px;
		float: right;
		margin-right: 10px;
	}
	.school-activity-icon-wrapper{
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.school-activity-icon {
	  width: 50%;
	  height: 80px;
	  margin: 0px;
	  padding: 0px;
	}
		
	.school-activity-item-wrapper{
		margin-top: 20px;
	}
	
	.form-group {
	    display: flex;
	    align-items: center;
		margin-top: 15px;
	  }
	  .form-icon {
	    width: 40px;
	    height: 30px;
	    margin-left: 10px;
	  }
	  
	  .form-input {
		margin-left: 5px;
		width: 70%;
	    height: 35px;
	    border: none;
	    outline: none;
	    font-size: 14px;
	    color: #333;
	    background-color: #fff;
	    padding: 0 10px;
	  }
	  .form-input1 {
	    margin-left: 5px;
	    width: 70%;
	    height: 70px;
	    border: none;
	    outline: none;
	    font-size: 14px;
	    color: #333;
	    background-color: #fff;
	    padding: 0 10px;
	  }
	.input-wrapper {
		flex-direction: column;
		display: flex;
		width: 100%;
	}
	.form-input2-wrapper {
	  display: flex;
	  flex-direction: row;
	}
	.form-input2 {
		margin-top: 5px;
		margin-left: 10px;
		width: 30%;
		height: 35px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		background-color: #fff;
		padding: 0 10px;
	}
	.form-group1 {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  margin-top: 10px;
		}
		.form-group1 text {
			  margin-bottom: 10px; /* 调整 text 和 pic-content 之间的距离 */
			}
	.pic-content {
		height: 200px;
	}
		
		
	.picker{
		margin-top:  10px;
	}
	.file-picker__box{
		  background-color: white;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, 0%);
	}

</style>