<template>
  <div> 
    <div  class="flex-align-center flex-between border-bottom container normal-panel">
      <div class="flex-align-center">
        <slot name="upload"></slot>
        <slot name="add"></slot>
        <slot name="btngroup"></slot>
      </div>
      <div class="flex-align-center">
        <el-input size="small" style="width:160px;margin-right:16px" prefix-icon="el-icon-search" v-model="params.content.where.condition" @keyup.enter.native="queryAttachment(params.content.pageNumber = 1)" @clear="queryAttachment(params.content.pageNumber = 1)" placeholder="搜索附件名称" clearable></el-input>
        <sort :sort="sort" @onSort="onSort"></sort>
        <i class="el-icon-refresh" style="margin-left:16px" @click="queryAttachment(params.content.where.condition = '')"></i>
      </div>
    </div>
    <div ref="ele" style="height:calc(100vh - 255px);overflow-y:scroll" class="container normal-panel">
      <div class="flex-align-center normal-margin">
        <el-button v-if="fileRouter.length > 1" type="text" size="mini" class="inline-16" @click="toPreFile">返回上一级</el-button>
        <div class="fileRouter__history" v-for="(route,index) in fileRouter" :key="route.index" @click="folderDetails(route,index)">{{route.document}}&nbsp;<span v-show="fileRouter.length - 1 !== index"> > </span>&nbsp;</div>
      </div>
      <div class="flex-align-stretch flex-warp">
        <div v-for="(folder,index) in list" @dblclick.stop="folderDetails(folder)" @click="fileDetail(folder)" :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 class="op__panel">
            <delete-temp :self="true" :checklist="[folder]" style="margin-right:5px" @onSuccess="queryAttachment"></delete-temp>
            <operation-temp :ref="'edit' + index" :self="true" :checklist="[folder]" @restName="restName"  @onSuccess="queryAttachment"></operation-temp>
          </div>
          <div 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>
          <input v-if="folder.newfolder" type="text" v-model="folder.document" autofocus size="mini" @keyup.enter="changeFolderName(folder,index)" @blur="changeFolderName(folder,index)">
          <p v-else>{{folder.document}}</p>
        </div>
      </div>
      <div v-if="list.length === 0" class="flex-align-center" style="height:calc(100vh - 200px);justify-content:space-around">
        <el-empty description="暂无文件,请点击左上角的“上传”按钮添加"></el-empty>
      </div>
    </div>
    <div style="margin:16px 0;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="params.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import operationTemp from './moreOperation.vue'
import deleteTemp from './delete.vue'

export default {
  data () {
    return {
      params:{
        "classname": "system.attachment.MediaCenter",
        "method": "queryAttachment",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition":"",
            "parentid":''
          }
        }
      },
      list:[],
      sort:[],
      total:0,
      currentPage:0,
      clickArea:'',
      fileRouter:[{
        postfix:'FOLDER',
        document:'全部文件'
      }]
    }
  },
  components:{
    operationTemp,
    deleteTemp
  },
  methods:{
    // 排序
    onSort (sort) {
      this.params.content.sort = [sort]
      this.queryAttachment(this.params.content.where.parentid)
    },
    async queryAttachment () {
      this.params.content.where.parentid = this.$route.query.id?this.$route.query.id:0
      const res = await this.$api.requested(this.params)
      res.data.map(e=>{
        e.postfix  = e.postfix.toUpperCase()
        e.ischeck = false
      })
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      this.sort = res.sort
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.queryAttachment(this.params.content.where.parentid)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.queryAttachment(this.params.content.where.parentid)
    },
    async changeFolderName (folder,index) {
      if (this.clickArea === 'self') {
        let param = {
          "classname": "system.attachment.MediaCenter",
          "method": "changeAttachment",
          "content": {
            "files": [
              {
                "attachmentid": folder.attachmentid,
                "document": folder.document,
                "parentid":folder.parentid//文件夹iD
              }
            ]
          }
        }
        const res = await this.$api.requested(param)
        folder.newfolder = false
        this.list.forEach((e,index) => {
          if (e.attachmentid === folder.attachmentid) {
            this.$set(this.list, index, folder);
          }
        })
      } else {
        this.$emit('onNameChange',folder)
      }
    },
    onChange (folder) {
      let checkArray = []
      this.list.forEach((e,index)=>{
        if (e.ischeck === true) {
          checkArray.push(e)
        }
      })
      this.$emit('folderChecked',checkArray)
    },
    folderDetails (folder,index) {
      if (folder.postfix === 'FOLDER') {
        if (index >= 0) {
          this.fileRouter = this.fileRouter.slice(0,index + 1)
          console.log(this.fileRouter)
        } else {
           let _isSame = this.fileRouter.some(m=>folder.attachmentid === m.attachmentid)

          _isSame?'':this.fileRouter.push(folder)
        }
        this.$router.replace({path:'/mediaStock',query:{id:folder.attachmentid}})

        this.queryAttachment(folder.attachmentid)
      }
    },
    fileDetail (file) {
      this.$emit('folderChecked',[file])
    },
    restChecked () {
      this.list.forEach((e,index)=>{
        e.ischeck = false
      })
    },
    restName (item) {
      this.clickArea = 'self'
      item.newfolder = true
      this.list.forEach((e,index) => {
        if (e.attachmentid === item.attachmentid) {
          this.$set(this.list, index, item);
        }
      })
    },
    toPreFile () {
      this.fileRouter.pop()
      this.$router.replace({path:'/mediaStock',query:{id:this.fileRouter.at(-1).attachmentid}})
    }
    
  },
  mounted () {
    // 根据容器高度计算需要的数据条数
    var heightCss = window.getComputedStyle(this.$refs.ele).height
    this.params.content.pageSize = Math.ceil((heightCss.match(/\d+/g)[0] / 114)) *12
    this.queryAttachment()
  },
  watch:{
    $route () {
      this.queryAttachment()
      // 路由发生变化的时候初始化选择数组
      this.$emit('folderChecked',[])
    }
  }
}

</script>
<style>
.folder-item {
  position: relative;
  width: 120px;
  padding:10px 5px;
  text-align: center;
  color:#333;
  margin-bottom: 15px;
  margin-left:30px;
  cursor: pointer;
  font-size: 14px;
}
.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;
}
.folder-item input{
  width: calc(100% - 8px);
  padding: 2px;
  margin-top:0px;
}
.img-panel {
  width: 64px;
  height: 64px;
  margin:0 auto;
  text-align: center;
}
.img-panel > img{
  width: 80%;
}
.folder-checkbox{
  display: none;
  position: absolute;
  top:10px;
  left: 10px;
}
.checked{
  background: #f1f2f3;
  border-radius: 3px;
}
.checked .folder-checkbox {
  display: block;
}
.folder-item:hover .folder-checkbox {
  display: block;
}
.folder-item:hover {
  background: #f1f2f3;
  border-radius: 3px;
}
</style>
<style scoped>
.border-bottom{
  border-bottom: 1px solid #f1f2f3;
}
.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;
}
.op__panel{
  display: none;
  position: absolute;
  right:0px;
  top:0px;
  padding: 0px 5px;
  background: #fff;
}
.folder-item:hover .op__panel{
  display: block;
}
.fileRouter__history {
  font-size: 12px;
  line-height: 30px;
  cursor: pointer;
}
</style>