<template>
  <div>
    <el-drawer v-model="show" :show-close="false" direction="rtl" size="700px">
      <template #header>
        <div class="food_title">
          {{ $t('menu.search') }}
        </div>
      </template>

      <template #default>
        <div class="scroll">
          <SearchInput
            :containerWidth="'660px'"
            :inputHeight="'30px'"
            :placeholder="$t('menu.spicyNoodles')"
          />
          <!-- 判断从那点击进来 Search点击搜索框 -->
          <div v-if="type === 'Search'">
            <!-- 判断foodItems 显示图片 -->
            <div v-if="foodItems.length === 0" class="search_product"></div>
            <div class="food_img" v-else>
              <menuFood
                v-for="(item, index) in foodItems"
                :key="index"
                :imageUrl="item.image"
                :productName="item.description"
                :price="item.price"
                :quantity="item.quantity"
                :type="type"
              />
            </div>
          </div>
          <!-- 从菜品 -->
          <div v-else>
            <div>
              <el-divider />
              <menuFood
                v-for="(item, index) in foodSearch"
                :key="index"
                :imageUrl="item.image"
                :productName="item.description"
                :price="item.price"
                :quantity="item.quantity"
                :type="type"
              />
              <Title fontSize="16px"> {{ $t('menu.taste') }}</Title>
              <CapsuleBox :items="foodList" />
              <Title fontSize="16px">{{ $t('menu.type') }}</Title>
              <CapsuleBox :items="foodList" />
              <Title fontSize="16px">{{ $t('menu.number') }}</Title>
              <div class="flex items-center">
                <div @click="handleChange(-1)">
                   <img src="../../../assets//img//minus_Icon.png" alt="">
                </div>
                <div class="numItem">{{ num }}</div>
                <div @click="handleChange(1)">
                  <img src="../../../assets//img//plus_Icon.png" alt="">
                </div>
              </div>
              <el-divider />
              <menuFood
                v-for="(item, index) in foodItems"
                :key="index"
                :imageUrl="item.image"
                :productName="item.description"
                :price="item.price"
                :quantity="item.quantity"
                :type="type"
              />
            </div>
          </div>
        </div>
      </template>

      <template #footer>
        <div v-if="type === 'Search'">
          <el-button style="height: 44px;" type="primary" class="w-[660px] h-[68px]" @click="cancelClick" plain>
            close window
          </el-button>
        </div>
        <div style="display: flex; justify-content: space-between; " v-else>
          <el-button style="width: 220px; height: 44px;" type="primary" @click="cancelClick" plain>close window</el-button>
          <el-button style="width: 408px; height: 44px" type="primary" @click="confirmClick">Join the checkout counter</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import SearchInput from '../../../components/SearchInput.vue'
  import Title from '@/components/titleFood.vue'
  import menuFood from './menuFood.vue'
  import CapsuleBox from './CapsuleBox.vue'
  const props = defineProps({
    type: {
      type: String,
      required: true,
    },
  })
  const show = defineModel('show')
  const showInput = defineModel('showInput')
  const num = ref(1)
  // 胶囊
  const foodList = ref([
    { id: 1, text: 'sautéed products' },
    { id: 2, text: 'sautéed Search' },
    { id: 3, text: 'show' },
    { id: 4, text: 'https for' },
    { id: 5, text: 'sautéed' },
    { id: 6, text: 'fjords for' },
  ])
  // 假数据，用于动态渲染菜品
  const foodSearch = ref([
  {
    id: 1,
    name: 'Super Unbeatable Delicious Seasonal Vegetables',
    description: 'Fresh seasonal vegetables served with perfectly poached egg',
    price: 1.29,
    quantity: 5,
    image: 'https://ai-public.mastergo.com/ai/img_res/dc344e2119e1987d040e75eade956be7.jpg'
  },
  {
    id: 2,
    name: 'Mediterranean Quinoa Bowl',
    description: 'Protein-rich quinoa with roasted vegetables and tahini dressing',
    price: 2.49,
    quantity: 3,
    image: 'https://ai-public.mastergo.com/ai/img_res/6ea381439b7a94e5b05754077c9b15c7.jpg'
  },
  ])
  const foodItems = ref([
  {
    id: 1,
    name: 'Super Unbeatable Delicious Seasonal Vegetables',
    description: 'Fresh seasonal vegetables served with perfectly poached egg',
    price: 1.29,
    quantity: 5,
    image: 'https://ai-public.mastergo.com/ai/img_res/dc344e2119e1987d040e75eade956be7.jpg'
  },
  {
    id: 2,
    name: 'Mediterranean Quinoa Bowl',
    description: 'Protein-rich quinoa with roasted vegetables and tahini dressing',
    price: 2.49,
    quantity: 3,
    image: 'https://ai-public.mastergo.com/ai/img_res/6ea381439b7a94e5b05754077c9b15c7.jpg'
  },
  {
    id: 3,
    name: 'Asian Fusion Noodle Bowl',
    description: 'Hand-pulled noodles with seasonal vegetables in aromatic broth',
    price: 3.99,
    quantity: 2,
    image: 'https://ai-public.mastergo.com/ai/img_res/ee655fefd4868fff86a1f8cc6975ea66.jpg'
  }
  ])
  const cancelClick = () => {
    show.value = false
  }
  const handleChange = (value) => {
    if (num.value > 0 || value > 0) {
      num.value += value
    }
  }
</script>

<style lang="scss" scoped>
  :deep(.el-drawer__header) {
    margin-bottom: 0px !important;
  }

  :deep(.el-divider) {
    margin: 20px 0px 15px 0px;
  }
  :deep( .el-drawer__body::-webkit-scrollbar ){
    display: none;
  }
  .food_title {
    height: 56px;
    font-size: 24px;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
  }
  .search_product {
    width: 660px;
    height: 400px;
    background-image: url('../../../assets/img/bg_Icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .numItem {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin: 0px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 20px;
    border: 1px solid #ccc;
  }
</style>
