<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.id)">
                  <div class='w-full h-full flex items-center '>
                    <!-- <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md"> -->
                    <img :src="k.cover?k.cover :'/img/cover.png'" class="rounded-md max-h-32 mx-auto" />
                  </div>
                  <div class='mt-3'>
                    {{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(id:any){
      this.$emit('itemOnclick',id)
    }
  }
});
</script>

