<!--
属性树
@Author: linqian
@Date: 2021-05-24 09：15
-->
<template>
  <div class="u-tree">
    <dg-card class="box-card" shadow="never" :header="title">
      <dg-scrollbar>
        <dg-tree
          ref="tree"
          icon-class="el-icon-folder-opened"
          icon-leaf="el-icon-document"
          node-key="id"
          :data="treeData"
          :props="props"
          highlight-current
          default-expand-all
          :expand-on-click-node="false"
        >
          <div slot-scope="{ data }" class="u-tree-label el-tree-node__edit" style="width: 100%">
            <span @click="handleNodeClick(data)" style="display: inline-block; flex: 1">
              {{ data[props.label] }}
            </span>
            <span class="operation-icons">
              <i class="el-icon-circle-plus-outline" v-if="!data.pid" @click="handleOperate('add', data)"> </i>
              <i class="el-icon-delete" v-if="data.pid && data.child" @click="handleOperate('delete', data)"> </i>
            </span>
          </div>
        </dg-tree>
      </dg-scrollbar>
    </dg-card>
  </div>
</template>

<script>
import { getPropTreeByType, deleteProp } from '@/api/data-auth';
export default {
  props: {
    apiName: {
      type: String,
      default: 'menuTree'
    },
    title: String,
    // SUB = 主体属性类， OBJ = 客体属性类
    type: String
  },
  components: {},
  data() {
    return {
      treeData: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'child'
      }
    };
  },
  computed: {},
  methods: {
    handleNodeClick(data) {
      let operateType = 'add';
      if (data.pid) {
        if (data.child) {
          operateType = 'edit';
        } else {
          operateType = 'detail';
        }
      }
      this.$emit('submitNodeOperate', {
        ...data,
        operateType
      });
    },
    /**
     * 操作
     */
    handleOperate(operateType, data) {
      if (operateType == 'delete') {
        this.handleDelProp(data);
      } else {
        this.$emit('submitNodeOperate', {
          ...data,
          operateType
        });
      }
    },
    /**
     * 删除
     */
    handleDelProp(data) {
      this.$dgConfirm(`是否确认删除该属性！`, '提示', {}).then(() => {
        const params = {
          attrBelongType: data.attrBelongType,
          attrType: this.type,
          id: data.id
        };
        deleteProp(params).then((res) => {
          this.$message.success('删除成功');
          this.init();
          // this.setDefault();
        });
      });
    },
    init() {
      return new Promise((resolve) => {
        getPropTreeByType(this.type).then((res) => {
          this.treeData = res.data.content;
          resolve(res.data.content);
          this.setDefault();
        });
      });
    },
    // 默认取第一条,新增
    setDefault() {
      if (this.treeData.length > 0) {
        this.handleOperate('add', this.treeData[0]);
        this.$refs.tree.setCurrentKey(this.treeData[0].id);
      }
    }
  },
  async created() {
    await this.init();
    // this.setDefault();
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
.u-tree {
  .el-tree-node__edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    i {
      color: #1890ff;
    }
    // .operation-icons {
    //   display: none;
    // }
    // &:hover .operation-icons {
    //   display: block;
    // }
  }
}
/deep/ .el-tree {
  height: calc(100vh - 16rem);
}
</style>