<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>
    <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 v-if="folder. postfix === 'DOC' || folder. postfix === 'DOCX'"  src="../../../assets/file_icons/word.png" alt="">
            <img v-else-if="folder. postfix === 'PDF'"  src="../../../assets/file_icons/PDF.png" alt="">
            <img v-else-if="folder. postfix === 'MP4' || folder. postfix === 'AVI'"  src="../../../assets/file_icons/video.png" alt="">
            <img v-else-if="folder. postfix === 'XLS' || folder. postfix === 'XLSX'"  src="../../../assets/file_icons/xls.png" alt="">
            <img v-else-if="folder. postfix === 'PNG' || folder. postfix === 'JPG'|| folder. postfix === 'JPEG'"  src="../../../assets/file_icons/image.png" alt="">
            <img v-else-if="folder. postfix === 'PPT' || folder. postfix === 'PPTX'"  src="../../../assets/file_icons/PPT.png" alt="">
            <img v-else-if="folder. postfix === 'FOLDER'"  src="../../../assets/file_icons/folder.png" alt="">
            <img v-else  src="../../../assets/file_icons/unknow.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>
</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>