<template>
  <div v-loading="loading">
    <div style="margin-bottom: 10px;">
      <el-input v-model="searchValue" placeholder="请输入分类名称" @input="handleSearch" size="small" />
    </div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      default-expand-all
      :filter-node-method="filterNode"
      v-on="$listeners"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="operation-group">
          <el-button type="text" size="mini" icon="el-icon-plus" @click.stop="handleAdd(data)"></el-button>
          <el-button type="text" size="mini" icon="el-icon-edit" @click.stop="handleEdit(data)"></el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click.stop="handleDelete(data)"></el-button>
        </span>
      </span>
    </el-tree>

    <!-- 使用新的弹窗组件 -->
    <attach-classify-edit-dialog
      :show.sync="dialogVisible"
      :id="row.id"
      :init-data="{parentId: parentId}"
      @success="getList"
    />
  </div>
</template>

<script>
import { listAttachClassifyAll, delAttachClassify } from '@/api/bst/attachClassify'
import AttachClassifyEditDialog from '@/views/bst/attachClassify/components/AttachClassifyEditDialog.vue'

export default {
  name: 'AttachClassifyTree',
  components: {
    AttachClassifyEditDialog
  },
  data() {
    return {
      classifyList: [],
      loading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 弹窗相关
      dialogVisible: false,
      row: {},
      parentId: null,
      searchValue: null,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.$refs.tree.filter(this.searchValue)
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) {
        return true;
      }
      return data.name.indexOf(value) !== -1;
    },
    // 获取数据列表
    getList() {
      this.loading = true
      listAttachClassifyAll().then(response => {
        this.classifyList = response.data
        this.treeData = this.handleTree(this.classifyList, 'id', 'parentId', 'children')
      }).finally(() => {
        this.loading = false
      })
    },
    // 新增按钮操作
    handleAdd(row) {
      this.row = {};
      this.parentId = row ? row.id : '0';
      this.dialogVisible = true
    },
    // 修改按钮操作
    handleEdit(row) {
      this.row = row;
      this.parentId = row.parentId;
      this.dialogVisible = true
    },
    // 删除按钮操作
    handleDelete(row) {
      if (row.children && row.children.length > 0) {
        this.$modal.msgError('该分类下存在子分类，不能删除')
        return;
      }
      if (row.parentId === '0') {
        this.$modal.msgError('不能删除根目录')
        return;
      }
      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(() => {
        return delAttachClassify(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  
  .operation-group {
    .el-button {
      opacity: 0;
      margin-left: 8px;
      
      &:first-child {
        margin-left: 0;
      }
      
      &[class*="el-icon-delete"] {
        color: #f56c6c;
      }
    }
  }

  &:hover {
    .operation-group {
      .el-button {
        opacity: 1;
      }
    }
  }
}
</style>