<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 :sortType= 'params.content.where.sorttype'
                       @sortTypeChange="sortTypeChange" v-if="tool.checkAuth($route.name,'read')"></hot-new-control>
    </div>
    <!--文件展示-->
    <file-list :fileData="fileData" 
               @upFileData="upFileData"
               @statusChange="statusChange" v-if="tool.checkAuth($route.name,'read')"></file-list>
    <!--文件信息面板-->
    <drawer :isFileInfoPanlShow="isFileInfoPanlShow"></drawer>
  </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'
import Drawer from '@/SManagement/archives/components/Drawer'

import matchingFileType from '@/utils/matchingFeilType'
export default {
  name: 'index',
  data() {
    return {
      params: {
        "accesstoken": "29cb8b4d626ae923fedd45d060367cd3",
        "classname": "saletool.salematerial.salematerial",
        "method": "selectMyList",
        "content": {
            "pageNumber": 1,
            "pageSize": 99999999,
            "parentid": 1,
            "where": {
                "condition": "",
                "sorttype": 1
            }
        }
      },
      /**
       * data:存放临时文件数据
       * @param filename : 文件夹名
       * @param data     : 文件夹id
       * @param tempData :临时数据
       */
      tempFileData: [{
        filename: '根目录',
        id: null,
        tempData: ''
      }],
      //类型选择数据
      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:[],
      //当前选择的文件类型
      isType: 'all',
      //当前所在文件夹位置
      currentFileIndex: 0,
      //文件信息面板是否显示
      isFileInfoPanlShow: false,
      total:0,
    };
  },
  components: {
    SelectPanl,
    FileList,
    HotNewControl,
    BreadCrumbs,
    Drawer,
  },
  computed:{
  },
  watch:{

  },
  async created() {
    this.getFileList()
    this.tempFileData[0].id = 1
  },
  methods: {
    //获取文件数据
    getFileList() {
      this.$api.requested(this.params).then(res => {
        this.total = res.total
        this.fileData = matchingFileType.fileList(res.data)
      })
    },
    //监听文件单击事件
     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.$api.requested(this.params).then(res => {
        this.fileData = this.filterFileData(matchingFileType.fileList(res.data),type)
        this.total = !this.fileData ? 0 : this.fileData.length

      })
    },
    //面包屑发出的事件
    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()
    },
    //监听最热组件变化
    async sortTypeChange(id) {
      this.isType = 'all'
      this.$refs.selectPanl.currentName = 'all'
      this.params.content.where.sorttype = id
      this.params.content.parentid = 1
      this.tempFileData.splice(1)
      this.getFileList()
      this.currentFileIndex = 0      
    },
    //数据过滤
    filterFileData(file,type) {
      if(type == 'all') return file
      return file.filter(item => {
        return item.postfix == type
      })
    }
  }
}
</script>

<style scoped>
  .normal-card {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    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>