<template>
  <div 
    v-on="$listeners"
    class="folder-item">
    <van-image
    class="thumb"
    :src="thumb"
    fit="contain"
    ></van-image>
    <div class="title van-ellipsis">{{name}}</div>
    <div class="desc van-ellipsis">{{desc}}</div>
    <common-svg 
    @click.stop="showMoreAction"
    class="more"
    name="cunzhengliebiao-gengduo"></common-svg>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
@Component({
  name: 'UserFolderItem',
})
export default class UserFolderItem extends Vue {
 @Prop({
  required: true,
  type: String,
 })
 private thumb!: string;
 @Prop({
  required: true,
  type: String,
 })
 private name!: string;
  @Prop({
    required: true,
    type: String,
  })
 private desc!: string;
 @Emit('show-more-action')
 private showMoreAction() {
   return;
 }
}
</script>
<style scoped lang="scss">
  .folder-item{
    display: grid;
    grid-template-columns: 44px auto 30px;
    grid-template-rows: repeat(2, 25px);
    grid-auto-flow: column dense;
    grid-gap: 0 17px;
    padding: 13px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 10px 0px rgba(218,218,218,0.31);
    border-radius:5px;
    margin-bottom: 10px;
    text-align: left;
    .title {
      font-size:18px;
      font-weight:500;
      color: #353535;
    }
    .desc {
      color: #AAAAAA;
    }
    .thumb, .right-icon{
      place-self: center;
      grid-row: span 2;
    }
    .more{
      place-self: center;
      grid-row: 1/ span 2;
    }
  }
</style>
