<template>
  <div class="container mx-auto w-full flex flex-wrap ">
    <div class="p-1 w-1/3 lg:w-1/5 border-2 hover:border-0 border-gray-200 border-opacity-60 cursor-pointer hover:shadow-lg hover:shadow-main-color"
         v-for="item in list" @click="toDetail(item.title,item.url)" :key="item.id">
      <div class="w-full  cursor-pointer">
        <img class="h-[1.79rem] w-[1.79rem] 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.title }}">
        <div class="text-center">
          <h2 class="tracking-widest text-[0.16rem]  mb-[0.13rem]" ><{{ item.title }}></h2>
          <div class=""
               style="background: rgba(234,105,8,0.39);border-radius: 12px;">
            <span class="title-font text-[0.13rem] font-medium text-white ">VIEW >></span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<!--<div class="container mx-auto w-full flex flex-wrap ">-->
<!--<div class="p-1 w-1/4 " style="background: rgba(255,255,255,0.39);-->
<!--box-shadow: 0px 0px 26px rgba(0,155,150,0.2);">-->
<!--  <div class="h-full border-2 border-gray-200 border-opacity-60  overflow-hidden">-->
<!--    <img class="h-[1.79rem] w-[1.79rem] object-cover object-center"-->
<!--         :src="local_url+'img/zone_video/z1@2x.png'" alt="blog">-->
<!--    <div class="text-center">-->
<!--      <h2 class="tracking-widest text-[0.20rem] text-333 mb-[0.13rem]">-->
<!--        <零食專區>-->
<!--      </h2>-->
<!--      <div class=""-->
<!--           style="background: rgba(234,105,8,0.39);border-radius: 12px;">-->
<!--        <span class="title-font text-[0.13rem] font-medium text-white ">VIEW >></span>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--</div>-->

<script>
// zone-hot-list
module.exports = {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    toDetail(cat,url = '') {
      console.log('toDetail -> '+ cat)
      if(cat == '影視專區'){
        window.open('/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/', '_blank');
        // http://dk.smart1space.site/category/%e5%bd%b1%e8%a6%96%e5%b0%88%e5%8d%80/
      }else if(cat === '醫學媒體頻道'){
        window.open(url, '_blank');
      }else {
        window.open('/food-search?cat=' + cat, '_blank');
      }

    }
  }
}
</script>