<template>
    <ap-container>
        <ap-aside margin="1111" style="width: 235px">
            <ap-aside-tree :options.sync="treeOptions">
                <span slot="tree" slot-scope="scope">
                    <span style="font-size: 12px;">{{ scope.data.fdName }}</span>
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel/>
        <ap-main margin="1110" v-loading="loading">
            <div v-if="showCustom">
                <component :is="customComponent" />
            </div>
            <ap-doc v-if="showDoc" v-model="doc"></ap-doc>
            <el-tabs v-if="showTabs" v-model="tabActiveName" tabPosition="left" class="api-tabs sap-abap-api" @tab-click="clickTabEvent">
                <template v-for="(item,index) in tabs">
                    <el-tab-pane :label="item.fdName" :name="item.fdId" :id="item.fdId" class="api-tab">
                        <ap-doc v-model="doc"></ap-doc>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </ap-main>
    </ap-container>
</template>

<script>
import {highlightAll} from "ap-util/util/DocUtil";

// 批量导入modules下的组件
const allComponents = require.context('./modules', false, /\.vue$/)
const apiComponents = {}
allComponents.keys().forEach(fileName => {
    const comp = allComponents(fileName)
    apiComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})

export default {
    name: 'ApiPanel',
    components: apiComponents,
    data() {
        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            selectedDocTypeId: "",
            // ----- 右侧 -----
            loading: false,
            customComponent: "",
            showCustom: false,
            showDoc: false,
            showTabs: false,
            tabActiveName: "",
            tabs: [],
            doc: "",
            currentComponent: 'ApiLog',
            clickTime: null,
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                showTitle: false,
                onClick: (data, node, comp) => {
                    this.selectedDocTypeId = data.fdId;
                    this.hideContentFn();
                    // 自定义组件
                    let customComponent = data.fdCustom;
                    if(customComponent != null && customComponent != ""){
                        this.customComponent = customComponent;
                        this.showCustomFn();

                        return;
                    }
                    // 单页
                    if (data.fdType == 2 || data.fdLayout == "one") {
                        this.showDocFn();
                        this.getDocText();
                        return;
                    }
                    // 左侧
                    this.getDocGroup();
                },
                loadOptions: {
                    url: "/apd/abap/AbapDoc/getAbapDocApiList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                },
                afterOpenAddDialog: (node) => {
                },
            };
            return treeOptions;
        },
        getDocGroup() {
            this.loading = true;
            this.showTabsFn();
            this.$request({
                url: '/apd/abap/AbapDoc/getDocGroup',
                method: 'post',
                data: {
                    id: this.selectedDocTypeId
                }
            }).then(response => {
                this.tabs = response.data
            }).finally(() => {
                this.loading = false;
            })
        },
        getDocText() {
            this.loading = true;
            this.$request({
                url: '/apd/abap/AbapDoc/getDocText',
                method: 'post',
                data: {
                    id: this.selectedDocTypeId
                }
            }).then(response => {
                this.doc = response.data
            }).finally(() => {
                this.loading = false;
            })
        },
        clickTabEvent(tab) {
            this.selectedDocTypeId = tab._props.name;
            this.getDocText();
        },
        hideContentFn() {
            this.showDoc = false;
            this.showTabs = false;
            this.doc = "";
            this.tabActiveName = "";
        },
        showCustomFn() {
            this.showCustom = true;
            this.showDoc = false;
            this.showTabs = false;
        },
        showDocFn() {
            this.showCustom = false;
            this.showDoc = true;
            this.showTabs = false;
        },
        showTabsFn() {
            this.showCustom = false;
            this.showDoc = false;
            this.showTabs = true;
        }
    }
}
</script>

<style scoped>
.api-tabs {
    display: flex;
    height: 100%;
}

.api-tabs /deep/ .el-tabs__content {
    flex: 1;
    overflow: scroll;
}
</style>
