<template>
    <ap-container>
        <ap-aside margin="1111" width="300px">
            <ap-aside-tree ref="tableTreeRef" :options.sync="treeOptions">
                <span slot="tree" slot-scope="scope" style="width: 100%">
                    <div class="abap-tree-node-left ap-ellipse">
                        <span v-if="scope.data.fdType == 1" style="color: #1890ff;">{{ scope.data.fdName }}</span>
                        <span v-else>{{ scope.data.fdName }}</span>
                    </div>
                    <div style="font-size: 12px;">{{ scope.data.fdDesc }}</div>
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-container>
            <ap-aside margin="1110"  class="flex-1 flex-col" >
                <div class="flex-justify-between">
                    <div>
                        <span class="uml-title"><i class="el-icon-lianjie5"/>
                            {{umlName}}
                            <span style="color: #909399;font-weight: normal;font-size:12px;">{{umlRemark}}</span>
                        </span>
                    </div>
                    <div>
                        <el-button-group>
                            <el-button v-show="showLineFlag" type="primary" size="mini" class="uml-btn" icon="el-icon-lianjie6" @click="showLineEvent">显示连线</el-button>
                            <el-button v-show="!showLineFlag" type="danger" size="mini" class="uml-btn" icon="el-icon-lianjie6" @click="hideLineEvent">隐藏连线</el-button>
                            <el-button type="success" size="mini" class="uml-btn" icon="el-icon-lianjie6" @click="refreshLineEvent">刷新连线</el-button>
                        </el-button-group>
                        &nbsp;
                        <el-button-group>
                            <el-button type="primary" size="mini" class="uml-btn" icon="el-icon-plus" @click="addUml">新建</el-button>
                            <el-button type="primary" size="mini" class="uml-btn" icon="el-icon-floppy-o" @click="saveUml">保存</el-button>
                        </el-button-group>
                    </div>
                </div>

                <div id="umlCtn" style="border: 1px solid #badeff;" class="flex-1 flex-col">
                    <template v-for="m in rowCount">
                        <div class="flex-justify-start">
                            <template v-for="n in colCount">
                                <div style="width: 20px;height: 20px" class="flex-col-justify-around">
                                    <draggable v-model="tables[m + '-' +n]" group="dragTable" animation="100" @start="onStart" @end="dragEndEvent" style="height: 100%;width: 100%">
                                        <div v-for="element in tables[m + '-' +n]" :key="element.fdId" :id="element.fdTable" class="table-ctn" @click="clickUml">
                                            <div class="flex-justify-between">
                                                <div style="font-weight: bold;color: #1682e6;">
                                                    {{element.fdTable}}
                                                </div>
                                                <div>
                                                    <i class="el-icon-example table-ctn-icon" style="margin-left: 3px;" @click="showDetail(element.fdTable)"/>
                                                </div>
                                            </div>
                                            <div>
                                                {{element.tableDesc}}
                                            </div>
                                        </div>
                                    </draggable>
                                </div>
                            </template>
                        </div>
                    </template>
                    </div>
            </ap-aside>
            <ap-main margin="1110" style="width: 200px;flex: initial;">
                <el-tabs v-model="umlActiveName" :stretch="true">
                    <el-tab-pane label="自定义" name="custom">
                        <ap-aside-tree ref="umlTreeCustomRef" :options.sync="umlTreeCustomOptions">
                        <span slot="tree" slot-scope="scope" style="width: 100%">
                             <div class="ap-ellipse" style="font-size: 15px;">
                                {{ scope.data.fdName }}
                            </div>
                        </span>
                        </ap-aside-tree>
                    </el-tab-pane>
                    <el-tab-pane label="常用" name="common">
                        <ap-aside-tree ref="umlTreeCommonRef" :options.sync="umlTreeCommonOptions">
                        <span slot="tree" slot-scope="scope" style="width: 100%">
                             <div class="ap-ellipse" style="font-size: 15px;">
                                {{ scope.data.fdName }}
                            </div>
                        </span>
                        </ap-aside-tree>
                    </el-tab-pane>
                </el-tabs>
            </ap-main>
        </ap-container>

        <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.isVisible"
                   width="600px">
            <el-form ref="tAbapUmlFormRef" :model="umlForm" v-loading="dialogInfo.formIsLoading"
                     label-width="80px" :inline="true">

                <el-form-item label='父类型' prop='fdParentId'>
                    <el-select v-model="umlForm.fdParentId" style="width: 165px;">
                        <template v-for="item in umlType">
                            <el-option :value="item.fdId" :label="item.fdName"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <template v-if="umlForm.fdParentId == null || umlForm.fdParentId == ''">
                    <el-form-item label='分类' prop='fdCustom'>
                        <el-select v-model="umlForm.fdCustom" style="width: 165px;">
                            <el-option :value="0" label="常用"></el-option>
                            <el-option :value="1" label="自定义"></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label= ' '></el-form-item>
                </template>
                <el-form-item label='名称' prop='fdName'>
                    <el-input v-model='umlForm.fdName'></el-input>
                </el-form-item>
                <el-form-item label='连线式样' prop='fdPath'>
                    <el-select v-model="umlForm.fdPath" style="width: 165px;">
                        <el-option value="fluid" label="流线-fluid(默认)"></el-option>
                        <el-option value="straight" label="直线-straight"></el-option>
                        <el-option value="grid" label="折线-grid"></el-option>
                        <el-option value="arc" label="弧线1-arc"></el-option>
                        <el-option value="magnet" label="弧线2-magnet"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='排序' prop='fdSort'>
                    <el-input v-model='umlForm.fdSort'></el-input>
                </el-form-item>
                <el-form-item label= ' '></el-form-item>
                <el-form-item label=''></el-form-item>
                <el-form-item label='备注' prop='fdRemark'>
                    <el-input type="textarea" v-model='umlForm.fdRemark'></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button type="danger"  @click="deleteTAbapUmlForm">删 除</el-button>
                <el-button type="primary" @click="saveTAbapUmlForm"
                           :loading="dialogInfo.saveBtnIsLoading">保 存</el-button>
            </span>
        </el-dialog>

        <el-drawer title="" :visible.sync="showDetailFlag" :with-header="false" size="800px" class="sap-abap-drawer">
            <div class="flex-col" style="padding: 10px;width: 100%;height: 100%;">
                <div class="flex-justify-start" style="border-bottom: 1px solid #e9ecf1;" >
                    <div style="width: 49%;">
                        <span style="color:#497fd5; font-size: 15px;font-weight: bold;width: 50%"><i class="el-icon-table"/>&nbsp;&nbsp;{{detailInfo.fdName }}：{{ detailInfo.fdDesc }}</span>
                        <br>
                        <span style="color:#909399;font-size: 13px;">{{ detailInfo.fdFunction }}</span>
                    </div>
                    <div style="margin-left: 2%;">
                        <span style="color:#497fd5; font-size: 15px;font-weight: bold;"><i class="el-icon-lianjie6" />&nbsp;&nbsp;关联表 - 关联条件</span>
                    </div>
                </div>
                <div class="flex-1 flex-justify-start" style="height: 100%" >
                    <div style="height: 100%;width: 49%" class="flex-col">
                        <sap-table-field ref="umlTableFieldTreeRef" :options.sync="fieldTreeOptions"></sap-table-field>
                    </div>
                    <div style="height: 100%;width: 49%;margin-left: 2%;">
                        <div class="flex-col" v-loading="linkTableTreeLoadingFlag" style="height: 100%">
                            <div class="flex-center">
                                <el-input placeholder="关键字过滤" v-model="linkTableTreeFilterText" class="flex-1"></el-input>
                            </div>
                            <el-tree class="flex-1" style="overflow: auto;height: 100%" ref="linkTableTreeRef" node-key="fdId" :data="linkTableTreeData"
                                     props="{children: 'children',label: 'fdTable'}" :show-checkbox="false" :default-expand-all="true" :check-on-click-node="false"
                                    :highlight-current="true" :expand-on-click-node="false" :check-strictly="false" :filter-node-method="linkTableFilterTreeNode">
                                <template slot-scope="{ node, data }">
                                    <div v-if="data.tableDesc != null && data.tableDesc != ''" style="width: 100%">
                                        <div class="ap-ellipse" style="width: 50%;float: left;color:#497fd5; font-size: 13px;font-weight: bold;">
                                            {{ data.fdTable }}
                                        </div>
                                        <div style="color:#497fd5; font-size: 13px;font-weight: bold;">
                                            {{ data.tableDesc }}
                                        </div>
                                    </div>
                                    <span v-else style="font-size: 12px;">
                                         {{ data.fdCondition }}
                                    </span>
                                </template>
                            </el-tree>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </ap-container>

