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

    var laySign = {
        /**
         * 根据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" style="width: {1}px">{0}:</label>'.format(json.label, json.labelWidth);
            _html += '<div class="layui-input-block" style="margin-left: {0}px;">'.format(json.labelWidth);
            if (json.disabled) {
                _html += '<button id="{0}" type="button" class="layui-btn layui-btn-normal layui-btn-disabled custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
            } else {
                _html += '<button id="{0}" type="button" class="layui-btn  layui-btn-normal custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
            }
            if (json.data !== "") {
                _html += '<div class="signImg"><img src="{0}"></div>'.format(json.data);
            }
            _html += '</div>';
            _html += '</div>';
            return _html;
        },
        update: function (json) {
            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下的所有元素
            if (json.disabled) {
                _html += '<button id="{0}" type="button" class="layui-btn layui-btn-normal layui-btn-disabled custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
            } else {
                _html += '<button id="{0}" type="button" class="layui-btn  layui-btn-normal custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
            }
            if (json.data !== "") {
                _html += '<div class="signImg"><img src="{0}"></div>'.format(json.data);
            }
            $block.append(_html);
        },
        /* 获取对象 */
        jsonData: function (id, index, columncount) {
            //分配一个新的ID
            var _json = JSON.parse(JSON.stringify(formField.laySign));
            _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 self = this;
            $('#' + item.id + item.tag).click(function () {
                layer.open({
                    type: 2,
                    title: '手写签名',
                    btn: ['保存', '关闭'], //可以无限个按钮
                    yes: function (index, layero) {
                        //do something
                        var iframe = window['layui-layer-iframe' + index];
                        var data = iframe.getCanvasData();
                        item.data = data;
                        self.update(item);
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    },
                    closeBtn: 1, //不显示关闭按钮
                    shade: [0],
                    area: ['60%', '60%'],
                    offset: 'auto', //右下角弹出
                    anim: 2,
                    content: ['./handwrittenSignature.html', 'yes'], //iframe的url，no代表不显示滚动条
                    success: function (layero, index) {}
                });
            })
        }
    };

    exports('laySign', laySign);
});