<template>
  <div class="patent-folder-filter">
    <div class="patent-folder-filter-option">
      <el-input :style="{ width: true ? '180px' : '220px'}" v-model="queryParams.name" placeholder="请输入文件夹名称" size="small"></el-input>
      <div class="float_right">
        <el-button type="primary" size="small" icon="el-icon-search" circle @click="handleSearch"></el-button>
        <el-button type="success" size="small" icon="el-icon-edit" circle @click="handleManage" :disabled="!($permission('/workspace/common/folder_manage') && $r(projectId,[1,2]))"></el-button>
      </div>
    </div>
    <el-tree
        v-if="refresh"
        class="folder-tree"
        @node-click="handleSelect"
        ref="patentFolderFilterTree"
        :data="folder"
        node-key="id"
        default-expand-all
        check-strictly
        :expand-on-click-node="false"
        highlight-current
        :current-node-key="activeItem"
    >
      <div class="custom-filter-tree-node" slot-scope="{ node, data }">
        <span class="name">{{ data.name }}</span>
        <span class="total">(<span>{{ data.total }}</span>)</span>
      </div>
    </el-tree>
    <folder-dialog @close="close" ref="folderDialog" />
  </div>
</template>

<script>
import FolderDialog from '../../../components/dialog/Folder'

export default {
  components: {
    FolderDialog,
  },
  data() {
    return {
      folder: [],
      queryParams: {
        name: '',
        projectId: 0,
        patentTotal: true
      },
      activeItem: 0,
      refresh: true
    }
  },
  computed: {
    projectId() {
      return this.$store.state.patent.projectId
    },
    queryData() {
      return this.$store.state.patent.queryData
    }
  },
  mounted() {
    this.queryParams.projectId = this.projectId
    this.getList()
  },
  methods: {
    updateQueryDataFolder(data) {
      this.$store.commit('SET_PATENT_QUERY_DATA', [])
      const index = this.queryData.map(item => item.type).indexOf('folder')
      const value = {
        data: [{
          value: data.id,
          label: data.name,
        }],
        type: 'folder',
        key: 'folder',
        name: '文件夹'
      }
      if (index === -1) {
        this.queryData.push(value)
      } else {
        this.$set(this.queryData, index, value)
      }
    },
    handleSelect(data) {
      this.activeItem = data.id
      this.updateQueryDataFolder(data)
      this.$emit('on-change', data.id)
    },
    close() {
      this.getList()
    },
    getList() {
      this.refresh = false
      this.$api.getProjectFolderList(this.queryParams).then(response => {
        this.folder = response.data
        this.$nextTick(() => {
          this.refresh = true
        })
      })
    },
    refreshView() {
      this.activeItem = 0
      this.refresh = false
      this.$nextTick(() => {
        this.refresh = true
      })
    },
    handleSearch() {
      this.getList()
    },
    handleManage() {
      this.$refs.folderDialog.open(this.queryParams.projectId)
    }
  }
}
</script>

<style lang="scss">
.patent-folder-filter {
  .patent-folder-filter-option {
    margin-bottom: 10px;
  }
  .folder-tree {
    .el-tree-node__content {
      height: 45px;
      color: #000;
    }
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: #ecf5ff !important;
    color: #409EFF!important;
  }
}
</style>