<template>
	<view class="container">
		<view>
			<swiper style="height: 240px;" indicator-dots="true" autoplay="true" interval="2000" duration="500">
				<swiper-item v-for="(image, index) in eventsInfo.imgList" :key="index">
					<image :src="image" class="slide-image"></image>
				</swiper-item>

			</swiper>
			<view class="section1">
				<view class="row">
					<view class="title">
						{{eventsInfo.title}}
					</view>

				</view>
				<view class="time_yuyue">
					<view class="ico">
						<image src="/static/images/time.png" style="width: 16px; height: 16px;"></image>
					</view>
					<view class="time">日期：{{eventsInfo.eventsDate}} 时间：{{eventsInfo.eventTime}}</view>
				</view>
				<view class="time_yuyue2">
					<view class="ico">
						<image src="/static/images/daohang.png" style="width: 16px; height: 16px;"></image>
					</view>
					<view class="didian">{{eventsInfo.address}}</view>
					
				</view>
				<view class="kefu">
					<view class="didian">
					        <button open-type="contact" hover-class="none" style="background: none; padding-right: 5px;">
					            <uni-icons custom-prefix="custom-icon" type="chat" size="20" color="#999999"></uni-icons>
					        </button>
					        联系客服工作人员
					    </view>
				</view>
				<view class="title" style="text-align: left;">预订详细说明：</view>
				<view class="miaoshu" v-html="eventsInfo.intro"  style="width:100%!important;">
					
				
				</view>

				<uni-popup ref="calenderPop">
					<view class="times">
						<view class="calender-box" style="background: #FFFFFF;">
							<view style="background: #FFFFFF;height: 110rpx;padding: 40rpx;box-sizing: border-box;
								display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #F8F8F8;">
								<view style="color: #333333;font-size: 32rpx;font-weight: bold;">预约日期</view>
								<view style="display: flex;align-items: center;">
									<view class="DateText">
										<picker mode="date" :value="date" @change="onDateChange">
											<view class="date-picker">{{date}}</view>
										</picker>
									</view>
									<uni-icons type="right" color="#BCBCBC"></uni-icons>
								</view>
							</view>
							<view style="background: #FFFFFF;height: 110rpx;padding: 40rpx;box-sizing: border-box;
								display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #F8F8F8;">
								<view style="color: #333333;font-size: 32rpx;font-weight: bold;">预约时间</view>
								<view style="display: flex;align-items: center;">
									<view class="DateText">
										<picker mode="time" :value="time" @change="bindTimeChange">
											<view class="uni-input">{{time}}</view>
										</picker>
									</view>
									<uni-icons type="right" color="#BCBCBC"></uni-icons>
								</view>
							</view>
							<!--	<uni-datetime-picker 
				type="datetime"
				:clear-icon="false" 
				v-model="single"
				@change="onChangeCalender"
				 />
				 <uni-calendar 
				type="datetime"@maskClick="onChangeCalender"
				class="uni-calendar--hook" 
				:lunar="true" 
				:selected="planSelected" 
				:showMonth="true"
				:startDate="startDate"
				 @change="onChangeCalender" 
				/> -->
							<!-- confirmCreateReq -->
						</view>
						<view style="background-color: #FFF; padding: 20px 20px; width: 100%;">
						 <input @input='KeyName' placeholder='请输入留言' style="background-color: #FFFFFF; height:50px; border:  1px solid #ccc;width: 95%; padding-left: 20px; border-radius: 10px;"></input></view>
					</view>
					<view class="btn">
						<button @click="cancel">取消</button>
						<button @click="onChangeCalender">确定</button>
					</view>
				</uni-popup>
			</view>



			<view class="footer">

				<view class="footer-left">
				</view>
				<view style="width: 100%; padding: 20px 10px 20px 0px; font-weight: bold; color:black;">
					预订价格：{{eventsInfo.fee}}</view>
				<view class="right">
					<text class="text" @click="onOpenTimer">确认预订</text>
				</view>
			</view>
		</view>
		<map id="map" ref="map" style="display: none;" v-if="info && info.id>0" :show-location="true"
			:latitude="info.latitude" :longitude="info.longitude"></map>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import he from 'he';
	const app = getApp();

	export default {

		data() {
			return {
				eventId: null,
				info: null,
				eventsInfo: {},
				longitude: '',
				latitude: '',
				planSelected: [],
				startDate: '',
				dataForm: {
					id: 0,
					reqDate: '',
					userId: 0,
					memo:''
				},
				date: '请选择日期',
				time: '请选择时间'
			};
		},
		// onLoad(option) {
		// 	this.dataForm.id=option.id||0;
		// 	this.dataForm.userId = uni.getStorageSync("user_id");


		// },
		mounted() {
			
			this.fetchEventsDetail();
		},
		computed: {
			...mapState(['store_id', 'systemInfo'])
		},
		onLoad(options) {
			this.eventId = options.id; // 获取传递的 id 参数
			this.dataForm.id=String(options.id)||'0';
			this.dataForm.userId = uni.getStorageSync("user_id");
			console.log(String(this.dataForm.userId));
			this.fetchEventsDetail();
		},
		methods: {
			// 会员充值end
			KeyName(t) {
			    this.dataForm.memo = t.detail.value;
			},
			
			getNavigation({
				latitude,
				longitude,
				title,
				address,
			}) { 
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					address: address,
					name: title,
					success: function() {
						console.log('success');
					}
				});
			},
			//取消
			cancel() {
				this.date = '请选择日期'
				this.time = '请选择时间'
				this.$refs.calenderPop.close();
			},
			bindTimeChange(e) {
				this.time = e.detail.value
			},
			onDateChange(e) {
				this.date = e.detail.value;

			},


			onOpenTimer(e) {
				// if(this.plan==null){
				// 	uni.showToast({
				// 		title:"活动已过期,或暂无计划",
				// 		icon:"error"
				// 	})
				// 	return;
				// }



				this.$refs.calenderPop.open('bottom');

				let d = new Date();
				this.startDate = d.getFullYear() + "-" + (d.getMonth() + 1) + '-' + d.getDate();
			},

			onChangeCalender() {
				if (this.date === '请选择日期') {
					this.showToast('请选择预约日期');
					return;
				} else if (this.time === '请选择时间') {
					this.showToast('请选择预约时间');
					return;
				}
				this.dataForm.reqDate = this.date;

				// 微信小程序特定逻辑
				// #ifdef MP-WEIXIN
				console.log(this.dataForm.userId);
				if (this.dataForm.userId <= 0) {
					this.showToast("用户信息不存在");
					return false;
				}
				this.confirmCreateReq();
				// #endif

				// 非微信小程序平台
				// #ifndef MP-WEIXIN
				this.showToast('请使用小程序提交');
				// #endif
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				});
			},
			onOpenMap(e) {
				let _this = this;
				_this._mapContext = uni.createMapContext("map", _this);
				_this._mapContext.openMapApp({
					longitude: parseFloat(_this.info.longitude),
					latitude: parseFloat(_this.info.latitude),
					destination: _this.info.address,
					success: (res) => {
						console.log("success");
					},
					fail: (res) => {
						console.log("fail");

					},
					complete: (res) => {
						console.log(_this.info);
					}
				})

			},

			confirmCreateReq() {
				let _this = this;
				let orderObj = {
					orderTime: _this.time,
					orderDate: _this.date,
					userId: String(_this.dataForm.userId),
					eventId: String(_this.dataForm.id),
					memo:_this.dataForm.memo
				}
				uni.showModal({
					title: '确认预约',
					content: '您是否确认提交预约信息',
					cancelText: "取消",
					confirmText: "确认",
					success: (confirm) => {
						if (confirm.confirm) {
							_this.$http.request('events/createOrder', orderObj, "", "", true).then(
							res => {

								if (res.code == 200) {
									if (res.data.payStatus == '2') {
										//末支付
										// #ifdef MP-WEIXIN
										wx.requestPayment({
											timeStamp: res.data.params.timeStamp,
											nonceStr: res.data.params.nonceStr,
											package: res.data.params.package,
											signType: res.data.params.signType,
											paySign: res.data.params.paySign,
											success: (res) => {
												uni.showToast({
													title: '您的预约申请已成功提交',
													icon: 'success',
													success: (res) => {
														_this.$refs.calenderPop
															.close();
													}
												})
											},
											fail: (res) => {
												uni.showToast({
													title: '支付失败',
													icon: 'error',
												})
											}
										})

										// #endif

									} else {

										uni.showToast({
											title: '您的预约申请已成功提交',
											icon: 'success',
											success: () => {
												_this.$refs.calenderPop.close();
											}
										})
									}


								}


							}).catch(err => {})
						}
					}
				})


			},



			fetchEventsDetail() {
				let _this = this; // 使用 _this 来保持上下文一致性
				if (!_this.eventId) {
					console.error('无效的事件ID:', _this.eventId);
					return; // 如果 eventId 无效，则提前退出函数
				}
				_this.$http.request('events/eventInfo', {
					id: _this.eventId, // 确保使用 _this.eventId
				}).then(response => {
					console.log(response); // 先打印整个响应对象查看结构
					if (response && response.data) {
						_this.eventsInfo = response.data; // 确保 response.data 存在
						_this.eventsInfo.intro = he.decode(_this.eventsInfo.intro);
						_this.eventsInfo.intro = response.data.intro.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
						console.log(_this.eventsInfo); // 打印 eventsInfo 确认数据
					} else {
						console.error('响应数据结构不符合预期:', response);
					}
				}).catch(error => {
					console.error('数据获取失败:', error);
				});
			}



		}
	}
</script>

<style lang="scss">
	@import './detail.scss';

	.miaoshu img {
		width: 100%!important;
		height: auto;
		object-fit: cover; // 保持图片的宽高比，填充整个内容框架
	}
</style>