<template>
  <div class=" w-full px-[0.15rem] flex flex-wrap md:justify-between">
    <div v-for="item in list" @click="toDetail(item.id)" :key="item.id" class=" cursor-pointer mb-[0.3rem] w-[2.4rem] md:w-[2.51rem] xl:w-[2.616rem] px-[0.15rem]">
      <img class=" w-[2.1rem] h-[2.1rem] md:w-[2.21rem] md:h-[2.21rem] xl:w-[2.316rem] xl:h-[2.316rem]" :src="item.img_url" onerror="onerror=null;src='http://120.79.165.149:8002/wp-content/themes/food/food-app/img/img-fail.png'"/>
      <div class=" mt-[0.2rem] h-[0.66rem] w-full overflow-ellipsis-2 text-333 text-[0.25rem] leading-[0.33rem]">
        {{item.product_name}}
      </div>
      <div class=" mt-[0.2rem] text-[0.37rem] leading-[0.33rem] font-f-din text-F70500">
        ${{item.regular_price}}
      </div>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    toDetail(id) {
      window.open('/food-detail?id='+id, '_blank');
    }
  }
}
</script>