<template>

    <div id="componentContainer" style="float:left">
        <a v-for="(item, key, index) in components" 
           v-bind:id="key"
           v-bind:key = "index"
           v-if="!item.isHiddenDragBtn && key.indexOf('-properties') == -1"
           :title="item.toolTip"
            style="display: inline-block; line-height:30px; text-align: center;color:#444; padding: 0 10px;">
            <i :class="item.icon" style="display: block; height:20px;"></i>
            <span>{{item.title}}</span>
        </a>
        <a style="display: inline-block; line-height:30px; text-align: center;color:#444; padding: 0 10px;">
            <i class="icon iconfont icon-gg_xinwengonggao" style="display: block; height:20px;"></i>
            <span>空白块</span>
        </a>
    </div>
</template>
<script>
import '@libs/jQuery.UI'
import { mapGetters, mapMutations } from "vuex"
import grid from './CreateGrid'
import Components from "./ComponentSetting"
import {getMaxIndex} from "./utils"

var maxIndex = 0;

export default {
    data(){
        return {components: Components};
    },

    computed: {
        ...mapGetters({
            initItems: "items",
            TopBarSetting: 'TopBarSetting'
        })
    },

    mounted(){
        var _this = this;
        var dragBtn = $("#componentContainer").find("a");
        dragBtn.draggable({
            helper:function(){
                return $(this).clone().css({
                    'z-index': 999999999
                })
            },
            stop: function(e, ui){
                var type = $(e.target).attr("id");
                if (_this.TopBarSetting.TopBarFlag && (e.pageY > $('.bar').offset().top - $(window).scrollTop() && e.pageY < $('.bar').offset().top - $(window).scrollTop() + $('.bar').height())) {
                    _this.$Message.info({
                        content: 'banner模块请选中后在右侧设置',
                        duration: 3
                    });
                }
                grid.fillContent(e, function(curNode, isAuto, isEmpty){
                    _this.mFillContent(curNode, isAuto, isEmpty, type, e);
                });
            }
        });
    },

    methods:{
        ...mapMutations([
            'updateComponentType',
            'addItem',
            'updateNodePropShow'
        ]),

        mFillContent: function(curNode, isAuto, isEmpty, type, e){
            var _this = this;

            _this.updateNodePropShow(curNode);

            var propertiesType = type && type+"-properties";

            if(isAuto && isEmpty){
                var items = _this.initItems().map(function(item){
                    return item.id
                });

                maxIndex = getMaxIndex(items, maxIndex, "_");
                var id = "id_"+maxIndex;
                var axes = grid.getAxes(e)
                _this.addItem({ x: axes.x, y: axes.y, width: 100, height: 32, vwidth: 4, vheight: 10, id: id, type: type, propertiesType: propertiesType, isPropShow: true, contentSetting: {} })
            }else{
                curNode && _this.updateComponentType({id: curNode.id, type: type, propertiesType: propertiesType});
            }
        }
    }
}
</script>