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

    var HTML_ARRAY = [
        '<div id="{0}Box" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">',
        '   <label class="layui-form-label" style="width: {1};">{0}:</label>',
        '   <div id="{2}Block" class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">',
        '       <input name="{0}" id="{9}" value="{1}" type="number" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}" {4} style="width:{2}">',
        '   </div>',
        '</div>'
    ];

    var numberInput = {
        /**
         * 根据json对象生成html对象
         * @param {object} json
         * @param {boolean} selected true 表示选择当前
         * */
        render: function (json, selected) {
            if (selected === undefined) {
                selected = false;
            }
            var _disabled = json.disabled ? 'disabled=""' : '';
            var _disabledClass = json.disabled ? ' layui-disabled' : '';
            var _required = json.required ? 'required' : '';
            var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
            _html += HTML_ARRAY[1].format(json.label, json.labelWidth);
            _html += HTML_ARRAY[2].format(json.width, json.labelWidth, json.id);
            _html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
            _html += HTML_ARRAY[4];
            _html += HTML_ARRAY[5];
            return _html;
        },
        update: function (json) {
            var _disabled = json.disabled ? 'disabled=""' : '';
            var _disabledClass = json.disabled ? ' layui-disabled' : '';
            var $block = $('#' + json.id + 'Box .layui-input-block');
            var $label = $('#' + json.id + 'Box .layui-form-label');
            $block.empty();
            $label.empty();
            $block.css("margin-left", json.labelWidth);
            $label.css("width", json.labelWidth);
            $label.append(json.label + ":");
            $block.css({
                width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)
            });
            var _html = '';
            //重绘设计区改id下的所有元素
            _html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
            $block.append(_html);
            var _width = json.width.replace(/[^\d]/g, '');
            if ('' != _width) {
                _width = 100 - parseInt(_width);
            }
            $('#' + json.id + 'Box .layui-input-block .layui-number-input-btn').css("right", _width + "%");
            if (json.disabled) {
                $('#' + json.id + 'Box .layui-input-block .layui-number-input-btn').css("z-index", "-1");
            }
        },
        /* 获取对象 */
        jsonData: function (id, index, columncount) {
            //分配一个新的ID
            var _json = JSON.parse(JSON.stringify(formField.numberInput));
            _json.id = id == undefined ? utils.autoId(_json.tag) : 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) {
            //定义初始值
            var _width = item.width.replace(/[^\d]/g, '');
            if ('' != _width) {
                _width = 100 - parseInt(_width);
            }
            $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%");
            if (item.disabled) {
                $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1");
            }
        }
    };

    exports('numberInput', numberInput);
});