<template>
		<view class="page">
	<view class="page-info" >
		<view class="banner">
			<view class="title" style="margin-top: 20rpx;">
				<span style="color: red;">*</span>场地
			</view>
			<view class="" style="margin-top: 20rpx;">
				<!-- <u-input v-model="form.actName" /> -->
				<view style="display: flex;">
					<u-input style="width: 100%;" v-model="form.startTiem" type="select" @click="actstartshow = true"
						placeholder="请选择" />
					<u-picker mode="time" v-model="actstartshow" :params="params"
						@confirm="establiChange"></u-picker>
				</view>
			</view>
			<!-- <view style="width: 100%;height: 1px; background-color: rgba(#D8D8D8, 0.5);margin: 20rpx 0 ;"></view> -->
	
			<view class="title" style="margin-top: 20rpx;"><span style="color: red;">*</span>截止预约时间</view>
			<view style="display: flex;">
				<view style="line-height: 200%;">提前</view> <u-input style="width: 40%;margin: 0 5px;" height="40" border v-model="form.actName" placeholder="请输入" />	<view style="line-height: 200%;">自然日</view> 
			</view>
			<view class="title" style="margin-top: 20rpx;"><span style="color: red;">*</span>预约数量限制</view>
			<view style="display: flex;">
				<u-radio-group v-model="form.yonghu" :wrap="false" style="margin-top: 5px;">
					<u-radio  v-for="(item, index) in yhOptions" :key="index" :name="item.name"
						active-color="#4CD964">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view v-if="form.yonghu=='单次预约限制'" style="display: flex; width: 30%;margin-top: 5px;">
					<u-input style="width: 90%;" v-model="form.startTiem" height="40" border
						placeholder="请输入"  /> 
						<view style="line-height: 200%;margin-left: 5px;">张</view>
				</view>
					
			</view>
				<view class="title" style="margin-top: 20rpx;">不可预定日期</view>
				<view style="display: flex;">
					<u-input style="width: 100%;" v-model="form.startTiem" type="select" @click="actstartshow = true"
						placeholder="请选择" />
					<u-picker mode="time" v-model="actstartshow" :params="params"
						@confirm="establiChange"></u-picker>
				</view>
				<view style="display: flex;justify-content:space-between;flex-wrap: wrap;">
					<view style="width: 32%;border-radius: 5px;height: 25px;background-color: #89A5C7;padding: 5px;margin-bottom: 5px;color: #fff;" v-for="(item,index) in timeList">{{item}}<u-icon style="margin-left:8px;" name="close" color="#0A1E37" size="24"></u-icon></view>
				</view>
		</view>
	
		<view class="banner">
				<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 border-color="#fff" :th-style="thStyle" font-size="24" style="width: 100%;">
						<u-tr class="u-tr" style="width: 100%;">
							<u-th class="u-th" width="15%">预约时间段</u-th>
							<u-th class="u-th" width="15%">可预约数量</u-th>
							<u-th class="u-th" width="20%">预警提醒</u-th>
							<u-th class="u-th" width="50%">操作</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="(item, index) in jiangData" :key="index">
							<u-td class="u-td" width="15%">{{ item.name  }}</u-td>
							<u-td class="u-td" width="15%">{{ item.tu }}</u-td>
							<u-td class="u-td" width="20%">{{ item.num }}</u-td>
							<u-td class="u-td" width="50%">
								<view style="display: flex;justify-content: space-around;">
									<span style="color: #0FBB59;margin-right: 10px;">编辑</span><span
										style="color: #0FBB59;">删除</span>
								</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
		
		</view>
		<view class="banner">
			<view class="title" style="margin-top: 20rpx;">预警电话</view>
			<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;padding: 0 10px;">
				<u-input v-model="form.actName" placeholder="请输入" />
			</view>
		</view>
	</view>
	<view style="height: 60rpx;"></view>
	<view class="page-footer">
		<view class="footer-btn" style="display: flex;justify-content: space-between;">
			<u-button @click="befor" type="" style="width: 45%;background-color: ##A5A5A5;border:none">取消</u-button>
			<u-button type="success" style="width: 45%;" @click="next" >提交</u-button>
		</view>
	
	</view>
	<u-popup class="userForm" v-model="addjiangliShow" mode="center" border-radius="20" :closeable="false"
		width="90%">
		<view style="padding: 20rpx;">
			<u-form class="form-box" :model="jlForm" ref="uForm" :label-width="120">
				<view style="padding: 10rpx;">
					<view style="font-weight: bold;font-size: 16px;"><span
							style="color: red;">*</span>预约时段</view>
					<view style="display: flex;">
						<u-input style="width: 40%;" v-model="form.startTiem" type="select" @click="actstartshow = true"
							placeholder="请选择" />
							<view style="line-height: 200%;width: 10%;text-align: center;">-</view>
							<u-input style="width: 40%;" v-model="form.startTiem" type="select" @click="actstartshow = true"
								placeholder="请选择" />
						<u-picker mode="time" v-model="actstartshow" :params="params"
							@confirm="establiChange"></u-picker>
							<u-picker mode="time" v-model="actstartshow" :params="params"
								@confirm="establiChange"></u-picker>
					</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" type="number"/></view>
					<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span
							style="color: red;">*</span>预警提醒</view>
					<view><u-input v-model="jlForm.jpname"  type="number"/></view>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<u-button type="" style="width: 45%;background-color: ##A5A5A5;border:none" :border="false"
							@click="closejl">取消</u-button>
						<u-button type="success" style="width: 45%;" @click="submitjl">提交</u-button>
					</view>
				</view>
			</u-form>
		</view>
	</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					activityId: '',
					userId: '',
					createTime: '',
					createUser: '',
					userName: '',
					userPhone: '',
					juli: '大转盘',
					tu: '',
					bjtu: '',
					yonghu: '所有用户',
					shangjiaTiem:'',
					guize:'单用户每天抽奖限制'
				},
				shangjiashow:false,
				actstartshow:false,
				endshow:false,
				pagesize: {
					id: null,
				},
				imgurl: '',
				addressShow: false,
				numList: [{
						name: '基础信息',
						value: 1
					},
					{
						name: '规则设置',
						value: 2
					},
					{
						name: '奖励设置',
						value: 2
					}
				],
				buIndex: 0,
				fist: [],
				fist1: [],
				juliList: [{
					label: '大转盘',
					value: 1
				}],
				participateTimeType: '立即上架',
				timeOptions: [{
						disabled: true,
						name: '立即上架'
					},
					{
						disabled: false,
						name: '自定义时间'
					}
				],
				yhOptions: [{
						disabled: true,
						name: '不限制'
					},
					{
						disabled: false,
						name: '单次预约限制'
					}
				],
				guizeOptions: [{
						disabled: true,
						name: '单用户每天抽奖限制'
					},
					{
						disabled: false,
						name: '单用户活动期抽奖限制'
					}
				],
				jiangData: [{
						type: '实物',
						name: '玩偶',
						num: '50',
						tu: 'www.baidu.com',
						fangshi: '邮寄',
						xianz: false
					},
					{
						type: '实物',
						name: '糖果',
						num: '不限制数量',
						tu: 'www.baidu.com',
						fangshi: '现场兑换',
						xianz: false
					}
				],
				thStyle: {
					background: '#fff'
				},
				jlForm: {
					type: '实物',
					name: '',
					jpname: '',
					num: '',
					tu: '',
					fangshi: '',
					xianz: false
				},
				addjiangliShow: false,
				fistjl:[],
				params: {
					year: true,
					month: true,
					day: true
				},
				timeList:[
					'2022-02-22',
					'2022-02-22',
					'2022-02-22',
					'2022-02-22'
				]

			}
		},
		onLoad(option) {
			this.imgurl = this.$img
			if (option.value == 1) {

			}

		},
		methods: {
			befor() {
				this.buIndex = this.buIndex - 1
			},
			next() {
				this.buIndex = this.buIndex + 1
			},
			addressChange(val) {
				this.juli = val[0].label
			},
			shangjiaChange(val){
				this.form.shangjiaTiem = this.timeChange(val)
			},
			establiChange(val) {
				this.form.startTiem = this.timeChange(val)
			},
			endChange(val) {
				this.form.endTiem = this.timeChange(val)
			},
			timeChange(val) {
				const {
					year,
					month,
					day,
				} = val;
				return `${year}-${month}-${day}`;
			},
			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}`;
			},
			removeList(e, file, fileList) {
				this.form.tu.splice(e, 1)
				this.fist.splice(e, 1)
			},
			onsuccess1(e, file, fileList, ziduan) {

				let index = 0
				if (this.form.tu.length != 0) {
					index = this.form.tu.length
				}

				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[index].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {


						this.form.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',
						});
					},
				});
			},
			removeList1(e, file, fileList) {
				this.form.bjtu.splice(e, 1)
				this.fist1.splice(e, 1)
			},
			onsuccess2(e, file, fileList, ziduan) {

				let index = 0
				if (this.form.bjtu.length != 0) {
					index = this.form.bjtu.length
				}

				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[index].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {


						this.form.bjtu.push(this.$img + JSON.parse(uploadFileRes.data).data)

						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.log('上传失败', this.fist)

						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
			addjiangli() {
			
				this.jlForm = {
					type: '实物',
					name: '',
					jpname: '',
					num: '',
					tu: '',
					fangshi: '',
					xianz: false
				}
				this.addjiangliShow = true
			},
			closejl(){
				this.addjiangliShow = false
			},
			submitjl(){
				if (!this.jlForm.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入名称'
					});
					return
				}
				if (!this.jlForm.jpname) {
					uni.showToast({
						icon: 'none',
						title: '请输入奖品名称'
					});
					return
				}
				if (!this.jlForm.xianz) {
					if (this.jlForm.num == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入奖品数量'
						});
						return
					}
				} else {
					this.jlForm.num = '不限制数量'
				}

				if (!this.jlForm.tu) {
					uni.showToast({
						icon: 'none',
						title: '请上传奖品图片'
					});
					return
				}
				if (!this.jlForm.fangshi) {
					uni.showToast({
						icon: 'none',
						title: '请选择兑奖方式'
					});
					return
				}
				this.form.createTime = this.getCurrentDateTime()

				this.addjiangliShow = false


			},

				removejl(e, file, fileList) {
					this.jlForm.tu.splice(e, 1)
					this.fistjl.splice(e, 1)
				},
			successjl(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.fistjl)
				
							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;
		margin-bottom: 20rpx;
		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 32rpx;
			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: 32rpx;
			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);
		z-index: 10;

		.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: 18rpx 30rpx;

		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}
</style>