<template>
  <el-row>
    <el-col :span="24">
       <list ref="list" @onNameChange="onNameChange" @folderChecked="folderChecked" @toFolderDetail="toFolderDetail">
        <template v-if="!showBtnGroup">
          <h-upload v-if="tool.checkAuth($route.name,'upload')" :folderid="folderid" slot="upload" :hidemediastock="true" @onSuccess="onSuccess"></h-upload>
          <add v-if="tool.checkAuth($route.name,'insert')" slot="add" ref="add" style="margin-left:10px" @onSuccess="onSuccess"></add>
        </template>
        <template  v-else>
          <el-button-group slot="btngroup">
            <download v-if="tool.checkAuth($route.name,'download')" :checklist="checklist"></download>
            <delete-file v-if="tool.checkAuth($route.name,'delete')" :checklist="checklist" @onSuccess="onSuccess"></delete-file>
            <more-operation v-if="tool.checkAuth($route.name,'update')" ref="edit" :checklist="checklist" @restName="restName" @onSuccess="onSuccess" @changeAuthData="changeAuth"></more-operation>
          </el-button-group>
        </template>
      </list>
      <edit ref="edits" :checklist="checklist"></edit>
    </el-col>
  </el-row>
</template>

<script>
import hUpload from '../../components/upload/hw_obs_upload.vue'
import list from './modules/list.vue'
import add from './modules/add.vue'
import edit from './modules/edit.vue'

import download from './modules/download.vue'
import deleteFile from './modules/delete.vue'
import moreOperation from './modules/moreOperation.vue'
import fileInfo from './modules/fileInfo.vue'

export default {
  components:{
    hUpload,
    list,
    add,
    download,
    deleteFile,
    moreOperation,
    fileInfo,
    edit
  },
  watch:{
    $route () {
      this.folderid = this.$route.query.id?this.$route.query.id:JSON.parse(sessionStorage.getItem('folderid')).salematerialfolderid
    }
  },
  data () {
    return {
      showBtnGroup:false,
      folderid:JSON.parse(sessionStorage.getItem('folderid')).salematerialfolderid,
      checklist:[]
    }
  },
  methods:{
    // 监听修改文件夹名称,失去焦点执行
    onNameChange (folder) {
      folder.attachmentid ? this.$refs.edit.confirmRestName(folder) : this.$refs.add.createFolderComplete(folder)
    },

    // 监听创建成功
    onSuccess () {
      let id = this.$route.query.id?this.$route.query.id:JSON.parse(sessionStorage.getItem('folderid')).salematerialfolderid
      this.$refs.list.queryAttachment(id)
      this.$refs.list.restChecked()
      this.folderChecked([])
    },
    
    // 监听文件选择
    folderChecked (arr) {
      this.checklist = arr
      if (arr.length > 0) {
        this.showBtnGroup = true
      } else {
        this.showBtnGroup = false
      }
    },
    // 监听打开文件夹
    toFolderDetail (id) {
      this.folderid = id
    },
    // 监听重命名
    restName () {
      this.checklist[0].newfolder = true
      let obj = this.checklist[0]
      this.$refs.list.list.forEach((e,index) => {
        if (e.attachmentid === this.checklist[0].attachmentid) {
          this.$set(this.$refs.list.list, index, obj);
        }
      })
    },
    // 监听点击授权
    changeAuth () {
      this.$refs['edits'].onShow()
    }
  }
}

</script>
<style>
</style>