<template>
     <div  id="gaea-editor-vue">
          <Container>
            <LeftContainer>
                <NavbarContainer>
                    <NavbarContainerLeft :style="{height:`${applicationState.navbarHeight}px`}">
                        <component :is="item" v-for="(item,index) in pluginsBelongKeys['navbarLeft']" :key="index"></component>
                    </NavbarContainerLeft>
                    <NavbarContainerRight>
                        <component :is="item" v-for="(item,index) in pluginsBelongKeys['navbarRight']" :key="index"></component>
                    </NavbarContainerRight>
                </NavbarContainer>
                <ViewportContainer>
                    <ViewportContainerLeft :theme="{hidden:applicationState.isPreview}">
                        <ViewportContainerLeftTop>
                            <component :is="item" v-for="(item,index) in pluginsBelongKeys['leftBarTop']" :key="index"></component>
                        </ViewportContainerLeftTop>
                        <ViewportContainerLeftBottom>
                            <component :is="item" v-for="(item,index) in pluginsBelongKeys['leftBarBottom']" :key="index"></component>
                        </ViewportContainerLeftBottom>
                    </ViewportContainerLeft>
                    <ViewportContainerRight :theme="{showLeft:applicationState.leftTool}" :style="applicationState.viewportContainerStyle">
                        <ToolsContainer :theme="{fullScreen:applicationState.rightTool}">
                          <ToolsContainerLeft >
                            <component :is="item" v-for="(item,index) in pluginsBelongKeys[`toolContainerLeft${applicationState.leftTool}`]" :key="index"></component>
                          </ToolsContainerLeft>
                          <ToolsContainerRight :theme="{show:applicationState.rightTool}"  >
                          </ToolsContainerRight>
                        </ToolsContainer>
                        <ViewportContainerBox :theme="{hidden:applicationState.rightTool}" :style="applicationState.viewportStyle">
                            <Viewport  style="width:100%;height:100%;"></Viewport>
                            <component :is="item" v-for="(item,index) in pluginsBelongKeys['viewport']" :key="index"></component>
                        </ViewportContainerBox>
                        <PreviewContainer v-if="applicationState.isPreview"  :theme="{hidden:applicationState.rightTool}" :style="applicationState.viewportStyle">
                            <component :is="item" v-for="(item,index) in pluginsBelongKeys['preview']" :key="index"></component>
                        </PreviewContainer>
                    </ViewportContainerRight>
                </ViewportContainer>
                <FooterContainer>
                    <component :is="item" v-for="(item,index) in pluginsBelongKeys['bottomBar']" :key="index"></component>
                </FooterContainer>
            </LeftContainer>
            <RightContainer :theme="{hidden:applicationState.isPreview}" >
                <component :is="item" v-for="(item,index) in pluginsBelongKeys['mainTool']" :key="index"></component>
            </RightContainer>
        </Container>
     </div>
</template>

<script>
// 加载基本布局组件
import * as components from './index.style';
import eventbus from '../../service/eventbus';
import Vue from 'vue';
// 加载内置插件及每个区块对应的key
import {SVC} from '../../service';
// 加载组件库
// 加载viewport
import Viewport from '../viewport';
export default {
    components: {
        Viewport,
        ...components
        // ...sortedPlugins
    },
    props: {
        componentClasses: {
            default () {
                return [];
            }
        }
    },
    data () {
        return {
            localInstances:"",
            subTitle:"",
            modalTitle:"",
            modalContent:"",
            modal1: false,
            pluginsBelongKeys: SVC.pluginsBelongKeys
        };
    },
    computed: {
        applicationState () {
            return this.$store.state.application;
        }
    },
    methods:{
        myOk() {
            // this.$Message.info('Clicked ok');

            let obj={
                title:this.subTitle,
                data:this.localInstances
            }
            let str=JSON.stringify(obj);

            //note 请求后台ajax
        },
        cancel () {
            // this.$Message.info('Clicked cancel');
        },
    },
    created () {
        // 初始化布局组件
        this.$store.commit('viewport/initViewport');
    },
    mounted () {
        eventbus.$on("openModal", (data) => {
            this.modal1 = true;
            this.modalTitle=data.title;
            this.modalContent=data.content;
            let   child= Vue.extend({template:'<p>'+this.modalContent+'</p>'});
            this.$Modal.confirm({
                render: (h) => {
                    return h(child, {
                        ref: 'myModal'
                    })
                },
                onOk: ()=>{

                    //note 请求后台ajax
                }
            })

        });
        eventbus.$on("openModalTitle", (instances) => {
            let localInstances=instances;
            let  _this=this;
            this.$Modal.confirm({
                render: (h) => {
                    return h('Input', {
                        props: {
                            value: this.subTitle,
                            autofocus: true,
                            placeholder: '请输入模板名称...'
                        },
                        on: {
                            input: (val) => {
                                _this.subTitle = val;
                            }
                        }
                    })
                },
                onOk: ()=>{

                    let obj={
                        title:_this.subTitle,
                        data:localInstances
                    }
                    let str=JSON.stringify(obj);
                    console.log(str);
                    //note 请求后台ajax
                    this.$http.get('/static/data/page-ide/template-table.json').then((response) => {
                        //this.data5=response.data;

                    });


                }
            })
        });
    }
};
</script>

<style scoped lang="less">
   .hideBottom{
     position: relative;
   }
</style>
