<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-dev-api" @tab-click="clickTabEvent">
                <template v-for="(item,index) in tabs">
                    <el-tab-pane :label="item.fdName" :name="getTabName(item)" :id="item.fdId" class="api-tab">
                        <el-tabs v-if="showTopTabs" v-model="toptabActiveName" type="card" @tab-click="clickTopTabEvent">
                            <template v-for="(item2,index2) in topTabs">
                                <el-tab-pane :label="item2.fdName" :name="getTabName(item2)">
                                    <ap-doc v-if="!showTopTabsCustom" v-model="doc"></ap-doc>
                                    <component v-else :is="customComponent" />
                                </el-tab-pane>
                            </template>
                        </el-tabs>

                        <div v-else>
                            <ap-doc v-if="!showTabsCustom" v-model="doc"></ap-doc>
                            <component v-else :is="customComponent" />
                        </div>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </ap-main>
    </ap-container>
</template>

<script>
// 批量导入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,
            showTabsCustom: false,
            showTopTabs: false,
            showTopTabsCustom: false,
            tabActiveName: "",
            tabs: [],
            doc: "",
            currentComponent: 'ApiLog',
            // ----- 右上侧 -----
            toptabActiveName: null,
            topTabs: [], // 左侧顶部
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                showTitle: false,
                onClick: (data, node, comp) => {
                    this.scrollTop();
                    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/dev/DevDoc/getDevDocApiList",
                    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/dev/DevDoc/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/dev/DevDoc/getDocText',
                method: 'post',
                data: {
                    id: this.selectedDocTypeId
                }
            }).then(response => {
                this.doc = response.data
            }).finally(() => {
                this.loading = false;
            })
        },
        getTabName(obj){
            // 分组
            if (obj.fdType == 1) {
                return '%%' + obj.fdId;
            }
            // 自定义组件
            if( obj.fdCustom != null && obj.fdCustom != '' && obj.fdCustom != undefined ) {
                return '##' + obj.fdCustom;
            } else {
                // 文档Id
                return obj.fdId;
            }
        },
        clickTabEvent(tab) {
            this.scrollTop();
            let name = tab._props.name;
            // 左上菜单
            if (name.startsWith('%%')) {
                this.$request({
                    url: '/apd/dev/DevDoc/getDocGroup',
                    method: 'post',
                    data: {
                        id: name.substring(2, name.length)
                    }
                }).then(response => {
                    this.topTabs = response.data
                })
                this.showTopTabsFn();
                return;
            }
            // 自定义组件
            if (name.startsWith('##')) {
                this.showTabsCustom = true;
                this.showTopTabs = false;
                this.customComponent = name.substring(2, name.length);
                return;
            }

            // 文档
            this.showTabsCustom = false;
            this.showTopTabs = false;
            this.selectedDocTypeId = name;
            this.getDocText();

        },
        clickTopTabEvent(tab) {
            this.scrollTop();
            let name = tab._props.name;
            // 自定义组件
            if (name.startsWith('##')) {
                this.showTopTabsCustom = true;
                this.customComponent = name.substring(2, name.length);
                return;
            }
            // 文档
            this.showTopTabsCustom = false;
            this.selectedDocTypeId = name;
            this.getDocText();
        },
        hideContentFn() {
            this.showDoc = false;
            this.showTabs = false;
            this.showTopTabs = false;
            this.doc = "";
            this.tabActiveName = "";
        },
        showCustomFn() {
            this.showCustom = true;
            this.showDoc = false;
            this.showTabs = false;
            this.showTopTabs = false;
        },
        showDocFn() {
            this.showCustom = false;
            this.showDoc = true;
            this.showTabs = false;
            this.showTopTabs = false;
        },
        showTabsFn() {
            this.showCustom = false;
            this.showDoc = false;
            this.showTabs = true;
            this.showTopTabs = false;
        },
        showTopTabsFn() {
            this.showCustom = false;
            this.showDoc = false;
            this.showTabs = true;
            this.showTopTabs = true;
        },
        scrollTop(){
            // 回到顶部
            let ctn = document.getElementsByClassName('el-tabs__content')
            if (ctn != null && ctn.length <1) {
                return;
            }
            ctn[0].scrollTop = 0;
        }
    }
}
</script>

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

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

.api-tabs /deep/ .el-tabs__item{
    padding: 0 15px 0 15px;
}

.api-tabs /deep/ .el-tabs__item {
    text-align: left;
}
</style>
