<template>
    <ap-container style="height: 600px;background-color: #e9ecf1;">
        <ap-aside margin="0000" style="margin: 0">
            <ap-aside-tree :options.sync="treeOptions">
                <span slot="tree" slot-scope="scope" style="width: 100%">
                     <div class="abap-tree-node-left ap-ellipse">
                        {{ scope.data.fdName }}
                    </div>
                    <div style="font-size: 12px;">{{ scope.data.fdRemark }}</div>
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-main margin="0000">
            <ap-table ref="tAbapTableFieldTableRef" :options.sync="tAbapTableFieldTable"></ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'AbapTable',
    data() {
        let tAbapTableFieldCols = [
            {
                prop: 'fieldName',
                label: '字段名',
                type: 'input',
                minWidth: 120
            }, {
                prop: 'text',
                label: '描述',
                type: 'input',
                add: false,
                edit: false,
                minWidth: 200,
                html: function (value, row) {
                    if (row.fdRemark != null && row.fdRemark != '') {
                        return "<span class='ap-color-green'>" + row.fdRemark + "</span>"
                    }
                    return value;
                }
            }, {
                prop: 'keyFlag',
                label: '主键',
                type: 'input',
                width: 50,
                align: "center",
            }
        ];
        let tAbapTableFieldTable = {
            title: "字段列表",
            columns: tAbapTableFieldCols,
            dataUrl: "/apd/abap/AbapTable/getTableFieldList",
            pagination: {pageSizes: [1000], pageSize: 1000},
            showSelection: true,
            multiSelect: false,
            selectionChangeEvent: (row, column, event)=>{
                this.selectField(row);
            },
            params: () => {
                return {
                    tableName: this.selectedTable
                }
            }
        };
        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            selectedTable: "",
            tableFunction: "",
            tableSapText: "",
            // ----- 中间 -----
            tAbapTableFieldTable: tAbapTableFieldTable,
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "SAP常用表",
                showCheckbox: false,
                onClick: (data, node, comp) => {
                    if (data.fdType != 2) {
                        return
                    }
                    this.resetTableInfo();
                    this.tAbapTableFieldTable.title = data.fdName + " (" + data.fdRemark + ")";
                    this.tableFunction = data.fdFunction;
                    this.selectedTable = data.fdName;
                    this.$refs.tAbapTableFieldTableRef.refresh();
                },
                loadOptions: {
                    url: "/apd/abap/AbapTable/getTAbapTableList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                }
            };

            return treeOptions;
        },
        resetTableInfo() {
            this.tableSapText = "";
            this.tableFunction = "";
            this.selectedTable = "";
            this.tAbapTableFieldTable.title = "字段列表";
        },
        selectField(row) {
            this.$emit("update:searchSapTable", {
                tableName: this.selectedTable,
                fieldName: row[0].fieldName
            })
        }
    }
}
</script>

<style scoped>
.abap-tree-node-left {
    font-size: 13px;
    width: 50%;
    float: left;
}
</style>
