/**
 * Created by Lynn on 2016/3/9.
 */
;
(function ($, window, document, undefined) {
    "use strict";

    $.fn.imageGroup = function (options) {
        return this.each(function () {
            new ImageGroup(this, $.extend({}, $.fn.imageGroup.defaults, options));
        });
    };

    // Defaults
    $.fn.imageGroup.defaults = {
        multi: !1, // 是否多图
        editable: !0, // 图片名称是否可编辑
        moveable: !0, //图片是否能移动
        deletable: !0, //图片是否可删除

        upload: !0, // 是否允许上传图片
        uploadText: '<i class="fa fa-upload"></i>',
        uploadAction: UPLOAD_IMG, //图片上传接口
        server: !0, //是否允许从服务器端选择图片
        serverText: '<i class="fa fa-server"></i>',

        thumb_width: 160,
        thumb_height: 120,
        defaultName: '上传图片',
        compress: false,
        maxPhoto: 100
    };

    function ImageGroup(element, options) {
        if (!arguments.length) {
            return;
        }
        var img_uploaded_num = 0,
            cls_item = 'vc-img-item',
            cls_uploaded = 'upload-state-done',
            cls_success = 'upload-state-success',
            btns,
            uploadItem,
            uploader;
        element = $(element).addClass('vc-img-edit');
        $.extend(options, element.data());
        render();

        function render() {
            var items = element.find('.' + cls_item),
                i = 0;
            img_uploaded_num = items.length;
            for (; i < img_uploaded_num; i++) {
                var item = items.eq(i),
                    img = item.find('img');
                if (img.length) {
                    renderImg(item, img);
                } else if (!options.multi && 0 == i) {
                    renderBtns(item);
                }
                if (options.itemWidth > 0)ct.css({width: options.itemWidth, 'max-width': 'none'});
            }
            if (options.multi || 0 == img_uploaded_num) renderItem();

            if (options.fixedHeight > 0) {
                element.addClass('vc-img-fixed-height');
            }

            element.on('click', function (e) {
                var el = $(e.target), func = el.data('func'), item;
                if (!func && el.is('.fa')) {
                    el = el.parent();
                    func = el.data('func');
                }
                if (func) {
                    item = el.parent().parent().parent()
                    switch (func) {
                        case 'edit':
                            edit(item);
                            break;
                        case 'del':
                            del(item);
                            break;
                        case 'leftMove':
                            move(item, 'left');
                            break;
                        case 'rightMove':
                            move(item, 'right');
                            break;
                        case 'server':
                            server(el.parent().parent());
                            break;
                    }
                }
            });

            element.on('dblclick', function (e) {
                var el = $(e.target);
                if (el.is('img')) {
                    if ($.isFunction(options.dblclick)) {
                        options.dblclick(element, el);
                    } else {
                        top.lightBox(el, {src: SOSO.getImageUrl(el.attr('src'), !1)});
                    }
                } else if (el.is('h6')) {
                    if (options.editable) {
                        edit(element);
                    }
                }
            });
        }

        function renderBtns(item) {
            if (btns) {
                btns.show();
                return;
            }
            uploadItem = item;
            var cls = options.upload && options.server ? 'vc-img-btns' : 'vc-img-btn';
            btns = $('<div class="' + cls + '"/>').prependTo(item.addClass('vc-img-upload'));
            if (options.upload) {
                var btn = $('<div class="btn btn-default btn-upload" title="上传图片">' + options.uploadText + '</div>').appendTo(btns);

                if (options.fixedHeight > 0) {
                    btn.height(options.fixedHeight).addClass('btn-fixed-height');
                }

                renderUploader(item, btn);
            }
            if (options.server) btns.append($('<a class="btn btn-default" data-func="server" title="从图库中选择">' + options.serverText + '</a>'));
            //window.setTimeout(function(){btns.show()}, 100);
        }

        function renderImg(item, img) {
            var ct = $('<div class="vc-img-img"/>').prependTo(item);
            item.addClass(cls_uploaded);
            if (typeof img == 'string') {
                img = $('<img src="' + img + '"/>');
                item.addClass(cls_success);

            } else if (typeof img == 'object' && img.source) {
                img = $('<div class="vc-img-loading"><div class="loader-inner"><i class="fa fa-spinner fa-loading"></i></div><p>等待上传</p></div>');
            }
            if (options.fixedHeight > 0 && img.is('img')) {
                img.height(options.fixedHeight);
            }

            ct.append(img);
            var span = $('<span class="vc-img-tbar"/>').appendTo(ct);
            if (options.editable) {
                span.append('<i class="fa fa-edit" title="编辑"  data-func="edit"/>');
            }
            if (options.deletable) {
                span.append('<i class="fa fa-trash-o" title="删除" data-func="del"/>');
            }
            if (options.multi && options.moveable) {
                span.append('<i class="fa fa-angle-right" data-func="rightMove" title="左移"></i>');
                span.append('<i class="fa fa-angle-left" data-func="leftMove" title="右移"></i>');
            }
            return img;
        }

        function renderItem(file, item) {
            var l = element.find('.' + cls_item).length,
                ct = $('<div class="' + cls_item + '" />');
            if (item) {
                item.before(ct);
            } else {
                element.append(ct);
            }
            if (options.itemWidth > 0) ct.css({width: options.itemWidth, 'max-width': 'none'});

            if (!file) {
                renderBtns(ct);
                setText(ct, options.defaultName);
                return ct;
            } else if (typeof file == 'string') {
                renderImg(ct, file);
            } else {
                ct.attr('id', file.id);
                var title = file.title || file.name;
                if (file.ext) {
                    title = title.substring(0, title.length - file.ext.length - 1);
                }
                setText(ct, title);
            }
            img_uploaded_num++;
            if (uploadItem && options.multi && img_uploaded_num >= options.maxPhoto) {
                uploadItem.hide();
            }

            return ct;
        }

        function setText(item, title, desc) {
            var h6 = item.find('h6');
            if (!h6.length) {
                h6 = $('<h6 title="' + title + '"/>').appendTo(item);
            }
            h6.text(title);
        }


        function setValues(item, values) {
            values = values || {};
            if (options.editable) setText(item, values.title || values.name || '', values.desc || '');
            values.update = 1;
            $.each(values, function () {
                var k = arguments[0],
                    v = arguments[1],
                    n = 'field' + k.substring(0, 1).toUpperCase() + k.substring(1),
                    ipt;
                if (options[n]) {
                    ipt = item.find("input[name='" + options[n] + "']");
                    if (!ipt.length) {
                        ipt = $('<input type="hidden" name="' + options[n] + '" />').appendTo(item);
                    }
                    ipt.val(v);
                }
            });
            item.data('soso.images', values);
            if (typeof options.setValues == 'function') {
                options.setValues(options, item, values);
            }
        }

        var fields = null;

        function getFields() {
            if ($.isArray(fields)) return fields;
            fields = [];
            $.each(options, function (k, v) {
                if (k.indexOf('field') == 0 && k.length > 5) {
                    fields.push(k.substring(5).toLowerCase());
                }
            });
            return fields;
        }

        function getValue(item, fields) {
            if (fields) {
                if (!$.isArray(fields)) fields = [fields];
            } else {
                fields = getFields();
            }
            var values = {};
            $.each(fields, function (v, k) {
                var n = 'field' + k.substring(0, 1).toUpperCase() + k.substring(1), ipt;
                if (options[n]) {
                    ipt = item.find("input[name='" + options[n] + "']");
                    if (ipt.length) {
                        values[k] = ipt.val();
                    }
                }
            });
            return values;
        }

        function edit(item) {
            if (!item.hasClass(cls_uploaded)) return;
            if (options.editor) {
                options.editor.call(null, item, getValue(item), function (values) {
                    setValues(item, values);
                });
                return;
            }
            var form = $('<form class="form-horizontal"><div class="form-group">' +
                    '<label class="col-md-2 control-label">图片名称：</label>' +
                    '<div class="col-md-10"><input name="name" class="form-control" maxlength="50"/></div>' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<label class="col-md-2 control-label">图片说明：</label>' +
                    '<div class="col-md-10"><textarea name="desc" class="form-control" rows="3"></textarea></div>' +
                    '</div></form>'),
                dialog = top.bootbox.dialog({
                    title: '图片属性',
                    width: 560,
                    draggable: true,
                    message: form,
                    buttons: {
                        success: {
                            label: "确定", className: "btn-primary", callback: function () {
                                var F = form.get(0), n = F.name.value.trim();
                                if (!n) return false;
                                setValues(item, {name: n, desc: F.desc.value.trim()})
                            }
                        },
                        cancel: {label: "取消", className: "btn-default"}
                    }
                });
            form.find('input').val(item.find('h6').text());
            if (options.enabledesc !== false) {
                form.find('textarea').val(getValue(item, 'desc').desc || '');
            } else {
                form.find('textarea').parent().parent().hide();
            }

        }


        function del(item) {
            if (options.deletable !== false) {
                if (item.hasClass(cls_success) && $.isFunction(options.onBeforeDelete) && options.onBeforeDelete.call(null, item, function () {
                        doDel(item);
                    }) !== true) {
                    return;
                }
                doDel(item);
            }

            if (options.delete) {
                options.delete.call(null, item);
            }
        }

        function doDel(item) {
            if (!options.multi) {
                item.removeClass(cls_uploaded).removeClass(cls_success).find('.vc-img-img').remove();
                item.find('>input').remove();
                renderBtns(item);
            } else {
                updateDelIds(item);
                img_uploaded_num--;
                uploadItem.show();
                item.remove();
            }

            if ($.isFunction(options.onDelete)) {
                options.onDelete.call(null, item);
            }
        }

        var deleteIdsInput;

        function updateDelIds(item) {
            var id = options['fieldId'],
                ids = options['deleteids'];
            if (id && ids) {
                if (!deleteIdsInput) {
                    deleteIdsInput = element.find("input[name='" + ids + "']");
                    if (!deleteIdsInput.length) {
                        deleteIdsInput = $('<input type="hidden" name="' + ids + '" />').appendTo(element);
                    }
                }
                ids = deleteIdsInput.val();
                id = item.find("input[name='" + id + "']").val();
                ids = ids ? ids + ',' + id : id;
                deleteIdsInput.val(ids);
            }
        }

        function move(item, direction) {

            var cls = '.' + cls_item;
            if ('left' == direction) {
                item.after(item.prev(cls));
            } else if ('right' == direction) {
                item.insertAfter(item.next(cls));
            }

        }

        var _server;

        function server(item) {
            if (_server) return;
            _server = true;
            SOSO.Dialog.image({
                singleSelect: !options.multi,
                max: options.maxPhoto,
                clasification: options.clasification,
                callback: function (rs) {
                    if (options.multi && $.isArray(rs)) {
                        $.each(rs, function () {
                            setValues(renderItem(SOSO.getImageUrl(this, false), item), this);
                        });
                    } else {
                        btns.hide();
                        renderImg(item, SOSO.getImageUrl(rs, false));
                        setValues(item, rs);
                    }
                    return true;
                }
            });
            _server = false;
        }

        function renderUploader(item, btn) {
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: WU_SWF,
                // 文件接收服务端。
                server: options.uploadAction,
                duplicate: true,
                // 选择文件的按钮。可选。
                pick: {
                    id: btn,
                    multiple: options.multi
                },
                formData: {
                    brand: options.clasification ? options.clasification.brand : null,
                    series: options.clasification ? options.clasification.series : null
                },
                compress: false,
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png,image/bmp'
                }
            });

            if (btn.hasClass('btn-fixed-height')) {
                btn.find('.webuploader-pick').css('line-height', btn.height() + 'px');
            }

            // 当有文件加入队列的时候
            uploader.on('fileQueued', function (file) {
                var img;
                if (options.multi) {
                    if (img_uploaded_num >= options.maxPhoto) {
                        alert('图片不能超过' + options.maxPhoto + '张');
                        return;
                    }
                    img = renderImg(renderItem(file, item), file);
                    if (img_uploaded_num >= options.maxPhoto) {
                        item.hide();
                    }
                } else {
                    btns.hide();
                    item.attr('id', file.id);
                    img = renderImg(item, file);
                }

                // 创建缩略图
                this.makeThumb(file, function (error, src) {
                    if (error) {
                        img.replaceWith('<div class="vc-img-error"><i class="fa  fa-times-circle"></i><p>显示图片错误</p></div>');
                        return;
                    }
                    $('<img src="' + src + '" />').prependTo(img.parent());
                }, options.thumb_width, options.thumb_height);
            });

            uploader.on('uploadProgress', function (file, percentage) {
                var item = element.find('#' + file.id), el = item.find('.vc-img-loading');
                // 避免重复创建
                if (!el.length) {
                    el = $('<div class="vc-img-loading"><div class="loader-inner ball-clip-rotate"><div></div><p></p></div></div>').appendTo(item.find('.vc-img-img'));
                }
                el.find('p').text('上传中');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var item = $('#' + file.id),
                    el = item.find('.vc-img-error');
                if (!el.length) {
                    el = $('<div class="vc-img-error"><i class="fa fa-times-circle"></i><p></p></div>').appendTo(item.find('.vc-img-img'));
                }
                el.find('p').text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                element.find('#' + file.id).find('.vc-img-loading').remove();
            });

            // 文件上传成功
            uploader.on('uploadSuccess', function (file, rs) {
                var item = element.find('#' + file.id);
                if (1 != rs.state) {
                    $('<div class="vc-img-error"><i class="fa fa-times-circle"></i><p>上传错误</p></div>').appendTo(item.find('.vc-img-img'));
                    return;
                }
                item.addClass(cls_success);
                var source = rs.content, src, img;
                if (typeof options.size != 'undefined') {
                    src = SOSO.getImageUrl(source, options.size);
                } else {
                    src = source.origin + source.path;
                }
                img = item.find('img').attr('src', src);
                setValues(item, {name: source.name || source.filename, path: source.path});
                if (options.uploadSuccess) {
                    options.uploadSuccess.call(item.get(0), file, source);
                }
                this.reset();
            });
        }
    };


})(jQuery, window, document);

