<template>
    <div class="list-container font-light">
            <div class="list-row flex justify-start relative text-font-white text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
              <div class='item flex flex-col w-4/12 items-center z-10 h-44' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.nftHash)">
                  <div class='desk_img_box'>
                    <!-- <img v-if="k.categoryId == 5" :src="k.cover?k.cover :k.fileUrl" alt="" class="desk_img rounded-md w-11/12 h-5/6 mx-auto" /> -->
                    <img :src="k.cover?k.cover :'/img/cover.png'" class="desk_img rounded-md w-11/12 h-5/6 mx-auto" />
                  </div>
                  <div class='mt-3 overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-center'>
                    {{k.name}}
                  </div>
              </div>
              <div class='absolute bottom-6 z-0 w-full '>
                <img src="@/assets/img/holder.png" class="w-full ">
              </div>
            </div>
            <div class="scroll-padding"></div>
          </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {chunk as _chunk} from 'lodash'
export default Vue.extend({
  name: 'AppTag',
  props: {
    rowSize: {
        type:Number,
        default:3
    },
    data:{
        type:Array,
        required: true
    }
  },
  computed:{
      outputData:function():any{
          return _chunk(this.data,this.rowSize)
      }
  },
  methods:{
    itemOnclick(nftHash:any){
      this.$emit('itemOnclick', nftHash)
    }
  }
});
</script>

<style scoped>
.desk_img_box {
  height: 80%;
  width: 100%;
}

.desk_img {
  width: 90%;
  height: 100%;
}

</style>

