<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' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
                  <div class='w-full '>
                    <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md">
                  </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>
</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(){
          return _chunk(this.data,this.rowSize)
      }
  },
  methods:{
    itemOnclick(id:any){
      this.$emit('itemOnclick',id)
    }
  }
});
</script>

