<template>
  <div class="normal-card">
    <!--面包屑-->
    <bread-crumbs :tempFileData="tempFileData" @BreadCrumbsChange="BreadCrumbsChange">
    </bread-crumbs>
    <div class="header-panl">
      <!--类型选择面板-->
      <select-panl :titleLists="titleLists" @CurrentSelectType="CurrentSelectType" ref="selectPanl" v-if="tool.checkAuth($route.name,'read')"></select-panl>
      <!--切换最热最新-->
      <hot-new-control @sortTypeChange="sortTypeChange" v-if="tool.checkAuth($route.name,'read')"></hot-new-control>
    </div>
    <!--文件展示-->
    <file-list :fileData="fileData" @upFileData="upFileData" @statusChange="statusChange" :isCollect="true" v-if="tool.checkAuth($route.name,'read')">
    </file-list>

  </div>
</template>

<script>
import FileList from '@/SManagement/archives/components/FileList'
import SelectPanl from '@/SManagement/submitedit_one/components/SelectPanl'
import HotNewControl from '@/components/hot-new-control/HotNewControl'
import BreadCrumbs from '@/components/bread-crumbs/BreadCrumbs'
export default {
  name: 'index',
  data () {
    return {
      params: {
        "accesstoken": "14fed62faa62714a6a1e2ebe2d3997e3",
        "classname": "saletool.salematerial.salematerial",
        "method": "selectList",
        "content": {
          "pageNumber": 1,
          "pageSize": 9999999999999,
          "parentid": 1,
          "where": {
            "condition": "",
          }
        }
      },
      /**
       * data:存放临时文件数据
       * @param filename : 文件夹名
       * @param data     : 文件夹id
       */
      tempFileData: [{
        filename: '文件',
        id: null,
      }],
      //类型选择数据
      titleLists: [
        { name: '全部', type: 'all' },
        { name: 'Word', type: 'word' },
        { name: 'Excel', type: 'excel' },
        { name: 'PPT', type: 'ppt' },
        { name: 'PDF', type: 'pdf' },
        { name: '图片', type: 'image' },
        { name: '视频', type: 'video' },
        { name: '压缩包', type: 'zip' },
        { name: '文本', type: 'txt' },
      ],
      fileData: [],
      allFileData:[],
      //当前选择的文件类型
      isType: 'all',
      //当前所在文件夹位置
      currentFileIndex: 0,
      //文件信息面板是否显示
      isFileInfoPanlShow: true,
      total: 0,
      sort: ""
    };
  },
  components: {
    SelectPanl,
    FileList,
    HotNewControl,
    BreadCrumbs,
  },
  computed: {
  },
  watch: {

  },
  created () {
    this.getFileList()
    this.tempFileData[0].id = 1
  },
  methods: {
    //获取文件数据
    getFileList () {
      this.$api.requested(this.params).then(res => {
        this.total = res.total;
        this.params.content.sort = res.sort
        this.allFileData = this.fileType.fileList(res.data)
        
        this.fileData =this.filterFileData(this.allFileData,this.isType)
      })
    },
    //监听文件夹单击事件
    upFileData (parentid, name, id) {
      this.params.content.parentid = id
      this.currentFileIndex = id
      this.tempFileData[this.tempFileData.length - 1].id = parentid
      this.getFileList()
      this.tempFileData.push({
        filename: name,
        id: id
      })

    },
    //监听类型选择组件发出的更改事件
    CurrentSelectType (type) {
      this.isType = type
      this.fileData = this.filterFileData(this.allFileData,type)
    },
    //面包屑发出的事件
    async BreadCrumbsChange (index) {
      if (this.tempFileData.length <= 1) return
      this.isType = 'all'
      this.params.content.parentid = index
      this.$refs.selectPanl.currentName = 'all'
      this.tempFileData.splice(this.tempFileData.indexOf(this.tempFileData.find(item => item.id == index)) + 1)
      this.getFileList()

    },
    //修改收藏状态
    statusChange (id, item) {
      this.params.content.parentid = item.parentid
      this.getFileList()
    },
    //监听最热组件变化
    sortTypeChange (name) {
      for(let i=0;i<this.params.content.sort.length;i++) {
        this.params.content.sort[i].sorted = this.params.content.sort[i].sortname == name ? 1 : 0
      }
      this.getFileList()
      this.currentFileIndex = 0
    },
    //数据过滤
    filterFileData (file, type) {
      if (type == 'all') return file
      return file.filter(item => {
        return item.fileType == type
      })
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.normal-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 100%;
  position: relative;
}
.normal-card .el-breadcrumb {
  margin-bottom: 34px;
}
.normal-card .header-panl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.normal-card .header-panl .el-dropdown-link {
  display: flex;
}
.normal-card .header-panl .el-dropdown .el-dropdown-link .select {
  margin-left: 8px;
}
</style>