<template>
  <div class="">
    <el-dialog title="文件夹管理" :visible.sync="visible" width="500px" append-to-body destroy-on-close :before-close="close" top="10vh">
      <div class=" project-folder-dialog">
        <el-container class="project-field-option-box">
          <el-main v-loading="loading">
            <el-tree
                class="tree-option"
                :data="option"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                draggable
                @node-drop="handleDrop"
            >
              <div class="custom-tree-node" slot-scope="{ node, data }">
                <el-input v-model="data.name" placeholder="请输入内容" size="small" class="r"></el-input>
                <div class="o">
                  <span class="el-icon-plus" @click="handleAddTreeNode(data)" title="添加"></span>
                  <span v-if="!data._default" class="el-icon-delete" @click="handleDeleteTreeNode(node, data)" title="删除"></span>
                </div>
              </div>
            </el-tree>
          </el-main>
          <el-footer>
            <el-button type="primary" size="small" @click="handleAddOption()">添加</el-button>
          </el-footer>
        </el-container>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findTreeEq } from "@/utils";

export default {
  data() {
    return {
      loading: false,
      option: [],
      visible: false,
      btnLoading: false,
      projectId: 0
    }
  },
  mounted() {
  },
  methods: {
    open(id) {
      this.projectId = id
      this.visible = true
      this.getList()
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    getList() {
      this.loading = true
      this.$api.getProjectFolderList({ projectId: this.projectId, patentTotal: false }).then(response => {
        this.option = response.data
        this.loading = false
      })
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      if (draggingNode.data.id && dropNode.data.id) {
        draggingNode.data.parentId = dropNode.data.id
      }
      let order = dropNode.data.order
      switch (dropType) {
        case "before":
          draggingNode.data.order = order - 1
          break
        case "after":
          draggingNode.data.order = order + 1
          break
        case "inner":
          draggingNode.data.order = order + 1
          break
      }
    },
    handleDeleteTreeNode(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      const index = children.findIndex(d => d.$treeNodeId === data.$treeNodeId);
      children.splice(index, 1);
    },
    handleAddTreeNode(data) {
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push({
        name: '',
        parentId: data.id,
        order: data.children.length + 1,
        children: [],
      })
    },
    handleAddOption() {
      this.option.push({
        name: '',
        parentId: 0,
        order: this.option.length + 1,
        children: [],
      })
    },
    submit() {
      let data = JSON.parse(JSON.stringify(this.option))
      const flag = findTreeEq(data)
      if (flag) {
        this.$message.error(flag)
        return false
      }
      this.btnLoading = true
      this.$api.editProjectFolder({ projectId: this.projectId, data: data }).then(response => {
        this.$message.success('更新成功')
        this.btnLoading = false
        this.close()
      }).catch(error => {
        this.btnLoading = false
      })
    },
  }
}
</script>

<style lang="scss">
.project-folder-dialog {
  .r {
    width: 250px !important;
  }
  .project-field-option-box {
    height: 500px !important;
  }
}
</style>
