<template>
	<view>
		<view class="u-flex input-box u-row-between" @click="openPopup">
			<template v-if="!modelValue||!modelValue.id">
				<text class="color-999">请选择转桌到</text>
				<up-icon name="arrow-down" color="#999"></up-icon>
			</template>
			<template v-else>
				<text class="color-333">{{modelValue.name}}</text>
				<up-icon name="arrow-down" color="#999"></up-icon>
			</template>
		</view>


		<up-popup :show="show" mode="bottom">
			<view class="box bg-fff u-p-30">
				<up-search v-model="query.name" @search="search" @clear="search" @custom="search"></up-search>
				<scroll-view direction="vertical" scroll-y style="max-height: 50vh;">
					<view class="u-m-t-30 list">
						<view class="item" v-for="(item,index) in list" :key="index" :class="{active:selIndex==index}"
							@click="selIndex=index">
							<text> {{item.name}}</text>

						</view>
					</view>
					<up-loadmore status="nomore"></up-loadmore>
				</scroll-view>


			</view>
			<view class="u-flex gap-20 u-p-l-30 u-p-r-30 u-p-b-30">
				<view class="u-flex-1">
					<my-button type="default" @click="close">取消</my-button>
				</view>
				<view class="u-flex-1">
					<my-button @click="confirm">确认</my-button>
				</view>

			</view>
		</up-popup>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getShopTable
	} from '@/http/api/table.js'

	const modelValue = defineModel({
		default:{id:''}
	})
	const list = ref([])
	const show = ref(false)
	const selIndex = ref(-1)

	function close() {
		show.value = false
		selIndex.value = -1;
	}

	function confirm() {
		if (selIndex.value < 0) {
			return uni.showToast({
				title: '请选择桌台',
				icon: 'none'
			})
		}
		modelValue.value = list.value[selIndex.value]
		console.log('selIndex.value', selIndex.value );
		console.log('modelValue.value ', modelValue.value );
		close()
	}
	const query = reactive({
		page: 1,
		size: 999,
		// status: 'idle',
		name: ''
	})
	/**
	 * 获取桌台列表
	 */
	async function getTable() {
		let res = await getShopTable(query)
		list.value = res.records

	}

	function search() {
		selIndex.value = -1;
		getTable()
	}

	function openPopup() {
		const index = list.value.findIndex(v => v.id === modelValue.value.id)
		if (index != -1) {
			selIndex.value = index
		}
		show.value = true
	}
	onMounted(() => {
		getTable()
	})
</script>

<style lang="scss" scoped>
	.input-box {
		padding: 20rpx 20rpx;
		border-radius: 8rpx;
		border: 1px solid #dedede;
		min-width: 300rpx;
	}

	.box {
		border-radius: 18rpx;
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 20rpx;

		.item {
			margin-bottom: 24rpx;
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6rpx;
			border: 1px solid #dedede;
			transition: all .3s ease-in-out;

			&.active {
				border-color: $my-main-color;
				background-color: $my-main-color;
				color: #fff;
			}
		}

	}
</style>