<template>
	<view class="page flex-col">

		<view class="box_1 flex-col">
			<view class="section_1 flex-col">

				<view class="group_1 flex-col" style="margin-top:50rpx;" @click="goarrow">
					<view class="group_2 flex-row">
						<image class="image_2" referrerpolicy="no-referrer"
							src="http://118.89.89.96/lanhu_zuoweiyuding2/pswqgc595b6hp8xxzwz5j6rhzdqphzl1g0pd5113b36-adc1-4d95-9f82-5b72c9de2882.png" />
						<text class="text_1">座位预定</text>

					</view>
				</view>
				<view class="group_3 flex-col">
					<!-- 	<view class="box_2 flex-row justify-between">
						<view class="text-wrapper_1">
							<text class="text_2">*</text>
							<text class="text_3">&nbsp;座位号</text>
						</view>
						<view class="image-text_1 flex-row justify-between">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<text class="text-group_1">{{array[index]}}</text>
								<view class="uni-input"></view>
							</picker>
							<image class="label_1" referrerpolicy="no-referrer"
								src="http://118.89.89.96/lanhu_zuoweiyuding2/psclu2xgbya6a86uifl2bfam6sqqiavujs46983845-01ba-42c1-89f7-82c6e0e7ae2e.png" />
						</view>
					</view> -->

					<view class="box_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<text class="text_4">*</text>
							<text class="text_5">&nbsp;座位号</text>
						</view>
						<text class="text_6">{{tableDetail.table_number}}</text>
					</view>


					<image class="image_4" referrerpolicy="no-referrer"
						src="http://118.89.89.96/lanhu_zuoweiyuding2/psbrlu5e6gi8rzfhdj5ken7diu3sfw32ougc3ef2cfc-e35d-409f-9805-96228ea8102f.png" />
					<view class="box_3 flex-row justify-between">
						<view class="text-wrapper_2">
							<text class="text_4">*</text>
							<text class="text_5">&nbsp;手机号</text>
						</view>
						<input class="text_6" placeholder="请输入手机号" v-model="phone" type="number"></input>
					</view>
					<image class="image_5" referrerpolicy="no-referrer"
						src="http://118.89.89.96/lanhu_zuoweiyuding2/pseen4pbjt54ssw3r1px5ocdkhiq3lkke3543dad5e-bd31-4f0a-91fe-b4e71751a878.png" />

					<view class="box_4 flex-row">
						<view class="text-wrapper_3">
							<text class="text_7">*</text>
							<text class="text_8">&nbsp;预定日期</text>
						</view>


						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="text_9">{{date}}</view>
						</picker>

						<image class="image_6"
							src="http://118.89.89.96/lanhu_zuoweiyuding2/psulcj9ngybjsfvy2edmdlseqvdaavrnus7e75f3c5-815b-42c7-81b2-f759c113e527.png" />

					</view>

					<image class="image_7" referrerpolicy="no-referrer"
						src="http://118.89.89.96/lanhu_zuoweiyuding2/ps02ji80t1i6dfj22p2x73n43kamuubz71p97cb37ad-a5fc-44a9-966f-8d6f31dd0499.png" />
					<view class="box_5 flex-row justify-between">
						<view class="text-wrapper_4">
							<text class="text_10">*</text>
							<text class="text_11">&nbsp;到店时间</text>
						</view>

						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
							<view class="text_9" style="margin-left: 377rpx;">{{time}}</view>
						</picker>

						<image class="image_6" referrerpolicy="no-referrer"
							src="http://118.89.89.96/lanhu_zuoweiyuding2/psulcj9ngybjsfvy2edmdlseqvdaavrnus7e75f3c5-815b-42c7-81b2-f759c113e527.png" />
					</view>
					<image class="image_9" referrerpolicy="no-referrer"
						src="http://118.89.89.96/lanhu_zuoweiyuding2/psyrv52gf4rdibn1aasnq7siuz92ms3nmn750932bf-3531-4bab-9514-6d4c95ee320f.png" />
					<view class="box_6 flex-row justify-between">
						<text class="text_12">营销经理</text>
						<view class="image-text_3 flex-row justify-between">


							<picker @change="bindPickerChange2" :value="item.uid"
								:range="yingxiao.map(item => item.nickname)">
								<text class="text-group_1">{{yingxiao[index2].nickname}}</text>
								<view class="uni-input"></view>
							</picker>

							<image class="image_10" referrerpolicy="no-referrer"
								src="http://118.89.89.96/lanhu_zuoweiyuding2/ps8a9zsyp8mkxdd2xvuda9n9uunem8ma3i62352a3f-ad96-4fc0-8061-1b81ee81fb3e.png" />
						</view>
					</view>
				</view>
				<view class="group_4 flex-col">
					<view class="block_1 flex-col">
						<text class="text_13">备注</text>
						<textarea class="block_2 flex-col" style="color: white;padding: 15rpx;"
							v-model="remark"></textarea>
					</view>
					<view class="text-wrapper_5 flex-col" @click="submit">
						<text class="text_14">立即预定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		tableYuDing
	} from '@/api/api.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				phone: '',
				remark: '',

				table_id: '',
				imgHost: HTTP_REQUEST_URL,
				getHeight: this.$util.getWXStatusHeight(),
				selectedDate: '',
				constants: {},
				time: '00:00',
				date: currentDate,
				array: ['1号桌', '2号桌', '巴西', '日本'],
				index: 0,
				yingxiao: [],
				index2: 0,
				tableDetail: ''

			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(id) {

			this.table_id = id.table_id
			console.log('xxx', id)
			var that = this
			uni.request({
				url: this.imgHost + '/api/v2/getTableDetail/' + this.table_id,
				method: 'GET',
				success: (res) => {
					that.tableDetail = res.data.data;
					that.yingxiao = res.data.data.yingxiao
					console.log(5555, this.yingxiao)
				},
				fail: (err) => {
					console.error('请求错误：', err);
				}
			});
		},
		methods: {
			goarrow() {
				uni.navigateBack()
			},
			submit() {
				var admin_id = this.yingxiao[this.index2].uid
				if (!admin_id || !this.table_id || !this.date || !this.time || !this.phone) {
					uni.showToast({
						title: '信息请填写完整',
						icon: 'none',
						duration: 5000 // 显示 5 秒
					});
					return
				}
				var data = {
					table_id: this.table_id,
					phone: this.phone,
					yuding_date: this.date,
					come_date: this.time,
					admin_id: admin_id,
					remark: this.remark,

				}
				tableYuDing(data).then(res => {
									console.log(1111)
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 5000 // 显示 5 秒
					});

				}).catch(err => {
				
					console.log(22222,err)
					uni.showToast({
						title: err,
						icon: 'none',
						duration:5000 // 显示 5 秒
					});
				})

			},

			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			onDateChange(date) {
				// 在这里处理日期时间变化后的逻辑
				console.log('选择的日期时间为：', date);
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
				console.log(this.time)
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index2 = e.detail.value
			}
		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';
</style>