<template>
  <div class="w-full h-full overflow-hidden flex justify-between">
    <div class="shrink-0 min-w-[600px] flex-1">
      <div class="w-full h-full overflow-y-auto relative hide-bar">
        <div class="sticky top-0 w-full bg-[#fff] p-[10px]">
          <div class="h-[60px] flex justify-between items-center">
            <div
              class="flex-1 h-full pr-[10px] flex items-center justify-between cursor-pointer overflow-hidden"
            >
              <div
                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
              >
                <el-icon>
                  <ArrowLeft />
                </el-icon>
              </div>
              <div
                ref="scrollRef"
                class="overflow-x-auto bg-[#fff]"
                style="width: calc(100% - 108px)"
              >
                <div ref="" class="flex flex-nowrap items-center">
                  <div
                    v-for="item in products"
                    class="flex items-center shrink-0 mr-[20px] h-[34px]"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div
                class="text-[#999] shrink-0 flex items-center justify-center h-[34px] w-[44px] border border-[#e6e6e6] rounded-[12px]"
              >
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <div
              v-for="product in products"
              :key="product.id"
              @click="show = true"
              class="bg-white rounded-xl shadow-sm transition-transform"
            >
              <div
                class="relative flex items-center bg-[#fef8f4] justify-center mb-4 rounded overflow-hidden"
              >
                <img
                  :src="product.image"
                  :alt="product.name"
                  class="w-25 h-25 my-1 object-cover rounded-full"
                />
              </div>
              <div class="text-left px-2">
                <h3
                  class="text-gray-800 font-medium text-sm mb-2 text-container w-full text-nowrap line-clamp-2 sm:line-clamp-1 md:line-clamp-2 lg:line-clamp-3"
                >
                  {{ product.name }}
                </h3>
                <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
      <rightOrder @showDeskDrawer="catgroyClick"></rightOrder>
    </div>
    <OrderDrawer v-model:show="show" />
    <deskDrawer v-model:show="deskShow" />

  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
  import rightOrder from './components/rightOrder/rightOrder.vue'
  import OrderDrawer from './components/order-drawer.vue'
  import deskDrawer from './components/desk-drawer.vue'
  const { t } = useI18n()
  const scrollRef = ref(null)

  const show = ref(false)

  onMounted(() => {})

  const products = ref([
    {
      id: 1,
      name: 'Spicy Seasoned Seafood Noodles',
      price: 2.29,
      image: 'https://ai-public.mastergo.com/ai/img_res/e53b11a05b7778db2bc50338e47047c4.jpg',
    },
    {
      id: 2,
      name: 'Grilled Salmon Bowl',
      price: 3.49,
      image: 'https://ai-public.mastergo.com/ai/img_res/07e4619fc2f26fe9f6a0afaebc47dceb.jpg',
    },
    {
      id: 3,
      name: 'Teriyaki Chicken Rice',
      price: 2.99,
      image: 'https://ai-public.mastergo.com/ai/img_res/1709d2e0e3495f8089da24be4ad2d26a.jpg',
    },
    {
      id: 4,
      name: 'Vegetable Stir Fry Noodles',
      price: 2.49,
      image: 'https://ai-public.mastergo.com/ai/img_res/043e50f136a6ec7f5f37eb448cf298c7.jpg',
    },
    {
      id: 5,
      name: 'Spicy Tuna Poke Bowl',
      price: 3.99,
      image: 'https://ai-public.mastergo.com/ai/img_res/7f8ad399ad651c8de6896bc611be1936.jpg',
    },
    {
      id: 6,
      name: 'Beef Bulgogi Bowl',
      price: 3.79,
      image: 'https://ai-public.mastergo.com/ai/img_res/49b0d0fbf6654dcef422a7e3334c8b6a.jpg',
    },
    {
      id: 7,
      name: 'Shrimp Pad Thai',
      price: 3.29,
      image: 'https://ai-public.mastergo.com/ai/img_res/ca1fef96dffcfa401768314721606c8f.jpg',
    },
    {
      id: 8,
      name: 'Miso Ramen Bowl',
      price: 2.89,
      image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg',
    },
  ])

  // 挂单桌子
  const deskShow = ref(false)
  const catgroyClick = () => {
    deskShow.value = true
  }
</script>
<style scoped>
  ::-webkit-scrollbar-thumb {
    background-color: red;
  }
  /* 隐藏整个滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }

  /* 或者仅隐藏滚动条的轨道，保留滑块可操作性，但视觉上不显示滚动条 */
  ::-webkit-scrollbar-track {
    display: none;
  }
  .text-container {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
