<template>

  <div class="flex flex-wrap text-left border border-gray-200 rounded-[0.05rem]">
<!--    hover:bg-green-400-->
    <div v-for="item in list" @click="toDetail(item.id)" :key="item.id" class=" cursor-pointer md:w-1/2">

        <div class="p-[0.1rem]">
          <img class="h-[1.5rem] w-[1.5rem] mx-auto object-cover object-center"
               :src="item.img_url"
               onerror="onerror=null;src='http://120.79.165.149:8002/wp-content/themes/food/food-app/img/img-fail.png'"
               alt="{{ item.product_name }}">
          <div class="p-[0.2rem]">
            <h2 class="tracking-widest text-[0.14rem] title-font font-medium text-333 mb-[0.1rem]">
              {{ item.product_name }}</h2>
            <div class="title-font text-[0.2rem] font-bold " style="color:#EA6908">${{ item.regular_price }}
            </div>
          </div>
        </div>

    </div>

  </div>

</template>


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