<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="h-full bg-white flex flex-col items-center justify-between">
    <!-- Empty state section -->
    <div class="h-[80%]">
      <noProduct v-if="false"></noProduct>
      <order v-else></order>
    </div>
    <!-- Action buttons section -->
    <div class="w-full max-w-md px-1 h-[20%] bg-white">
      <div class="grid grid-cols-2 gap-4 mb-1">
        <button
          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
        >
          Registration
        </button>
        <button
          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
        >
          Kitchen Receipt
        </button>
      </div>
      <button
        @click="emits('showDeskDrawer')"
        class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999] !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors"
      >
        Choose A Table For Payment
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import noProduct from '@/components/noProduct.vue'
import order from './components/order.vue'
import { emit } from '@tauri-apps/api/event';
const emits= defineEmits(['showDeskDrawer'])

</script>

<style scoped></style>