</template>

<script>
// import "/public/frame/js/leader-line.min";
import draggable from 'vuedraggable'
import {convertToArrayData, convertToTreeData} from "ap-util/util/DataUtil";
import SapTableField from './../components/SapTableField'
export default {
    name: 'UmlPanel',
    components: {
        draggable,
        SapTableField
    },
    data() {
        return {
            selectedTable: "",
            treeOptions: this.getTreeOption(),
            // ----- 中间 -----
            tables: {}, // uml表-drag结构
            linkList: [], // uml表连接关系
            lines: [],
            rowCount: 1,
            colCount: 1,
            umlRemark: "",
            umlName: "未定义名称",
            showLineFlag: true,
            dialogInfo: {
                title: "保存UML",
                isVisible: false,
                saveBtnIsLoading: false,
                formIsLoading: false,
                fdId: ""
            },
            umlForm: this.getInitUmlForm(),
            umlType: this.getUmlTypeList(),
            showDetailFlag: false,
            detailInfo: {},
            // 弹框
            fieldTreeOptions: this.getFieldTreeOptions(),
            linkTableTreeLoadingFlag: false,
            linkTableTreeFilterText: "",
            linkTableTreeData: [],
            // ----- 右侧 -----
            umlActiveName: "custom",
            umlTreeCommonOptions: this.getUmlTreeOptions(0),
            umlTreeCustomOptions: this.getUmlTreeOptions(1),


        }
    },
    watch: {
        currentDesignPanel: {
            handler: 'changeCurrentDesignPanel',
            immediate: true,
        },
        linkTableTreeFilterText(val) {
            this.$refs.linkTableTreeRef.filter(val);
        }

    },
    computed: {
        currentDesignPanel() {
            return this.$store.state.tempData.currentDesignPanel
        }
    },
    beforeMount() {
        this.addJsLib();
    },
    mounted() {
        this.initUmlLayout();
    },
    beforeDestroy() {
        this.hideLine();
    },
    methods: {
        addJsLib(){
            let script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "./frame/js/leader-line.min.js";
            document.body.appendChild(script);
            script.onload = ()=>{
                console.log("js load success...");
            }
            script.onerror = ()=>{
                console.log("js load error...");
            }
        },
        changeCurrentDesignPanel(){
            if (this.currentDesignPanel == "uml-panel") {
                this.loadLine();
            } else {
                this.hideLine();
            }
        },
        getTreeOption() {
            let treeOptions = {
                showCheckbox: true,
                defaultExpandAll: false,
                showTitle: false,
                indent: 0,
                onCheck: (data, node, comp, halfCheckedKeys, checkedKeys) => {
                    this.treeCheckEvent(data);
                },
                loadOptions: {
                    url: "/apd/abap/AbapTable/getTAbapTableList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {

                    },
                }
            };

            return treeOptions;
        },
        treeCheckEvent(data){
            this.selectedTable = data.fdName;

            let checkedNodes = this.$refs.tableTreeRef.getCheckedNodes();

            let tableList = this.getTablesForArr();

            // 添加新增节点
            for (let i = 0; i < checkedNodes.length; i++) {
                // 父节点不判断
                if (checkedNodes[i].fdType == 1) {
                   continue;
                }

                // 判断是否已经添加
                let hasAdd = false;
                for (let j = 0; j < tableList.length; j++) {
                    if (tableList[j].fdTable == checkedNodes[i].fdName) {
                        hasAdd = true;
                        break;
                    }
                }
                if (!hasAdd) {
                    this.tables["1-1"].push({
                        fdId: (new Date()).getTime() + checkedNodes[i].fdName,
                        fdTable: checkedNodes[i].fdName,
                        tableDesc: checkedNodes[i].fdDesc,
                        fdRow: 1,
                        fdCol: 1
                    })
                }
            }

            // 删除一个表
            for (let i = 0; i < tableList.length; i++) {
                let isExit = false;
                for (let j = 0; j < checkedNodes.length; j++) {
                    if (tableList[i].fdTable == checkedNodes[j].fdName) {
                        isExit = true;
                        break
                    }
                }
                if (!isExit) {
                    // 不存在删除
                    let tables = this.tables;
                    for (let tableKey in tables) {
                        let items = tables[tableKey];
                        for (let m = 0; m < items.length; m++) {
                            if (items[m].fdTable == tableList[i].fdTable) {
                                this.tables[tableKey].splice(m, 1);
                                break;
                            }
                        }
                    }
                }

            }

            this.$forceUpdate();
            // 刷新线条
            this.refreshLineEvent();
        },
        refreshTreeCheckStatus(){
            let todoCheckTables = this.getTablesForArr();
            let checkedNodes = this.$refs.tableTreeRef.getCheckedNodes();
            let treeData = convertToArrayData(this.$refs.tableTreeRef.getData());
            // 选中行
            for (let i = 0; i < todoCheckTables.length; i++) {
                for (let j = 0; j < treeData.length; j++) {
                    if (treeData[j].fdName == todoCheckTables[i].fdTable) {
                        this.$refs.tableTreeRef.setChecked(treeData[j].fdId, true);
                        break
                    }
                }
            }
            // 取消无需选中行
            for (let m = 0; m < checkedNodes.length; m++) {
                let needCheck = false;
                for (let n = 0; n < todoCheckTables.length; n++) {
                    if (checkedNodes[m].fdName == todoCheckTables[n].fdTable) {
                        needCheck = true;
                        break
                    }
                }
                this.$refs.tableTreeRef.setChecked(checkedNodes[m].fdId, needCheck);
            }
        },
        // 清空选中状态
        clearTreeCheckStatus(){
            let checkedNodes = this.$refs.tableTreeRef.getCheckedNodes();
            for (let m = 0; m < checkedNodes.length; m++) {
                this.$refs.tableTreeRef.setChecked(checkedNodes[m].fdId, false);
            }
        },
        getUmlTreeOptions(isCustom){
            let treeOptions = {
                showCheckbox: false,
                defaultExpandAll: false,
                showTitle: false,
                indent: 0,
                onClick: (data, node, comp) => {
                    this.selectUml(data);
                },
                loadOptions: {
                    url: "/apd/abap/AbapUml/getTAbapUmlTypeList",
                    data: () => {
                        return {
                            fdCustom: isCustom
                        }
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                }
            };
            return treeOptions;
        },
        initRowAndCol(){
            let tables = this.tables;
            for (let tableKey in tables) {
                let items = tables[tableKey];
                for (let i = 0; i < items.length; i++) {
                    let arr = tableKey.split("-");
                    items[i].fdRow = arr[0];
                    items[i].fdCol = arr[1];
                }
            }
        },
        //开始拖拽事件
        onStart(e){
            console.log(e);
        },
        //拖拽结束事件
        dragEndEvent(e) {
            // 更新数据结果
            this.initRowAndCol();

            // 强制重新页面
            this.$forceUpdate();
            this.$nextTick(()=>{
                this.loadLine();
            })
        },
        clickUml(e){
            // console.log(e);
        },
        showDetail(tableName){
            this.showDetailFlag = true;

            this.$request({
                url: '/apd/abap/AbapTable/getTAbapTableByFdTable',
                method: 'post',
                data: {
                    table: tableName
                }
            }).then(response => {
                this.detailInfo = response.data;
                console.log(this.detailInfo);
            });
            this.fieldTreeOptions = this.getFieldTreeOptions(tableName);
            this.linkTableTreeData = this.getLinkTableTreeData(tableName);
            this.$forceUpdate();
            this.$nextTick(()=>{
                 this.$refs.umlTableFieldTreeRef.refresh();
            })
        },
        getFieldTreeOptions(tableName){
            return {
                selectedTable: tableName,
                showCheckbox: false, // 可选中
                checkEvent: (data, p2) => {

                },
                clickEvent: (data) => {
                },
            }
        },
        // ------- 中间 -------
        initUmlLayout(){
            let ctnHeight = 20;
            let ctnWidth = 20;
            let ctn = document.getElementById("umlCtn");
            let colCount = Math.trunc(ctn.offsetWidth/ctnWidth);
            let rowCount = Math.trunc(ctn.offsetHeight/ctnHeight);
            this.colCount = colCount;
            this.rowCount = rowCount;
            // 构造空数组
            for (let m =1; m<=rowCount; m++) {
                for (let n =1; n<=colCount; n++) {
                    this.tables[m+"-"+n] = [];
                }
            }
        },
        selectUml(data){
            this.initUmlLayout();
            this.umlForm = data;

            this.umlName = "加载中......";
            this.umlRemark = "";
            this.$request({
                url: '/apd/abap/AbapUml/getUml',
                method: 'post',
                data: {
                    typeId: data.fdId
                }
            }).then(response => {
                this.linkList = response.data.linkList;
                this.initTables(response.data.tableList);
                this.refreshTreeCheckStatus();
                this.loadLine();
                this.umlName = data.fdName;
                this.umlRemark = data.fdRemark;
            });
        },
        // 转换list数据为drag格式
        initTables(list){
            for (let i = 0; i < list.length; i++) {
                let row = list[i].fdRow;
                let col = list[i].fdCol;
                let table = this.tables[`${row}-${col}`];
                if (table == null) {
                    this.$message.error(`当前UML显示区域太小！【${list[i].fdTable} ${list[i].tableDesc}】无法显示！`);
                    continue;
                }
                table.push({
                    fdId: list[i].fdId,
                    fdTable: list[i].fdTable,
                    tableDesc: list[i].tableDesc,
                    fdRow: row,
                    fdCol: col
                });
            }

            this.$forceUpdate();
        },
        drawLines(lines){
            for (let i = 0; i < lines.length; i++) {
                let item = lines[i];
                let startId = item.fdTable;
                let endId = item.linkTable;

                let startPlug = "";
                let endPlug = "";
                switch (item.relation) {
                    case "1:1":
                        startPlug = "behind";
                        endPlug = "behind";
                        break;
                    case "1:n":
                        startPlug = "behind";
                        endPlug = "arrow1";
                        break;
                    case "n:1":
                        startPlug = "arrow1";
                        endPlug = "behind";
                        break;
                    case "n:n":
                        startPlug = "arrow1";
                        endPlug = "arrow1";// 箭头
                        break;
                }

                // 连线
                let fdPath = this.umlForm.fdPath;
                let pathStr = fdPath == null || fdPath == "" ? "fluid" : fdPath;

                let line = new LeaderLine({
                    start: document.getElementById(startId),
                    end: document.getElementById(endId),
                    startPlug: startPlug,
                    endPlug: endPlug,
                    color: '#2a8be7', // 颜色
                    size: 2, // 线大小
                    dash: false,// 虚线
                    middleLabel: LeaderLine.pathLabel(item.relation), // 线上文本
                    path: pathStr,
                });
                this.lines.push(line);
            }
        },
        // 加载线条到画布
        loadLine(){
            this.hideLine();
            let lineArr = [];
            let tableList = this.getTablesForArr();
            let linkList = this.linkList;
            for (let i = 0; i < linkList.length; i++) {
                let linkTable = linkList[i].linkTable;
                for (let j = 0; j < tableList.length; j++) {
                    if (linkTable == tableList[j].fdTable) {
                        lineArr.push(linkList[i]);
                        break;
                    }
                }
            }

            // lineArr去重
            let lines = []
            for (let i = 0; i < lineArr.length; i++) {
                let hasAdd = false;
                for (let j = 0; j < lines.length; j++) {
                    if (lines[j].linkKey == lineArr[i].linkKey) {
                        hasAdd = true;
                        break;
                    }
                }

                if (!hasAdd) {
                    lines.push(lineArr[i])
                }
            }

            this.$forceUpdate();
            this.$nextTick(()=>{
                this.drawLines(lines)
            })
        },
        showLineEvent(){
            this.loadLine();
            this.showLineFlag = false;
        },
        getTablesForArr(){
            let tables = this.tables;
            let tablesArr = [];
            for (let tableKey in tables) {
                let items = tables[tableKey];
                for (let i = 0; i < items.length; i++) {
                    tablesArr.push(items[i]);
                }
            }
            return tablesArr;
        },
        refreshLineEvent(){
            this.$request({
                url: '/apd/abap/AbapUml/getRelationByTables',
                method: 'post',
                data: {
                    tables: JSON.stringify(this.getTablesForArr())
                }
            }).then(response => {
                this.linkList = response.data;
                console.log(11);
                this.showLineEvent();
            })
        },
        hideLineEvent(){
            this.hideLine();
            this.showLineFlag = true;
        },
        hideLine(){
            let lines = this.lines;
            for (let i = 0; i < lines.length; i++) {
                lines[i].hide("none",{duration: 0, timing: 'linear'});
            }
        },

        // 重置表单
        getInitUmlForm() {
            return JSON.parse(JSON.stringify({
                fdId: '',
                fdParentId: '',
                fdName: '',
                fdPath: '',
                fdCustom: '',
                fdRemark: '',
                fdSort: '',
            }));
        },
        addUml(){
            this.umlRemark = "";
            this.umlName = "未定义名称";
            this.umlForm = this.getInitUmlForm();
            this.initUmlLayout();
            this.hideLine();
            this.linkList=[];
            this.clearTreeCheckStatus();
            this.$forceUpdate();
        },
        saveUml(){
            this.dialogInfo.isVisible = true;
        },
        // 删除项
        deleteTAbapUmlForm(){
            let fdId = this.umlForm.fdId;
            if (fdId == null || fdId == "") {
                this.$message.error("删除失败，该数据未保存！");
                return;
            }
            this.$request({
                url: '/apd/abap/AbapUml/deleteTAbapUmlByFdId',
                method: 'post',
                data: {
                    fdId : fdId
                }
            }).then(response => {
                this.$message.success(`删除成功！`)
                this.$refs.umlTreeCustomRef.loadTreeData();
                this.$refs.umlTreeCommonRef.loadTreeData();
                this.dialogInfo.isVisible = false;
                this.clearAll();
            })
        },

        getUmlTypeList() {
            this.$request({
                url: '/apd/abap/AbapUml/getUmlTypeList',
                method: 'post',
                data: {}
            }).then(response => {
                this.umlType = response.data;
            })
        },
        saveTAbapUmlForm() {
            // 表单rules认证
            this.$refs.tAbapUmlFormRef.validate((valid) => {
                if (!valid) {
                    this.$message.error('数据校验错误！');
                    return false;
                }
                this.dialogInfo.saveBtnIsLoading = true;

                if (this.umlForm.fdRemark == null) {
                    this.umlForm.fdRemark = "";
                }
                if (this.umlForm.fdSort == null) {
                    this.umlForm.fdSort = "";
                }

                // 添加数据
                this.$request({
                    url: '/apd/abap/AbapUml/saveAbapUml',
                    method: 'post',
                    data: {
                        typeStr: JSON.stringify(this.umlForm),
                        umlStr: JSON.stringify(this.getTablesForArr()),
                    }
                }).then(response => {
                    this.$message.success(`保存成功！`)
                    this.$refs.umlTreeCustomRef.loadTreeData();
                    this.$refs.umlTreeCommonRef.loadTreeData();
                    this.dialogInfo.isVisible = false;
                    this.getUmlTypeList();
                    this.selectUml(response.data);
                }).finally(() => {
                    this.dialogInfo.saveBtnIsLoading = false;
                })
            });
        },
        // ----------- 弹框 ----------
        linkTableFilterTreeNode(value, data) {
            if (!value) return true;
            if (data.fdTable != null &&data.fdTable.indexOf(value) !== -1) {
                return true;
            }
            if (data.fdCondition != null &&data.fdCondition.indexOf(value) !== -1) {
                return true;
            }
            return false;
        },
        getLinkTableTreeData(tableName){
            this.$request({
                url: '/apd/abap/TAbapTableLink/getAbapTableLinkTree',
                method: 'post',
                data: {
                    tableName: tableName
                }
            }).then(response => {
                this.linkTableTreeData = convertToTreeData(response.data, {
                    idKey: "fdId",
                    parentKey: "parentId",
                    childrenKey: "children"
                });
            });
        }
    }

}
</script>

<style lang="scss" scoped>
.abap-tree-node-left {
    font-size: 13px;
    width: 50%;
    float: left;
}
.uml-title {
    line-height: 20px;
    color:#497fd5;
    font-size: 13px;
    font-weight: bold;
}
.uml-btn {
    padding: 5px;
}

.table-ctn {
    position: absolute;
    line-height: 18px;
    width: 150px;
    padding: 0 5px;
    font-size: 12px;
    border: 1px solid #46a6ff;
    border-radius: 4px;
    background-color: #f4f9fe;
    cursor: move;
}

.table-ctn-icon {
    cursor: pointer;
    color: #1682e6;
}
.table-ctn-icon:hover {
    color: #5fa5e7;
}
</style>