<template>
  <div class="normal-card">
    <!--面包屑-->
    <bread-crumbs :tempFileData="tempFileData"
                  @BreadCrumbsChange="BreadCrumbsChange"></bread-crumbs>
    <div class="header-panl">
      <!--类型选择面板-->
      <search @searchActive="searchActive" @clearData="clearData" ref="search"></search>
      <!--切换最热最新-->
      <hot-new-control :sortType= 'params.content.where.sorttype'
                       @sortTypeChange="sortTypeChange" v-if="tool.checkAuth($route.name,'read')"></hot-new-control>
    </div>
    <div class="content">
      <!--文件展示-->
      <file-list :fileData="fileData" 
                @upFileData="upFileData"
                @statusChange="statusChange" v-if="tool.checkAuth($route.name,'read')"></file-list>
      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
        @pageChange="pageChange">
      </pagination>
    </div>
  </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 search from '@/components/search/index'
import matchingFileType from '@/utils/matchingFeilType'
import Pagination from '@/components/pagination/Pagination'
export default {
  name: 'index',
  data() {
    return {
      params: {
        "accesstoken": "29cb8b4d626ae923fedd45d060367cd3",
        "classname": "saletool.salematerial.salematerial",
        "method": "selectMyList",
        "content": {
          "nocache":true, 
          "pageNumber": 1,
          "pageSize": 25,
          "parentid": 1,
          "where": {
              "condition": "",
          }
        }
      },
      /**
       * data:存放临时文件数据
       * @param filename : 文件夹名
       * @param data     : 文件夹id
       * @param tempData :临时数据
       */
      tempFileData: [{
        filename: '文件',
        id: null,
        tempData: ''
      }],
      fileData:[],
      //当前选择的文件类型
      isType: 'all',
      //当前所在文件夹位置
      currentFileIndex: 0,
      //文件信息面板是否显示
      isFileInfoPanlShow: false,
      total:0,
    };
  },
  components: {
    SelectPanl,
    search,
    FileList,
    HotNewControl,
    BreadCrumbs,
    Drawer,
    Pagination
  },
  computed:{
  },
  watch:{

  },
  async created() {
    this.getFileList()
    this.tempFileData[0].id = 1
  },
  methods: {
    //获取文件数据
    async getFileList() {
      let res = await this.$api.requested(this.params)
      this.total = res.total
      this.fileData = matchingFileType.fileList(res.data)
    },
    searchActive (txt) {
      this.params.content.where.condition = txt
      this.getFileList()
    },
    clearData () {
      this.params.content.where.condition = ''
      this.getFileList()
    },
    //监听文件单击事件
     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
      })      
    },
    //面包屑发出的事件
    BreadCrumbsChange(index) {
      if(this.tempFileData.length <=1) return 
      this.params.content.parentid = index
      this.params.content.pageNumber = 1
      this.tempFileData.splice(this.tempFileData.indexOf(this.tempFileData.find(item => item.id == index)) + 1)
      this.$refs.search.clearData()
      this.getFileList()  
          
    },
    //修改收藏状态
    statusChange(id,item) {
      this.params.content.parentid = item.parentid
      this.getFileList()
    },
    //监听最热组件变化
    async sortTypeChange(id) {
      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
      })
    },
    pageChange(b) {
      this.params.content.pageNumber = b
      this.getFileList()
    }
  }
}
</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;
  }
  .normal-card .content {
    position: relative;
    padding-bottom: 30px;
    min-height: calc(100vh - 270px);
  }
  .normal-card .content .el-pagination {
    position: absolute;
    bottom: 0;
    right: 16px;
    margin-bottom: 0;
  }
</style>