<template>
    <ap-container>
        <ap-aside margin="1111" width="350px">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tAbapTable" :inline="true" label-width="80px"
                         :model="tAbapTableForm" :rules="tAbapTableRules">
                    <el-form-item label="父类别">
                        <el-select v-model="tAbapTableForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""/>
                            <el-option
                                v-for="item in typeList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label='类型' prop='fdType'>
                        <el-select v-model="tAbapTableForm.fdType" filterable placeholder="请选择类型">
                            <el-option key="1" label="分组" :value=1></el-option>
                            <el-option key="2" label="表" :value=2></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tAbapTableForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='表描述' prop='fdDesc' v-show="tAbapTableForm.fdType == 2">
                        <el-input v-model='tAbapTableForm.fdDesc'></el-input>
                    </el-form-item>
                    <el-form-item label='表作用' prop='fdFunction' v-show="tAbapTableForm.fdType == 2">
                        <el-input v-model='tAbapTableForm.fdFunction' type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input-number v-model="tAbapTableForm.fdSort" controls-position="right"/>
                    </el-form-item>
                </el-form>
                <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-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110">
                <div class="flex-col" style="color:#909399;font-size: 14px;">
                    <span>简短描述：{{ tableSapText }}</span>
                    <el-input v-model="tableFunction" :disabled="true" type="textarea"></el-input>
                </div>
            </ap-header>
            <ap-main margin="0110">
                <ap-table ref="tAbapTableFieldTableRef" :options.sync="tAbapTableFieldTable"></ap-table>
            </ap-main>
        </ap-container>

        <el-drawer title="" :visible.sync="showSqlDataTable" :with-header="false" size="800px" class="sap-abap-drawer">
            <div class="flex-col" style="padding: 10px;width: 100%;height: 100%;" v-loading="sqlDataTableLoadingFlag">
                <div>
                    预览行数：<el-input v-model="dataLimit" placeholder="" style="width: 100px"></el-input>
                </div>
                <div class="flex-1" style="height: 100%;overflow: auto;">
                    <el-table :data="sqlData" border style="width: 100%" height="100%" fixed>
                        <el-table-column fixed type="index">
                        </el-table-column>
                        <template v-for="item in sqlDataHeader">
                            <el-table-column :prop="item" :label="item" :show-overflow-tooltip="true"></el-table-column>
                        </template>
                    </el-table>
                </div>
            </div>
        </el-drawer>
    </ap-container>
</template>

