<template>
  <div class=" w-full px-[0.15rem] flex flex-wrap">
    <div v-for="item in list" @click="toDetail(item.id)" :key="item.id" class=" flex flex-col 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] text-[0.37rem] leading-[0.33rem] font-f-din text-F70500">
        ${{item.regular_price}}
      </div>
      <div class=" mt-[0.1rem] w-full h-[0.66rem] overflow-ellipsis-2 text-333 text-[0.25rem] leading-[0.33rem]">
        {{item.product_name}}
      </div>
      <div class=" mt-[0.1rem] text-[0.18rem] leading-[0.18rem] text-999">
        <span class=" text-FFAA22">1</span>
        條評價
      </div>
      <div class=" mt-[0.2rem] w-[1.2rem] h-[0.4rem] flex items-center justify-center border-[0.01rem] border-main rounded-[0.04rem] text-main text-[0.2rem]">
        加入購物車
      </div>
    </div>
  </div>
</template>

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