<template>
  <div class=" w-full px-[0.3rem] mt-[0.76rem] flex flex-col md:flex-row md:items-center">
    <a href="/food-search"> <img class=" md:hidden w-full h-[2rem] rounded-[0.1rem]" :src="home_info.part2_m_url"> </a>
    <a href="/food-search"> <img class=" hidden md:block w-[2.56rem] h-[3.84rem] rounded-[0.1rem]" :src="home_info.part2_pc_url"> </a>
    <div class=" list-two-line w-full flex flex-wrap">
      <div v-for="item in list" @click="toDetail(item.id)" :key="item.id" class=" cursor-pointer relative more-line w-[3.40rem] md:w-[5.76rem] px-[0.2rem] md:px-[0.24rem] py-[0.2rem] md:py-[0.4rem] flex flex-col md:flex-row">
        <img class=" w-[3rem] h-[3rem] md:w-[1.6rem] md:h-[1.6rem]" :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=" flex flex-col md:ml-[0.24rem]">
          <div class=" mt-[0.2rem] md:mt-0 h-[0.72rem] w-full overflow-ellipsis-2 text-333 text-[0.28rem] leading-[0.36rem]">
            {{item.product_name}}
          </div>
          <div class=" mt-[0.2rem] text-999 text-[0.2rem] leading-[0.32rem]">
            {{ item.cate.join(' | ') }}
          </div>
          <div class=" mt-[0.2rem] text-[0.36rem] leading-[0.36rem] font-f-din text-F70500">
            ${{item.regular_price}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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