<template>
  <div>
    <el-row :gutter="10" class="folder-list">
      <el-col :span="2" v-for="folder in list" :key="folder.id" v-show="folder. postfix === 'FOLDER'">
        <div class="folder-item" :class="folder.checked?'checked':''">
          <el-checkbox class="folder-checkbox" v-model="folder.checked" @change="onChange(folder)"></el-checkbox>
          <div class="img-panel">
            <img src="../../../assets/file_icons/folder.png" alt="">
          </div>
          <input v-if="folder.newfolder" type="text" v-model="folder.document" autofocus size="mini" @blur="changeFolderName(folder)">
          <p v-else>{{folder.document}}</p>
        </div>
      </el-col>
    </el-row>
    <div class="flex-align-stretch flex-warp">
      <div v-for="(folder) in list" :key="folder.id" class="folder-item" :class="folder.ischeck?'checked':''">
        <el-checkbox class="folder-checkbox" v-model="folder.ischeck" @change="onChange(folder)"></el-checkbox>
        <div @click.stop="folderDetails(folder)" class="img-panel">
          <div class="image__item__panel" v-if="folder.postfix === 'DOC' || folder.postfix === 'DOCX'">
            <img  src="@/assets/file_icons/word.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'PDF'">
            <img  src="@/assets/file_icons/PDF.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'MP4' || folder.postfix === 'AVI'" >
            <img src="@/assets/file_icons/video.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'XLS' || folder.postfix === 'XLSX'">
            <img  src="@/assets/file_icons/excel.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'PNG' || folder.postfix === 'JPG'|| folder.postfix === 'JPEG'" >
            <img :src="folder.url" alt="">
          </div>
            <div class="image__item__panel" v-else-if="folder.postfix === 'SVG'" >
            <img src="@/assets/file_icons/image.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'PPT' || folder.postfix === 'PPTX'">
            <img  src="@/assets/file_icons/PPT.png" alt="">
          </div>
          <div class="image__item__panel" v-else-if="folder.postfix === 'FOLDER'">
            <img  src="@/assets/file_icons/folder.png" alt="">
          </div>
          <div class="image__item__panel" v-else >
            <img  src="@/assets/file_icons/unknow.png" alt="">
          </div>
        </div>
        <p>{{folder.document}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['list'],
  methods:{
    changeFolderName (folder) {
      this.$emit('onNameChange',folder)
    },
    onChange (folder) {
      let checkArray = []
      this.list.forEach(e=>{
        if (e.attachmentid === folder.attachmentid) {
         e.ischeck === true? e.ischeck = false : e.ischeck = true
        }
        if (e.ischeck === true) {
          checkArray.push(e)
        }
      })
      this.$emit('folderChecked',checkArray)
    }
  }
}

</script>
<style>
</style>
<style scoped>
.image__item__panel{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 64px;
  width: 64px;
  margin: 0 auto;
  overflow: hidden;
}
.image__item__panel img{
  height: 70%;
  max-width: 64px;
}
.flex-warp {
  flex-wrap: wrap;
}
.folder-item p{
  width: 100px;
  margin:0 auto;
  padding: 0 10px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  /* margin-top:10px; */
  word-break: break-all;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2; /* 这里是超出几行省略 */

  overflow: hidden;
}
.img-panel {
  width: 64px;
  height: 64px;
  margin:0 auto;
  text-align: center;
}
.img-panel > img{
  width: 80%;
}
</style>