function ImageButtonInit(btn, options, force) {
    var btn = $(btn), options = options || btn.data('options');
    try {
        if(typeof options == 'string') options = $.parseJSON("{" + options + "}");
    } catch (e) {
        console.log("解析JSON出错(img-upload)：" + options);
        return;
    }
    options = options || {};
    if(!force && options && options.render === false) return;
    var emptyCls = 'img-wrap-empty', closest;
    closest = options.closest ? btn.parent().closest(options.closest) : null;
    if (closest && closest.length) {
        options.el = closest.find(options.target),
            options.ipt = closest.find(options.input);
    } else {
        options.el = $(options.target),
            options.ipt = $(options.input);
    }

    options.src = options.src || options.ipt.val();
    options.callback = function (rs, file, uploader) {
        options.ipt.val(rs.path);
        options.el.removeClass(emptyCls);
    };

    ImageUploader(btn, options);

    if (options.el.length) {
        $('<i class="fa fa-trash-o img-remove" title="删除"></i>').appendTo(options.el).on('click', function () {
            options.ipt.val('');
            options.el.find('img').remove();
            options.el.addClass(emptyCls);
        });
        var cls = 'img-wrap-hover';
        options.el.hover(function () {
            if (options.el.find('img').length) options.el.addClass(cls)
        }, function () {
            options.el.removeClass(cls)
        });
        if (!options.el.find('img').length) options.el.addClass(emptyCls)
    }
}


