<template>
  <div class="aside-container">
    <!--    <div class="aside-header">-->
    <!--      <span class="span-text"> 接口目录分类</span>-->
    <!--    </div>-->
    <!--  树形-->
    <div class="page-view flex-row-sb">
      <app-sync-tree
        ref="appAsyncTree"
        :actions="treeActions"
        :default-data="{ customConfigField: 'custom config field' }"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-all="expandAll"
        :fields="treeFields"
        :props="treeProps"
        :request-method="getTreeNodes"
        title="树节点"
        @select="onTreeNodeClick"
      >
        <!-- 此form为组件内部form 在actions配置项的method函数当中 可以获取参数 -->
        <template #default="{ form: treeForm }">
          <app-filter-item :rules="[{ required: true, message: '自定义项一不能为空' }]" :span="24" label="自定义项一" prop="customConfigField">
            <el-input v-model="treeForm.customConfigField" placeholder="请输入自定义项一" />
          </app-filter-item>
        </template>
      </app-sync-tree>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const TREE_CONFIG = {
      name: '',
      components: {},
      treeProps: {
        value: 'id',
      },
      expandAll: false,
      defaultExpandedKeys: ['0'],
      // 此处fields内配置对象属性包括: label/prop/rules/type(枚举:switch/number/input(默认))/span/
      treeFields: [
        { label: '节点名称', prop: 'label', rules: [{ required: true, message: '节点名称不能为空' }] },
        {
          label: '排序',
          prop: 'sort',
          type: 'number',
          span: 24,
          labelWidth: '100px',
          rules: [{ required: true, message: '排序不能为空' }],
        },
      ],
      curNode: {}, // 当前选择节点
    };
    return {
      ...TREE_CONFIG,
    };
  },
  methods: {
    getTreeNodes() {
      return Promise.resolve({
        data: [
          {
            parentId: '0',
            id: '1',
            label: '节点1',
            isDir: 1,
            children: [
              {
                parentId: '1',
                id: '12',
                label: '节点1-1',
                isDir: 1,
              },
            ],
          },
          {
            parentId: '0',
            id: '12',
            label: '节点2',
            isDir: 1,
          },
          {
            parentId: '0',
            id: '13',
            label: '节点3',
          },
          {
            parentId: '0',
            id: '14',
            label: '节点4',
          },
        ],
      });
    },
    /**
     * @description: treeActions支持函数也支持数组，由于实际场景当中 可能会动态设置按钮，故以函数示例来展示
     * @param {*} data 当前点击节点数据
     * @return {*} 当前节点展示的操作项数组
     */
    treeActions(data) {
      // 根节点判断方式以业务为准，此处仅为示例
      return [
        { label: '添加', type: 'add', method: this.addNode },
        { label: '编辑', type: 'edit', method: this.editNode },
        { label: '删除', type: 'delete', method: this.delNode },
      ];
    },
    onTreeNodeClick(node) {
      if (node.id === this.curNode?.id) return;
      this.deptName = node.label;
      this.curNode = { ...node };
      this.form = this.$options.data().form;
    },
    addNode(params, node) {
      // 此处仅为示例 实际为回调
      const tree = this.$refs.appAsyncTree.getElTree();
      tree.append(params, node);
    },
    editNode(params) {
      console.log(params);
    },
    delNode(params) {
      console.log(params);
    },
  },
};
</script>

<style lang="scss" scoped>
.aside-container {
  flex: 0 0 200px;
  //border: solid 1px red;
  background-color: #fff;
}

//.aside-header {
//  border: solid 1px #e8e8e8;
//  height: 34px;
//  margin-bottom: 10px;
//
//  .span-text {
//    display: inline-block;
//    color: #1890ff;
//    font-size: 16px;
//    font-weight: 400;
//    line-height: 34px;
//    margin-left: 20px;
//  }
//}
</style>
