<template>
    <div>
        <Container>
            <div v-if="hackReset">
                <Title>
                    <div>组件库</div>
                  <!--  <CloseContainer @click.native="handleCloseLeftBar">
                        <Icon type="md-close"></Icon>
                    </CloseContainer>-->
                </Title>

                <ListContainer ref="listContainer" class="ide-scrollClass">
                    <!--  <div class="collapse-header">容器</div>
                    <GaeaComponent v-for="(item,index) in componentClasses" :key="index" v-if="item[1].level==1" :data-gaea-Key="item[1].editSetting.key" >{{item[1].editSetting.name}}</GaeaComponent>
                     <div class="collapse-header">组件</div>
                     <GaeaComponent v-for="(item,index) in componentClasses" :key="index" v-if="item[1].level==2" :data-gaea-Key="item[1].editSetting.key" >{{item[1].editSetting.name}}</GaeaComponent>
                     <div class="collapse-header">控件</div>
                     <GaeaComponent v-for="(item,index) in componentClasses"  :key="index"  v-if="item[1].level==3" :data-gaea-Key="item[1].editSetting.key" >{{item[1].editSetting.name}}</GaeaComponent>
                      <div class="collapse-header">正式环境将会隐藏</div>-->
                    <GaeaComponent v-for="(item,index) in componentClasses" :key="index" v-if="item[1].level==4"
                                   :data-gaea-Key="item[1].editSetting.key" >
                     <span class="ide-menuItem">
                        {{item[1].editSetting.name}}
                     </span>
                        <span class="iconfont icon-reca-icon_roundreduce"></span>
                    </GaeaComponent>
                </ListContainer>
            </div>
        </Container>
    </div>
</template>

<script>
    import * as components from './style';

    import eventbus from '../../../lib/service/eventbus';
    export default {
        components,
        position: 'toolContainerLeftDragMenu',
        name: 'drage-menu',
        computed: {
            componentClasses () {
                // map 转 Array
                return Array.from(this.$store.state.application.componentClasses);
            }
        },
        methods: {
            handleCloseLeftBar () {
                this.$store.commit('application/setLeftTool', null);
                this.$store.commit('application/setRightTool', null);
            }
        },
        data () {
            return {
                hackReset:true
            };
        },
        mounted () {
            eventbus.$on("hackReset", (data) => {

                this.hackReset = false
                this.$nextTick(() => {
                    this.hackReset = true
                });
            });
            this.$store.commit('viewport/registerOuterDrag', this.$refs.listContainer.$el);
        }
    };
</script>

<style scoped lang="less">

    .ide-scrollClass{
        height: 100%;
        overflow-y: auto;
        min-height: 450px;
        position: absolute;
        top: 40px;
        left: 13px;

        background-color: #fff;
    }
    .level3{
        visibility: hidden;
    }
    .collapse-header {
        height: 38px;
        line-height: 38px;
        padding-left: 32px;
        color: #666;
        font-weight: 900;
    }
    .hwEhjl {
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        cursor: move;
    }
    .ide-menuItem {
        width: 90%;
        color: #191f25;
        font-size: 12px;
    }
</style>