function ImageUploader(el, options) {
    options = options || {};
    var img_uploaded_num = 100,
        error = '图片上传失败';

    function setSrc(img, src) {
        if(!src) return;
        if (!img) img = $();
        if (img.is('img')) {
            img.attr('src', src);
        } else {
            var _img = img.find('img');
            if (_img.length > 0) {
                _img.eq(0).attr('src', src);
            } else {
                img.prepend('<img class="center-in-parent-h" src="' + src + '">');
                console.log(img.html())
            }
        }
    }

    if (options.src && options.el) {
        setSrc(options.el, SOSO.getPathImage(options.src));
    }
    console.log(UPLOAD_IMG);
    var uploader = WebUploader.create({
        auto: true,
        swf: WU_SWF,
        server: options.uploadAction || UPLOAD_IMG,
        duplicate: true,
        pick: {
            id: el,
            multiple: options.multi
        },
        thumb:{
            width: 200,
            height: 200,
            quality: 100,
            allowMagnify: false,
            crop: false
        },
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png,image/bmp'
        }
    }).on('fileQueued', function (file) {
        if (options.multi && img_uploaded_num >= options.max) {
            toast('图片不能超过' + options.max + '张');
            return;
        }
        if (options.el) {
            this.makeThumb(file, function (error, src) {
                if (error) return toast('读取图片失败');
                setSrc(options.el, src);
            });
        }
    }).on('uploadError', function (file) {
        uploader.reset();
        toast(error);
    }).on('uploadSuccess', function (file, rs) {
        if (1 != rs.state) {
            toast(error);
            return;
        }
        setSrc(options.el, rs.content.origin + rs.content.path);
        if (options.callback) {
            options.callback.call(null, rs.content, file);
        }
    });
}

function ImageSelector(options) {
    options = options || {};
    SOSO.Dialog.image({
        singleSelect: !options.multi,
        max: options.max,
        callback: function (rs) {
            if ($.isFunction(options.callback)) {
                return options.callback(rs);
            }
            return true;
        }
    });
}