<!-- 菜品 -->
<template>
  <!-- <div class="food_warp"> -->
    <div class="food_container" @click="food_btnNumber">
      <div class="item">
        <img :src="imageUrl" alt="Food Image" />
      </div>
      <div class="w-[320px] h-[80px] flex items-center">
        {{ productName }}
      </div>
      <div class="item">{{ price }}</div>
      <div class="item">{{ quantity }}</div>
    </div>
    <div class="w-[398px] h-[102px]" v-show="showNumberClose">
      <Title fontSize="16px">{{ $t('menu.number') }}</Title>
      <div class="food_number">
        <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>
    </div>
  <!-- </div> -->
</template>

<script setup>
  import Title from '@/components/titleFood.vue'
  import { ref } from 'vue'
  const props = defineProps({
    imageUrl: {
      type: String,
      required: true,
    },
    productName: {
      type: String,
      required: true,
    },
    price: {
      type: String,
      required: true,
    },
    quantity: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
  })
  const num = ref(0)
  const showNumberClose = ref(false)
  // 计数器
  const handleChange = (value) => {
    if (num.value > 0 || value > 0) {
      num.value += value
    }
  }
  // 判断计数器状态
  const food_btnNumber = () => {
    if (props.type === 'Search') {
      if (showNumberClose.value) {
        showNumberClose.value = false
      } else {
        showNumberClose.value = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  // .food_warp {
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-between;
  //   align-items: center;
  // }
  .food_container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #ffffff;
    border-radius: 12px;
    transition: all 0.3s ease;
    .item {
      width: 100px;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
      }
    }
  }
  .food_container .item:nth-child(3),
  .food_container .item:nth-child(4) {
    text-align: end;
  }
  .food_number {
    display: flex;
    align-items: 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>
