<template>
	<view class="container">
		<view class="addList">
			<view class="addItem flex-y-center">
				<view class="addItemL">预约类型：</view>
				<view class="flex-y-center">
					<radio-group class="radio-group" @change="radioChange">
						<label class="radio" v-for="(item,index) in typeLists"
							style="margin-right: 20rpx;font-size: 28rpx;color: #999999;">
							<radio :value="item.name" :checked="item.checked" />{{item.value}}
						</label>
					</radio-group>
				</view>
			</view>
		</view>

		<view class="addList" style="margin:10rpx 0;">
			<view class="addItem flex-y-center">
				<view class="addItemL">支付金额：</view>
				<input type="digit" class="addItemR" :value="prise" @input="userInpues" placeholder="请输入支付金额" />
			</view>
		</view>


		<block v-for="(item,index) in tableList" :key="index">
			<view class="">
				<view class="addListTitale">{{item.name}}</view>
				<view class="addList">
					<view class="addItem flex-y-center">
						<view class="addItemL">位置类型：</view>
						<input type="text" class="addItemR" :value="item.name" placeholder="请输入餐桌类型" disabled="true" />
					</view>
					<view class="addItem flex-y-center">
						<view class="addItemL">就餐人数：</view>
						<input type="text" class="addItemR" :value="item.num" placeholder="请输入就餐人数" disabled="true" />
					</view>
					<view class="addItem flex-y-center">
						<view class="addItemL">每小时可预约次数：</view>
						<input type="number" class="addItemR" :value="item.time_num" @input="inputType($event,index)"
							placeholder="请输入每小时可预约次数" />
					</view>
				</view>
			</view>
		</block>

		<view class="" style="height: 100rpx;"></view>

		<view class="footer-bar">
			<view class="content flex flex-center">
				<view class="btn" @click="nowSaves">立即保存</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, //1是餐桌2是商品
				prise: '', //支付金额
				store_id: '',
				id: "",
				info: {},
				tableList: [],
				typeLists: [{
						name: '1',
						value: '位置',
						checked: 'true'
					}
					// {
					// 	name: '2',
					// 	value: '商品'
					// }
				]



			}
		},
		onLoad(options) {
			if (options.titaleType == 1) {
				uni.setNavigationBarTitle({
					title: '添加预约'
				})
			}


			this.store_id = uni.getStorageSync("store_id");
			this.id = options.id;
			this.getData()
		},
		methods: {
			//单选
			radioChange(e) {
				let chooseType = e.detail.value;
				this.type = chooseType;
			},

			//立即保存
			nowSaves() {
				const that = this;
				let type = this.type;
				let prise = this.prise;
				let typeList = this.tableList;
				let id = this.id;
				if (!prise) {
					uni.showToast({
						title: '请输入支付金额',
						icon: 'none',
						duration: 2000
					});
					return false
				} else {
					// 判断是否有id 有的话就是需改没有即为新增
					if (id) {
						this.request({
							url: "Smdcshop/edit_yy",
							data: {
								store_id: this.store_id,
								type,
								content: JSON.stringify(typeList),
								money: prise,
								id: this.id
							}
						}).then(res => {
							if (res.code == 200) {
								uni.showModal({
									title: '提示',
									content: '操作成功！',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											let pages = getCurrentPages();
											let prevPage = pages[pages.length - 2];
											// #ifdef H5
											prevPage.getData(1)
											// #endif
											// #ifndef H5
											prevPage.$vm.getData(1)
											// #endif
											uni.navigateBack({})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						}).catch(err => {
							console.log('err:', err)
						})
					} else {
						this.request({
							url: "Smdcshop/add_yy",
							data: {
								store_id: this.store_id,
								type,
								content: JSON.stringify(typeList),
								money: prise
							}
						}).then(res => {
							if (res.code == 200) {
								uni.showModal({
									title: '提示',
									content: '操作成功！',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {

											let pages = getCurrentPages();
											let prevPage = pages[pages.length - 2];
											//
											// #ifdef H5
											prevPage.getData(1)
											// #endif
											// #ifndef H5
											prevPage.$vm.getData(1)
											// #endif

											uni.navigateBack({})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

							}
						}).catch(err => {
							console.log('err:', err)
						})
					}


				}

			},

			//用户输入金额
			userInpues(e) {
				this.prise = e.detail.value;
			},

			//用户输入类型
			inputType(e, index) {
				this.tableList[index].time_num = e.detail.value
			},

			getData() {
				if (this.id) {
					this.request({
						url: "Smdcshop/edityytablelist",
						data: {
							store_id: this.store_id,
							id: this.id
						}
					}).then(res => {
						if (res.code == 200) {

							let newArrays = [];
							let oldList = res.data.info.content;
							let lists = res.data.list;
							if (lists.length > 0) {
								for (let i = 0; i < lists.length; i++) {
									lists[i].time_num = 0;
								}
								oldList.push(...lists)
								this.info = res.data.info;
								this.tableList = oldList;
								this.prise = res.data.info.money

							} else {
								this.info = res.data.info;
								this.tableList = res.data.info.content;
								this.prise = res.data.info.money
							}


							// this.info = res.data.info;
							// this.tableList = res.data.info.content;
							// this.prise = res.data.info.money
						}
					}).catch(err => {
						console.log('err:', err)
					})
				} else {
					this.request({
						url: "Smdcshop/yytablelist",
						data: {
							store_id: this.store_id
						}
					}).then(res => {
						if (res.code == 200) {
							let lists = res.data;
							for (let i = 0; i < lists.length; i++) {
								lists[i].time_num = 0
							}
							this.tableList = lists;
						}
					}).catch(err => {
						console.log('err:', err)
					})
				}
			},
			toEdit() {
				uni.redirectTo({
					url: `./yyedit?id=${this.info.id}`
				})
			},

		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background: #F4F5F7;
	}

	.addListTitale {
		padding: 0 25rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #999;
	}

	.addList {
		padding: 0 25rpx;
		background: #ffffff;
		border: 1rpx solid rgba(0, 0, 0, 0.10);
		box-shadow: 0px 8rpx 16rpx 0px rgba(204, 215, 230, 0.08);
	}

	.addItem {
		height: 100rpx;
		border-bottom: 2rpx solid #f4f5f6;
	}

	.addItemL {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #333333;
	}

	.addItemR {
		display: flex;
		align-items: center;
		flex: 1;
		height: 100rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		padding: 0 30rpx;
	}
</style>
