
<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notPagination notDel>
      <div class="mytree">
        <el-tree
          :data="tree"
          indent=""
          @node-click="treeNodeClick"
          :props="treeProps"
          :load="loadNode"
          lazy
        >
          <span
            class="custom-tree-node"
            style="width: 100%"
            slot-scope="{ node, data }"
          >
            <span stype="font-size:14px">{{ node.label }}</span>
            <span style="float: right">
              <el-button
                icon="el-icon-plus"
                style="padding: 3px 10px"
                round
                @click="() => addChild(data)"
                >新增
              </el-button>
              <el-button
                icon="el-icon-edit"
                type="primary"
                style="padding: 3px 10px"
                round
                @click="() => editChild(data)"
              >
                编辑
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </LayoutTable>
  </div>
</template>

<style lang="scss" scoped>
.mytree /deep/ {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
<script>
import table from "@/assets/mixins/table";

export default {
  mixins: [table],
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) return;
      let res = await this.$post("/materia/category/getListByParentId", {
        "query.parentId": node.data.id,
        "pageInfo.prePageResult": -1,
      });
      resolve(this.clean(res.data.result));
    },

    refreshLazyTree(node, children) {
      var theChildren = node.childNodes;
      theChildren.splice(0, theChildren.length);
      node.doCreateChildren(children);
    },

    clean(data) {
      return data.map((i) => {
        return {
          name: i.code + " " + i.name,
          children: [],
          id: i.id,
          isLeaf: i.isLeaf === 1,
        };
      });
    },
    afterRender({ result }) {
      this.tree = result;
    },
    addChild(data) {
      this.$router.push({
        path: this.pageInfo.add,
        query: { "query.parentId": data.id },
      });
    },
    editChild(data) {
      this.$router.push({
        path: this.pageInfo.edit,
        query: Object.assign({}, { id: data.id }, this.query),
      });
    },
    treeNodeClick(data, node) {
      this.currCategory = Object.assign({}, data.entity);
    },
  },
  data() {
    return {
      currCategory: { id: -1 },
      tree: [],
      treeProps: {
        children: "children",
        label: function (data, node) {
          //自定义显示名称
          if (data.code) {
            return data.code + " " + data.name;
          } else {
            return data.name;
          }
        },
        isLeaf: "isLeaf",
      },
      query: {
        pageInfo: {
          prePageResult: -1,
        },
      },

      config: {
        search: [
          {
            name: "name",
            type: "text",
            label: "名称",
          },
          {
            name: "status",
            type: "select",
            label: "是否启用",
          },
        ],
        columns: [
          {
            type: "selection",
            width: 60,
          },
          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    icon="el-icon-plus"
                    size="mini"
                    round
                    onClick={() => {
                      this.addChild(row);
                    }}
                  >
                    新增
                  </el-button>{" "}
                  <table-buttons row={row} onEdit={this.toEdit} noDel />
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
