<template>
	<view class="page">
		<view class="page-info">
			<view class="info-box">
				<view class="title">参与时间</view>
				<u-radio-group v-model="participateTimeType" :wrap="true">
							<u-radio 
										@change="radioChange" 
										v-for="(item, index) in timeOptions" :key="index" 
										:name="item.name"
										active-color="#4CD964"
									>
										{{item.name}}
									</u-radio>
					
				</u-radio-group>
				<u-input v-if="participateTimeType=='自定义时间'" style="width: 30%;"  v-model="form.canyutiem" type="select" @click="establishow = true"
					placeholder="请选择" />
				<u-picker mode="time" v-model="establishow" :params="params"
					@confirm="establiChange"></u-picker>
			</view>
			<view class="info-box">
				<view style="display: flex; justify-content: space-between;">
					<view class="title">奖品设置</view>
					<view @click="addjiangli" class="" style="font-size: 14px;color: #0FBB59;font-weight: bold;">添加奖励<u-icon name="play-right-fill" color="#0FBB59" size="23"></u-icon></view>		
				</view>
				<view style="width: 100%;height: 1px; background-color: rgba(#D8D8D8, 0.5);margin: 20rpx 0 ;"></view>
				<view>
					<u-table :borde="false">
							<u-tr>
								<u-th>名称</u-th>
								<u-th>奖品</u-th>
								<u-th>数量</u-th>
							</u-tr>
							<u-tr>
								<u-td>浙江大学</u-td>
								<u-td>二年级</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>清华大学</u-td>
								<u-td>05班</u-td>
								<u-td>20</u-td>
							</u-tr>
						</u-table>
				</view>

			</view>
			<view class="info-box">
				<view style="display: flex; justify-content: space-between;">
					<view class="title">打卡设置</view>
					<view @click="dakaSet" class="" style="font-size: 14px;color: #0FBB59;font-weight: bold;">打卡设置<u-icon name="play-right-fill" color="#0FBB59" size="23"></u-icon></view>
				</view>
				<view style="width: 100%;height: 1px; background-color: rgba(#D8D8D8, 0.5);margin: 20rpx 0 ;"></view>
				<view>
					<u-table :borde="false">
							<u-tr>
								<u-th>打卡点</u-th>
								<u-th>位置</u-th>
								<u-th>奖励</u-th>
							</u-tr>
							<u-tr>
								<u-td>浙江大学</u-td>
								<u-td>二年级</u-td>
								<u-td>22</u-td>
							</u-tr>
							<u-tr>
								<u-td>清华大学</u-td>
								<u-td>05班</u-td>
								<u-td>20</u-td>
							</u-tr>
						</u-table>
				</view>
			</view>	
		</view>


		<!-- 底部 -->
		<view style="height: 125rpx;"></view>
		<view class="page-footer">
			<view class="footer-btn">
				<u-button type="success" @click="baoShow">我要参与</u-button>
			</view>

		</view>
		<u-popup class="userForm" v-model="joinShow" mode="center" border-radius="20" :closeable="true" width="90%">
			<view style="padding: 30rpx;">
				<u-form class="form-box" :model="form" ref="uForm" :label-width="120">
					<view style="padding: 10rpx;">
						<view class="title">请填写您的报名信息</view>
						<u-form-item label="*姓名"><u-input v-model="form.userName" /></u-form-item>
						<u-form-item label="*电话"><u-input v-model="form.userPhone" /></u-form-item>
						<u-button type="success" @click="submit">提交</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<u-popup class="userForm" v-model="addjiangliShow" mode="center" border-radius="20" :closeable="false" width="100%">
			<view style="padding: 20rpx;">
				<u-form class="form-box" :model="jlForm" ref="uForm" :label-width="120">
					<view style="padding: 10rpx;">
						<!-- <view class="title">请填写您的报名信息</view> -->
						<view style="font-weight: bold;font-size: 16px;">奖励类型</view>
						<view><u-input v-model="jlForm.type"  /></view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span style="color: red;">*</span>名称</view>
						<view><u-input v-model="jlForm.name" /></view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span style="color: red;">*</span>奖品数量</view>
						<view><u-input v-model="jlForm.num" /></view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span style="color: red;">*</span>奖品图片</view>
						<view>
							<u-upload style="display: flex;flex-wrap:wrap" :action="$upload" :auto-upload="false"
								ref="coverImage" :max-count="1" :file-list="fist"
								@on-remove="(response, file, fileList) => removeList(response, file, fileList)"
								@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
						</view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span style="color: red;">*</span>兑奖方式</view>
						<view>
							<u-radio-group v-model="jlForm.fangshi" >
										<u-radio 
													@change="radioChange" 
													v-for="(item, index) in fangshi" :key="index" 
													:name="item.name"
													active-color="#4CD964"
												>
													{{item.name}}
												</u-radio>
							</u-radio-group>
						</view>
						<view style="display: flex;justify-content: space-between;margin-top: 10px;">
							<u-button type="" style="width: 45%;" @click="submit">取消</u-button>
							<u-button type="success" style="width: 45%;" @click="submit">提交</u-button>
						</view>
					</view>
				</u-form>
			</view>
		</u-popup>
		<u-popup class="userForm" v-model="dakaShow" mode="center" border-radius="20" :closeable="true" width="100%">
			<view style="padding: 30rpx;">
				<u-form class="form-box" :model="form" ref="uForm" :label-width="120">
					<view style="padding: 10rpx;">
						<view class="title">请填写您的报名信息</view>
						<u-form-item label="*姓名"><u-input v-model="form.userName" /></u-form-item>
						<u-form-item label="*电话"><u-input v-model="form.userPhone" /></u-form-item>
						<u-button type="success" @click="submit">提交</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fist: [],
				tableData: {},
				list: ['标签', '标签', '标签'],
				participateTimeType: '同步活动周期', // 默认选中同步活动周期
				timeOptions: [{
						disabled: true,
						name: '同步活动周期'
					},
					{
						disabled: false,
						name: '自定义时间'
					}
				],
				fangshi:[
				{
						disabled: true,
						name: '现场兑换'
					},
					{
						disabled: false,
						name: '邮寄'
					}
				],
				joinShow: false,
				establishow:false,
				addjiangliShow:false,
				dakaShow:false,
				params: {
					year: true,
					month: true,
					day: true
				},
				form: {
					activityId: '',
					userId: '',
					createTime: '',
					createUser: '',
					userName: '',
					userPhone: '',
					canyutiem:''
				},
				jlForm:{
					type:'',
					name:'',
					num:'',
					tu:'',
					fangshi:'',
				},
				pagesize: {
					id: null,
				},
				imgurl: ''
			};
		},
		onLoad(option) {
			this.imgurl = this.$img
			this.pagesize.id = option.ids

			this.tableData = {
				id: 1,
				imageUrl: '/zsfwzxt/sp/bf83d7f7-6b30-494b-9d67-d56198d4612d-1.jpg', // 示例图片地址，需替换为实际地址
				title: '这里有标题这里有标题这里有标题',
				startTime: '2024-1-1',
				endTime: '2024-1-5',
				location: '锦江绿道',
				type: '打卡集字',
				participantNum: 20,
				status: '1',
				hasRecord: false
			}


		},
		methods: {
			baoShow() {
				uni.navigateTo({
					url: `/pagesA/PunchInAct/PunchInSetting?ids=${this.tableData.id}`
				})
			},
			submit() {
				if (!this.form.userName) {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					});
					return
				}


				if (!this.form.userPhone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系电话'
					});
					return
				}
				this.form.createTime = this.getCurrentDateTime()
				this.$http.sendRequest('/cereEventRegistration/add', 'POST', this.form, 1).then(res => {

					// uni.showToast({
					// 	title: res.data.message,
					// 	duration: 2000,

					// })
					this.$refs.uToast.show({
						title: res.data.message,
						url: '/pages/home/home'
					})
					// uni.switchTab({
					// 	url: '/pages/home/home'
					// })
				})
				this.joinShow = false


			},
			leaseAdd() {
				uni.navigateTo({
					url: '/pages/leaseAdd/leaseAdd'
				})
			},
			getCurrentDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			radioChange(val){
				this.form.canyutiem  = ''
			},
			establiChange(val){
				this.form.canyutiem = this.timeChange(val)
			},
			timeChange(val) {
				const {
					year,
					month,
					day,
				} = val;
				return `${year}-${month}-${day}`;
			},
			addjiangli(){
				this.addjiangliShow = true
			},
			dakaSet(){
				
			},
			removeList(e, file, fileList) {
				this.jlForm.tu.splice(e, 1)
				this.fist.splice(e, 1)
			},
			onsuccess1(e, file, fileList, ziduan) {
			
				let index = 0
				if (this.jlForm.tu.length != 0) {
					index = this.jlForm.tu.length
				}
			
				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[index].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {
			
			
						this.jlForm.tu.push(this.$img + JSON.parse(uploadFileRes.data).data)
			
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.log('上传失败', this.fist)
			
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		width: 100%;
		// height: 100%;
		overflow-x: hidden;
		// overflow-y: auto;
	}

	.page-info {
		width: 100%;
		padding: 24rpx;
	}

	// 活动详情
	.banner {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 24rpx 30rpx;
		color: #888D9C;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 34rpx;
			margin-bottom: 30rpx;
		}

		.banner-info-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

		}

		.times {
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 显示省略号 */
			width: 70%;
		}
	}

	// 活动信息
	.info-box {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 10px;
		border-radius: 30rpx;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 34rpx;
			margin-bottom: 10rpx;
		}

		.info-item {
			font-size: 26rpx;
			line-height: 50rpx;
		}
	}

	/* 底部 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		width: 100%;
		height: 125rpx;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.footer-btn {
			padding: 0 20px;
			margin-top: 20rpx;
		}

		.footer-service {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				margin-top: 6rpx;
				line-height: 42rpx;
			}
		}
	}

	.userForm {
		margin: 0 40rpx;

		.form-box {
			padding: 0rpx 0rpx;

		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	.participate-time-container {
	  background-color: #fff;
	  border-radius: 10px;
	  padding: 15px;
	  margin-bottom: 15px;
	}
	
	.section-title {
	  font-size: 18px;
	  font-weight: bold;
	  margin-bottom: 15px;
	}
	
	.radio-label {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}
	
	.radio-text {
	  margin-left: 10px;
	  font-size: 16px;
	  color: #333;
	}
	
	.tip-text {
	  font-size: 14px;
	  color: #999;
	  margin-top: 5px;
	}
</style>