<template>
    <div class="flex flex-pack-center flex-direction-column" v-loading="ctnLoading"
         style="height: 100%;background-color: #E9ECF1;">
        <div class="dev-header flex flex-pack-justify flex-align-center">
            <operate-panel/>
        </div>
        <keep-alive>
            <component :is="currentDesignPanel" class="flex-1 dev-main"/>
        </keep-alive>
    </div>
</template>

<script>
// import ComponentsPanel from './../ComponentsPanel'
import ComponentsPanel from '@/components/ComponentsPanel'
import CustomPanel from './../CustomPanel'
import BackgroundPanel from './../BackgroundPanel'
import OperatePanel from './../OperatePanel'
import TemplatePanel from './../TemplatePanel'
import ApiPanel from './../ApiPanel'
import DbDesignPanel from './../DbDesignPanel'
import ConfigPanel from './../ConfigPanel'
import OnlineCodePanel from './../OnlineCodePanel'
import DevDoc from './../DevDoc'
import apDevStore from './devStore'
import {setLocalData} from './DevUtil'

export default {
    name: 'Dev',
    components: {
        CustomPanel,
        BackgroundPanel,
        OperatePanel,
        TemplatePanel,
        ComponentsPanel,
        ApiPanel,
        DbDesignPanel,
        ConfigPanel,
        OnlineCodePanel,
        DevDoc,
    },
    store: apDevStore,
    data() {
        return {
            ctnLoading: true
        }
    },
    created() {
        this.initUserConfig();
    },
    computed: {
        // store数据修改，itemObj对应修改
        currentComps() {
            return this.$store.state.currentComps
        },
        currentDesignPanel() {
            return this.$store.state.tempData.currentDesignPanel
        }
    },
    methods: {
        initUserConfig() {
            this.$request({
                url: '/apd/config/TDevUserConfig/getTDevUserConfig',
                method: 'post',
                data: {}
            }).then(response => {
                setLocalData("userConfig", response.data);
                this.ctnLoading = false;
            });
        }
    }
}
</script>


<style scoped>
.dev-header {
    height: 40px;
    background-color: #3D76D3;
    color: white;
}

.dev-main {
    overflow: auto;
}
</style>