layui.define(['jquery', 'carousel', 'formUtils'], function(exports) {
    var $ = layui.jquery;
    var carousel = layui.carousel;
    var utils = layui.formUtils;
    var formField = layui.formField;

    var layCarousel = {
        /**
         * 根据json对象生成html对象
         * @param {object} json
         * @param {boolean} selected true 表示选择当前
         * */
        render: function (json, selected) {
            if (selected === undefined) {
                selected = false;
            }
            var _html = '<div id="{0}Box" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
            // _html +='<label class="layui-form-label {0}">{1}:</label>'.format(json.required?'layui-form-required':'',json.label);
            // _html +='<div class="layui-input-block">';
            _html += '<div class="layui-carousel" id="{0}">'.format(json.tag + json.id);
            _html += '<div carousel-item class="carousel-item">';
            for (var i = 0; i < json.options.length; i++) {
                _html += '<div><img src="{0}" /></div>'.format(json.options[i].value);
            }
            _html += '</div>'; //end for div carousel-item
            _html += '</div>'; //end for class=layui-carousel
            // _html +='</div>';
            _html += '</div>';
            return _html;
        },
        update: function (json) {
            $('#' + json.id).empty();
            var _html = '';
            //重绘设计区改id下的所有元素
            _html += '<div class="layui-carousel" id="{0}">'.format(json.tag + json.id);
            _html += '<div carousel-item class="carousel-item">';
            for (var i = 0; i < json.options.length; i++) {
                _html += '<div><img src="{0}" /></div>'.format(json.options[i].value);
            }
            _html += '</div>'; //end for div carousel-item
            _html += '</div>'; //end for class=layui-carousel
            $('#' + json.id).append(_html);
            carousel.render({
                elem: '#' + json.tag + json.id,
                width: json.width, //设置容器宽度
                height: json.height, //设置容器宽度
                arrow: json.arrow, //始终显示箭头
                interval: json.interval,
                anim: json.anim,
                autoplay: json.autoplay
                //anim: 'updown' //切换动画方式
            });
        },
        /* 获取对象 */
        jsonData: function (id, index, columncount) {
            //分配一个新的ID
            var _json = JSON.parse(JSON.stringify(formField.carousel));
            _json.id = id == undefined ? utils.guid() : id;
            _json.index = index;
            return _json;
        },
        /* 根据 json 对象显示对应的属性 */
        property: function (json) {
            $('#columnProperty').empty();
            var _html = '';
            _html = utils.renderCommonProperty(json); //获取通用属性HTML字符串
            //处理特殊字符串
            for (var key in json) {
                if (key === 'index') {
                    continue;
                }
            }
            $('#columnProperty').append(_html);
        },
        componentRender: function(item) {
            carousel.render({
                elem: '#' + item.tag + item.id,
                width: item.width, //设置容器宽度
                height: item.height, //设置容器宽度
                arrow: item.arrow, //始终显示箭头
                interval: item.interval,
                anim: item.anim,
                autoplay: item.autoplay,
            });
        }
    };

    exports('layCarousel', layCarousel);
});