<template>
    <ap-container>
        <ap-aside margin="1111">
            <ap-aside-tree :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-split-panel></ap-split-panel>
        <ap-container>
            <ap-aside margin="1110" width="40%">
                <ap-table ref="tAbapTableFieldTableRef" :options.sync="tAbapTableFieldTable">
                    <template #operate="slotProps">
                        <el-button size="mini" type="primary" plain style="padding: 3px 9px;"
                                   @click="addLink(slotProps.rowData.fieldName)">
                            <i class="el-icon-d-arrow-right" />
                        </el-button>
                    </template>
                </ap-table>
            </ap-aside>
            <ap-main margin="1110">
                <ap-table ref="tAbapTableConditionRef" :options.sync="tAbapTableConditionOpt"></ap-table>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
import SapTable from './../components/SapTable'

export default {
    name: 'AbapTableCondition',
    components: {
        SapTable
    },
    data() {
        let tAbapTableFieldCols = [
            {
                prop: 'fieldName',
                label: '字段名',
                type: 'input',
                minWidth: 100
            }, {
                prop: 'text',
                label: '描述',
                type: 'input',
                add: false,
                edit: false,
                minWidth: 120,
                html: function (value, row) {
                    if (row.fdDesc != null && row.fdDesc != '') {
                        return "<span class='ap-color-green'>" + row.fdDesc + "</span>"
                    }
                    return value;
                }
            }, {
                prop: 'keyFlag',
                label: '主键',
                type: 'input',
                width: 50,
                align: "center",
            }, {
                label: '操作',
                type: "slot",
                slot: "operate",
                width: 50,
                align: "center"
            }
        ];
        let tAbapTableFieldTable = {
            title: "字段列表",
            columns: tAbapTableFieldCols,
            dataUrl: "/apd/abap/AbapTable/getTableFieldList",
            pagination: {pageSizes: [1000], pageSize: 1000},
            showSelection: false,
            params: () => {
                return {
                    tableName: this.selectedTable
                }
            }
        };

        let columns = [
            {
                prop: 'fdField',
                label: '字段',
                type: 'input',
                add: false,
                edit: false,
                width: 100,
            }, {
                prop: 'fdCondition',
                label: '条件',
                type: 'input',
                help: '字段参数格式：【#字段名#】',
                minWidth: 150,
                rules: [ {required: true, message: "必填", trigger: "blur"} ]
            }, {
                prop: 'fdRemark',
                label: '备注',
                type: 'input',
                minWidth: 100,
                rules: [ {required: true, message: "必填", trigger: "blur"} ]
            }, {
                prop: 'fdType',
                label: '频率',
                type: 'select',
                width: 80,
                align:"center",
                selectOptions:[{label:"必填", value:1},{label:"常用", value: 2},{label:"一般", value: 3}],
                rules: [ {required: true, message: "必填", trigger: "blur",type: 'number',} ]
            }, {
                prop: 'fdSort',
                label: '排序',
                type: 'input',
                width: 100,
            }
        ];
        let tableOpt = {
            title: "表条件",
            columns: columns,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apd/abap/TAbapTableCondition/getTAbapTableConditionGridList",
            saveUrl: "/apd/abap/TAbapTableCondition/saveTAbapTableConditionGridData",
            deleteUrl: "/apd/abap/TAbapTableCondition/deleteTAbapTableConditionGridData",
            toolbarBtn: ["edit", "del", "refresh", "save"],
            initData: false, // 默认false
            pagination: {pageSizes: [1000], pageSize: 1000},
            params: () => {
                return { tableName: this.selectedTable}
            }
        };

        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            selectedTable: "",
            tableFunction: "",
            tableSapText: "",
            // ----- 中间 -----
            tAbapTableFieldTable: tAbapTableFieldTable,
            // ----- 右侧 -----
            tAbapTableConditionOpt: tableOpt,
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "SAP常用表",
                showCheckbox: false,
                defaultExpandAll: false,
                showTitle: false,
                indent: 0,
                onClick: (data, node, comp) => {
                    if (data.fdType != 2) {
                        return
                    }
                    this.resetTableInfo();
                    this.tAbapTableFieldTable.title = data.fdName + " (" + data.fdDesc + ")";
                    this.tableFunction = data.fdFunction;
                    this.selectedTable = data.fdName;
                    this.$refs.tAbapTableFieldTableRef.refresh();
                    this.$refs.tAbapTableConditionRef.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 = "字段列表";
        },
        addLink(fieldName){
            let row = {
                fdTable: this.selectedTable,
                fdField: fieldName,
                fdCondition: "#" + fieldName + "#"
            }
            this.$refs.tAbapTableConditionRef.toggleAddRow(row);
        }

    }
}
</script>

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