<script>
export default {
    name: 'AbapTable',
    data() {
        let tAbapTableFieldCols = [
            {
                prop: 'fieldName',
                label: '字段名',
                type: 'input',
                add: false,
                edit: false,
                minWidth: 80,
                sortable: 'local'
            }, {
                prop: 'title',
                label: '标题',
                type: 'input',
                add: false,
                edit: false,
                minWidth: 80
            }, {
                prop: 'text',
                label: '简短描述',
                type: 'input',
                add: false,
                edit: false,
                minWidth: 120
            }, {
                prop: 'fdDesc',
                label: '自定义-描述',
                type: 'input',
                minWidth: 120,
                sortable: 'local',
            }, {
                prop: 'fdFunction',
                label: '自定义-作用',
                type: 'input',
                minWidth: 120
            }, {
                prop: 'fdType',
                label: '自定义-标识',
                type: 'select',
                width: 100,
                align:"center",
                sortable: 'local',
                selectOptions:[{label:" ", value: 0},{label:"查询常用", value:1},{label:"条件常用", value:2},],
                html: function (value, row) {
                    switch (value) {
                        case 1:
                            return "<div class='ap-tag-success'>查询常用</div>";
                        case 2:
                            return "<div class='ap-tag-warning'>条件常用</div>";

                    }
                    return '';
                }
            }, {
                prop: 'dataType',
                label: '数据类型',
                type: 'input',
                add: false,
                edit: false,
                width: 80
            }, {
                prop: 'fieldLength',
                label: '长度',
                type: 'input',
                add: false,
                edit: false,
                width: 60,
                align:"right",
            }, {
                prop: 'fieldDecimal',
                label: '小数位',
                type: 'input',
                add: false,
                edit: false,
                width: 60,
                align:"right",
            }, {
                prop: 'keyFlag',
                label: '主键',
                type: 'input',
                add: false,
                edit: false,
                width: 50,
                align:"center",
            }, {
                prop: 'notNull',
                label: '非空',
                type: 'input',
                add: false,
                edit: false,
                width: 50,
                align:"center",
            },
        ];
        let tAbapTableFieldTable = {
            title: "字段列表",
            columns: tAbapTableFieldCols,
            dataUrl: "/apd/abap/AbapTable/getTableFieldList",
            saveUrl: "/apd/abap/AbapTable/saveTAbapTableFieldGridData",
            editPk: "fdId,fieldName,fdType,fdDesc", //默认fdId
            rowKey: "fieldName",
            toolbarBtn: [{btnType: "primary", text: "预览", icon: "el-icon-magic-stick", onClick: this.previewTable},
                "separator", "edit", "refresh", "save"],
            pagination: {pageSizes: [1000],pageSize: 1000},
            params: () => {
                return {
                    tableName: this.selectedTable
                }
            }
        };
        return {
            // ----- 左侧树 -----
            defaultExpandedKeys: [],
            treeOptions: this.getTreeOption(),
            typeList: [],
            tAbapTableForm: {},
            tAbapTableRules: {},
            selectedTable: "",
            selectedTableId: "",
            tableFunction: "",
            tableSapText: "",
            // ----- 右侧 -----
            tAbapTableFieldTable: tAbapTableFieldTable,
            // 预览
            showSqlDataTable: false,
            sqlDataTableLoadingFlag: false,
            dataLimit: 100,
            sqlDataHeader: [],
            sqlData: [],
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "SAP常用表",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "SAP常用表",
                showCheckbox: false,
                defaultExpandAll: false,
                defaultExpandedKeys: [],
                renderAfterExpand: true,
                sortByTree: true,
                sortByDrag: true,
                indent: 0,
                onClick: (data, node, comp) => {
                    if (data.fdType != 2) {
                        this.defaultExpandedKeys = [data.fdId];
                        return
                    }
                    this.resetTableInfo();
                    this.tAbapTableFieldTable.title = data.fdName + " (" + data.fdDesc + ")";
                    this.tableFunction = data.fdFunction;
                    this.selectedTable = data.fdName;
                    this.selectedTableId = data.fdId;
                    this.$refs.tAbapTableFieldTableRef.refresh();
                    this.getSapTableText();
                },
                loadOptions: {
                    url: "/apd/abap/AbapTable/getTAbapTableList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.treeOptions.defaultExpandedKeys = this.defaultExpandedKeys;
                        this.$forceUpdate();
                        this.getTreeGroup();
                    },
                },
                editOptions: {
                    url: "/apd/abap/AbapTable/getTAbapTableByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tAbapTableForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apd/abap/AbapTable/insertTAbapTable",
                insertData: () => {
                    return this.tAbapTableForm
                },
                updateUrl: "/apd/abap/AbapTable/updateTAbapTable",
                updateData: () => {
                    return this.tAbapTableForm
                },
                deleteUrl: "/apd/abap/AbapTable/deleteTAbapTableByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apd/abap/AbapTable/updateTAbapTableSort',
                updateSortListUrl: '/apd/abap/AbapTable/updateTAbapTableSortList',
                resetForm: () => {
                    this.tAbapTableForm = {
                        fdParentId: '',
                        fdType: '',
                        fdName: '',
                        fdDesc: '',
                        fdFunction: '',
                        fdSort: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.tAbapTableForm.fdParentId = node.fdId; // 自动赋值表单的父类型
                },
                filterNodeMethod: (value, data) => {
                    if (!value) return true;
                    if(data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    if(data["fdDesc"] != null && data["fdDesc"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                }
            };

            return treeOptions;
        },
        getTreeGroup() {
            this.$request({
                url: '/apd/abap/AbapTable/getTableGroupList',
                method: 'post',
                data: {}
            }).then(response => {
                this.typeList = response.data
            })
        },
        getSapTableText() {
            this.$request({
                url: '/apd/abap/AbapTable/getSapTableText',
                method: 'post',
                data: {
                    tableName: this.selectedTable
                }
            }).then(response => {
                this.tableSapText = response.data
            })
        },
        resetTableInfo() {
            this.tableSapText = "";
            this.tableFunction = "";
            this.selectedTable = "";
            this.selectedTableId = "";
            this.tAbapTableFieldTable.title = "字段列表";
        },
        previewTable(){
            if (this.selectedTable == null || this.selectedTable == '') {
                this.$message.error("请选择表");
                return;
            }

            this.showSqlDataTable = true;
            this.sqlDataTableLoadingFlag = true;
            this.sqlData=[];
            this.sqlDataHeader=[];
            let selectStr = "";
            let selectionKeys = this.$refs.tAbapTableFieldTableRef.getSelectionKeys();
            if (selectionKeys == null || selectionKeys.length < 1) {
                selectStr = "*";
            } else {
                selectStr = selectionKeys.join(",");
            }
            console.log(selectionKeys);
            this.$request({
                url: '/apd/abap/TAbapSql/getDataBySql',
                method: 'post',
                data: {
                    sqlStr: `SELECT ${selectStr} FROM saphanadb.${this.selectedTable}`,
                    dataLimit: this.dataLimit
                }
            }).then(response => {
                this.sqlData = response.data.data;
                this.sqlDataHeader = response.data.header;
            }).finally(() => {
                this.sqlDataTableLoadingFlag = false;
            })
        }

    }
}
</script>

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