<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>
				<view style="display: flex;" v-if="participateTimeType=='自定义时间'">
					<u-input style="width: 40%;" v-model="form.startTiem" type="select" @click="establishow = true"
						placeholder="请选择" />
					<view style="margin: 0 10px; line-height: 300%;"> 至 </view>
					<u-input style="width: 40%;" v-model="form.endTiem" type="select" @click="endshow = true"
						placeholder="请选择" />
					<u-picker mode="time" v-model="establishow" :params="params" @confirm="establiChange"></u-picker>
					<u-picker mode="time" v-model="endshow" :params="params" @confirm="endChange"></u-picker>
				</view>
			</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 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="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 border-color="#fff" :th-style="thStyle" font-size="24" width="100%">
						<u-tr width="100%">
							<u-th width="20%">打卡点</u-th>
							<u-th width="20%">位置</u-th>
							<u-th width="20%">奖励</u-th>
							<u-th width="40%">操作</u-th>
						</u-tr>
						<u-tr v-for="(item, index) in dakaData" :key="index" width="100%">
							<u-td width="20%">{{ item.address  }}</u-td>
							<u-td width="20%">{{ item.dakaMap }}</u-td>
							<u-td width="20%">{{ item.jiangping }}</u-td>
							<u-td width="40%">
								<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>


		<!-- 底部 -->
		<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="false" width="90%">
			<view style="padding: 30rpx;">
				<view style="font-weight: bold;text-align: center;margin: 20px 0px 30px 0px;">确认参与活动？</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="canyuclose">取消</u-button>
					<u-button type="success" style="width: 45%;" @click="canyu">确认</u-button>
				</view>
			</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" disabled /></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.jpname" /></view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span
								style="color: red;">*</span>奖品数量</view>
						<view style="display:flex;justify-content: space-between;">
							<u-input style="width: 50%;" v-model="jlForm.num" :clearable="false"
								:disabled="jlForm.xianz" />
							<u-checkbox-group>
								<u-checkbox shape="circle" @change="shuNum" v-model="jlForm.xianz"
									active-color="#4CD964">不限制数量</u-checkbox>
							</u-checkbox-group>
							<!-- 	<u-radio
										@change="shuNum" 
										name="true"
										active-color="#4CD964"
										v-model="jlForm.xianz"
									>
										不限制数量
									</u-radio> -->
						</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="duijiangChange" v-for="(item, index) in fangshi" :key="index"
									:name="item.value" 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%;background-color: ##A5A5A5;border:none" :border="false"
								@click="close">取消</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: 20rpx;">
				<u-form class="form-box" :model="dakaForm" ref="uForm" :label-width="120">
					<view style="padding: 10rpx;">
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span
								style="color: red;">*</span>打卡地点名称</view>
						<view><u-input v-model="dakaForm.address" /></view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;">简介</view>
						<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
							<textarea :auto-height="true" placeholder="请输入"
								style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding:10px;min-height: 50px;"
								v-model="dakaForm.jianjie"></textarea>
						</view>
						<view style="font-weight: bold;font-size: 16px;margin: 5px 0;"><span
								style="color: red;">*</span>奖励</view>
						<view>
							<u-input v-model="dakaForm.jiangping" type="select" @click="jpShow = true"
								placeholder="请选择奖品" />
							<u-select v-model="jpShow" :list="typeList" @confirm="jpChange"></u-select>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view style="font-weight: bold;font-size: 16px;margin: 5px 0;">
								<span style="color: red;">*</span>打卡点
							</view>
							<view>
								<u-input v-model="dakaForm.juli" type="select" @click="addressShow = true"
									placeholder="请选择打卡范围" />
								<u-select v-model="addressShow" :list="juliList" @confirm="addressChange"></u-select>
							</view>
						</view>
						<view>
							<!-- <u-input v-model="dakaForm.dakaMap" /> -->
							<view class="search-container" style="display: flex;justify-content: space-between;">
								<input type="text" placeholder="请输入地址" v-model="searchText" style="width: 75%;" />
								<view @click="mapAnalysis"
									style="width:25%;padding: 4px 10px;background-color: #0FBB59;border-radius: 10px;color: #fff;text-align: center;">
									地图解析</view>
							</view>
							<map style="width: 100%; height: 400rpx;" :longitude="mapCenter.longitude"
								:latitude="mapCenter.latitude" @click.stop="gomapApp()" :markers="markers">
								<!-- <marker  :longitude="marker[1]" :latitude="[0]" :iconPath="$imgUrl('/location-icon.png')"></marker> -->
								<!-- <marker v-for="(marker, index) in markers" :key="index" :longitude="marker.location.lng" :latitude="marker.location.lat" iconPath="$imgUrl('/location-icon.png')"></marker> -->
							</map>

							</map>
						</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="closedaka">取消</u-button>
							<u-button type="success" style="width: 45%;" @click="submitdaka">提交</u-button>
						</view>
					</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: [{
						value: 1,
						name: '现场兑换'
					},
					{
						value: 2,
						name: '邮寄'
					}
				],
				joinShow: false,
				establishow: false,
				endshow: false,
				addjiangliShow: false,
				dakaShow: false,
				params: {
					year: true,
					month: true,
					day: true
				},
				form: {
					activityId: '',
					userId: '',
					createTime: '',
					createUser: '',
					userName: '',
					userPhone: '',
					startTiem: '',
					endTiem: ''
				},
				jlForm: {
					type: '实物',
					name: '',
					jpname: '',
					num: '',
					tu: '',
					fangshi: '',
					xianz: false
				},
				dakaForm: {
					address: '',
					jianjie: '',
					jiangping: '',
					dakaMap: '',
					juli: '',
				},
				pagesize: {
					id: null,
				},
				imgurl: '',
				jpShow: false,
				typeList: [],
				addressShow: false,
				juliList: [{
						label: '有效范围半径100米',
						value: 1
					},
					{
						label: '有效范围半径200米',
						value: 2
					}
				],
				searchText: '',
				mapCenter: {
					longitude: 104.06730651855469,
					latitude: 30.65681556429287
				},
				markers: [],
				jiangData: [{
						type: '实物',
						name: '玩偶',
						num: '50',
						tu: 'www.baidu.com',
						fangshi: '邮寄',
						xianz: false
					},
					{
						type: '实物',
						name: '糖果',
						num: '不限制数量',
						tu: 'www.baidu.com',
						fangshi: '现场兑换',
						xianz: false
					}
				],
				dakaData: [{
						address: '天府广场',
						jianjie: '无',
						jiangping: '玩偶',
						dakaMap: '天府广场A座',
						juli: '有效范围半径100米',
					},
					{
						address: '天府三街',
						jianjie: '123',
						jiangping: '公仔',
						dakaMap: '天府三街地铁D口',
						juli: '有效范围半径100米',
					}
				],
				thStyle: {
					background: '#fff'
				}
			}
		},
		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: {

			mapAnalysis() {
				const that = this
				if (!this.searchText) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					});
					return;
				}
				wx.request({
					//地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
					url: 'https://apis.map.qq.com/ws/place/v1/search?page_index=1&page_size=20&boundary=region(成都市,0)&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU&keyword=' +
						that.searchText,
					success(res) {
						console.log(res.data.data, '123123213')
						that.addMarkers(res.data.data)
						that.list = res.data.data
						// console.log(res.data.count)
						if (res.data.count > 20) {
							// console.log(res.data.count/20)
							// console.log(Math.ceil(res.data.count/20))
							let c1 = Math.ceil(res.data.count / 20)
							for (let i = 1; i <= c1; i++) {
								// console.log(i)
								if (i == 1) {

								} else if (i == 2) {
									wx.request({
										//地图WebserviceAPI地点搜索接口请求路径及参数（具体使用方法请参考开发文档）
										url: 'https://apis.map.qq.com/ws/place/v1/search?page_size=20&boundary=region(资中县,0)&key=PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU&keyword=' +
											that.searchText + '&page_index=' + i,
										success(res) {
											console.log(res.data.data)
											that.addMarkers(res.data.data)
											that.list = [...that.list, ...res.data.data]
										}
									})
								} else {

								}
							}

						} else {
							console.log('不够')
						}
					}
				})
			},
			addMarkers(val) {
				let obj = {
					iconPath: this.$imgUrl('/location-icon.png'),
					latitude: val[0].location.lat,
					longitude: val[0].location.lng,
					width: 20,
					height: 20,
					title: val[0].title,
				}
				this.markers.push(obj)
			},
			addressChange(val) {
				this.dakaForm.juli = val[0].label
			},
			gomapApp() {

			},
			jpChange(val) {
				this.dakaForm.jiangping = val[0].label
			},
			shuNum(val) {

				this.jlForm.xianz = !this.jlForm.xianz
				if (this.jlForm.xianz) {
					this.jlForm.num = ''
				}
			},
			baoShow() {
				this.joinShow = true

			},
			closedaka() {
				this.dakaShow = false
			},
			submitdaka() {
				if (!this.dakaForm.address) {
					uni.showToast({
						icon: 'none',
						title: '请输入打卡地点名称'
					});
					return
				}
				if (!this.dakaForm.jiangping) {
					uni.showToast({
						icon: 'none',
						title: '请选择奖励'
					});
				}

				if (!this.searchText) {
					uni.showToast({
						icon: 'none',
						title: '请输入打卡点'
					});
					return
				} else {
					this.dakaForm.dakaMap = this.searchText
				}

				this.form.createTime = this.getCurrentDateTime()

				this.dakaShow = false
			},
			canyuclose() {
				this.joinShow = false
			},
			canyu() {
				if (this.participateTimeType != '同步活动周期') {

					if (this.form.startTiem == '') {
						uni.showToast({
							icon: 'none',
							title: '请选择活动开始时间'
						});
						return
					}
					if (this.form.endTiem == '') {
						uni.showToast({
							icon: 'none',
							title: '请选择活动结束时间'
						});
						return
					}
				}
				if (this.jiangData.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请添加奖品设置'
					});
					return
				}
				if (this.dakaData.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请添加打卡设置'
					});
					return
				}
				this.joinShow = false
			},
			close() {
				this.addjiangliShow = false

			},
			submit() {
				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


			},
			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}`;
			},
			duijiangChange(val) {
				this.jlForm.fangshi = val
			},
			radioChange(val) {
				this.form.startTiem = ''
				this.form.endTiem = ''

			},
			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}`;
			},
			addjiangli() {

				this.jlForm = {
					type: '实物',
					name: '',
					jpname: '',
					num: '',
					tu: '',
					fangshi: '',
					xianz: false
				}
				this.addjiangliShow = true
			},
			dakaSet() {
				this.dakaShow = true
			},
			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;
	}

	.search-container {
		background-color: #fff;
		border: solid 1px #E8E8E8;
		margin: 9px 5px;
		padding: 5px 10px;
		border-radius: 15px;
	}
</style>