<template>
    <div class="list-container font-light">
            <div class="list-row flex justify-start relative text-zx-blue-light text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
              <div class='item flex flex-col w-1/2 items-center z-10 max-h-56' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
                  <div class=" w-11/12 h-full mx-auto shadow-sm pt-2">
                    <div class='desk_img_box w-full'>
                      <img :src="k.cover?k.cover :'/img/zx_default_img.png'" class="desk_img rounded-md w-full h-full mx-auto" />
                    </div>
                    <div class='overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-zx-blue-light pl-2 mt-2'>
                      {{k.name}}
                    </div>
                    <div class='overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-zx-blue-white pl-2 mt-2 text-xs'>
                      {{k.name}}
                    </div>
                  </div>
              </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:2
    },
    data:{
        type:Array,
        required: true
    }
  },
  computed:{
      outputData:function():any{
          return _chunk(this.data,this.rowSize)
      }
  },
  methods:{
    itemOnclick(id:any){
      this.$emit('itemOnclick',id)
    }
  }
});
</script>

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

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

</style>

