"use strict";
!(function($) {
    var pluginName = "ajaxImageUpload",
        defaults   = {
            fileInput: '', // 上传按钮名，即input[type=file]的name值
            postUrl: '', // POST上传地址
            width: 150, // 图片宽度
            height: 150, // 图片高度
            imageUrl: [], // 已上传的图片连接
            postData: {}, // 额外数据
            allowZoom: true, // 是否允许缩放
            allowType: ["gif", "jpeg", "jpg", "bmp", "png"],
            maxNum: 5, // 最多允许上传个数
            maxSize: 1, // 允许上传图片的最大尺寸，单位M
            appendMethod: 'before',  // 追加方式
            before: $.noop, // 上传前回调函数
            success: $.noop, // 上传成功时的回调函数
            error: $.noop, // 上传失败时的回调函数
            complete: $.noop, // 所有上传完成时的回调函数
            delete: $.noop // 删除图片时的回调函数
        };

    function Plugin(element, options) {
        this.element   = element;
        this.settings  = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name     = pluginName;
        this.complete  = true;
        this.code = 0;
        this.msg  = '';
        this.init();
    }

    Plugin.prototype = {
        init: function() {
            var $self = this,
                $this = $(this.element),
                $imageUrl = $self.settings.imageUrl;

            $self.createSectionBox();

            // 已经存在的图片先展示出来
            if ($imageUrl.length > 0) {
                for (var $i = 0; $i < $imageUrl.length; $i++) {
                    $self.createImageSection($imageUrl[$i]);
                }
            }

            $this.find("input[type=file]").on('change', function() {
                $self.selectFile();
            });

        },
        /**
         * 选择文件
         * @returns {boolean}
         */
        selectFile: function() {
            var $self = this,
                $this = $(this.element),
                $maxNum  = $self.settings.maxNum,
                $maxSize = $self.settings.maxSize,
                $postUrl = $self.settings.postUrl,
                $fileInput = $self.settings.fileInput,
                $before    = $self.settings.before,
                $complete  = $self.settings.complete,
                $uploadInput  = $this.find("input[type=file]"),
                $imageSection = $this.find('.ggy-image-section');

            if (!$postUrl) {
                $self.callError("300", "没有配置postUrl");
                $self.resetFile();
                return false;
            }

            if (!$fileInput) {
                $self.callError("301", "没有配置fileInput");
                $self.resetFile();
                return false;
            }

            if ($before && $before() === false) {
                $self.resetFile();
                return false;
            }

            var $files = $uploadInput[0].files;

            if ($files.length + $imageSection.length > $maxNum) {
                $self.callError("302", "上传图片数目不能超过" + $maxNum + "个");
                $self.resetFile();
                return false;
            }

            for (var $i = 0; $i < $files.length; $i++) {
                var $file = $files[$i];

                if (!$self.isAllowFile($file)) {
                    $self.callError("303", $file.name + " 图片类型不支持");
                    $self.resetFile();
                    break;
                }

                if ($self.getFileSize($file) > $maxSize) {
                    $self.callError("304", '上传图片不能超过' + $maxSize + 'M，当前上传图片的大小为' + $fileSize.toFixed(2) + 'M');
                    $self.resetFile();
                    break;
                }

                $self.createImageSection();
                $self.ajaxUpload($file);
            }

            if ($self.complete == true) {
                $complete();
            }

            $self.resetFile();
        },

        /**
         * 创建容器盒子
         * @returns {*|jQuery|HTMLElement}
         */
        createSectionBox: function() {
            var $self = this,
                $this = $(this.element),
                $fileInput  = $self.settings.fileInput,
                $sectionBox = $("<div class='ggy-section-box'></div>"),
                $uploadSection = $("<section class='ggy-upload-section'></section>"),
                $modalSection  = $("<section class='ggy-modal-section'></section>"),
                $uploadIcon    = $("<i class='ggy-upload-icon'></i>"),
                $uploadInput   = $("<input type='file' name='" + $fileInput + "' class='ggy-upload-input' accept='image/*' multiple='multiple'>");

            $sectionBox.appendTo($this);
            $uploadSection.appendTo($sectionBox);
            $uploadIcon.appendTo($uploadSection);
            $uploadInput.appendTo($uploadSection);
            $modalSection.appendTo($sectionBox);

            $modalSection.on('click', function(event) {
                event.stopPropagation();
                $modalSection.hide();
            });

        },

        /**
         * 创建上传图片容器片段
         * @param $src
         * @returns {*|jQuery|HTMLElement}
         */
        createImageSection: function($src) {
            var $self = this,
                $this = $(this.element),
                $width  = $self.settings.width,
                $height = $self.settings.height,
                $fileInput = $self.settings.fileInput,
                $allowZoom = $self.settings.allowZoom,
                $appendMethod = $self.settings.appendMethod,
                $sectionBox   = $this.find(".ggy-section-box"),
                $uploadSection = $this.find(".ggy-upload-section"),
                $imageSection  = $("<section class='ggy-image-section loading'></section>"),
                $imageShade    = $("<div class='ggy-image-shade'></div>"),
                $hiddenInput   = $("<input type='hidden' name='" + $fileInput + "[]' value='" + $src + "'>"),
                $imageShow     = $("<img class='ggy-image-show shade' src='" + $src + "'/>");

            if ($src) {
                $imageShow = $("<img class='ggy-image-show' src='" + $src + "'/>");
            }

            $imageSection.css({ 'width':$width, 'height':$height });
            $uploadSection.css({ 'width':$width, 'height':$height });

            switch ($appendMethod) {
                case "before":
                    $sectionBox.prepend($imageSection);
                    break;
                case "after":
                    $uploadSection.before($imageSection);
                    break;
            }

            $hiddenInput.appendTo($imageSection);
            $imageShow.appendTo($imageSection);
            $imageShade.appendTo($imageSection);

            $self.createDeleteNode($imageSection);

            if ($src && $allowZoom === true) {
                $self.createZoomNode($imageSection);
            }
        },

        createDeleteNode: function($imageSection) {
            var $self = this,
                $this = $(this.element),
                $modalSection = $this.find(".ggy-modal-section"),
                $imageShow    = $imageSection.find(".ggy-image-show"),
                $deleteIcon   = $("<i class='ggy-delete-icon'></i>"),
                $deleteBox    = $("<div class='ggy-modal-box ggy-delete-box'><p class='ggy-delete-tip'>您确定要删除吗？</p><p class='ggy-delete-btn'> <span class='ggy-confirm-btn'>确定</span><span class='ggy-cancel-btn'>取消</span></p></div>"),
                $delete       = $self.settings.delete;

            $deleteIcon.appendTo($imageSection);

            // 点击显示删除确认弹框
            $imageSection.find(".ggy-delete-icon").on('click', function(event) {
                event.stopPropagation();
                $modalSection.html($deleteBox);
                $modalSection.show();
            });

            // 确认删除
            $deleteBox.find(".ggy-confirm-btn").on('click', function(event) {
                event.stopPropagation();
                $modalSection.hide();
                $imageSection.remove();
                $deleteBox.remove();
                $delete($imageShow.attr('src'));
            });

            // 取消删除
            $deleteBox.find(".ggy-cancel-btn").on('click', function(event) {
                event.stopPropagation();
                $modalSection.hide();
                return false;
            });
        },

        createZoomNode: function($imageSection) {
            var $this = $(this.element),
                $imageShow    = $imageSection.find(".ggy-image-show"),
                $modalSection = $this.find(".ggy-modal-section"),
                $zoomIcon = $("<i class='ggy-zoom-icon'></i>"),
                $zoomBox  = $("<div class='ggy-modal-box ggy-zoom-box'><img src=''/></div>");

            $zoomBox.find('img').attr('src', $imageShow.attr('src'));
            $zoomIcon.appendTo($imageSection);

            // 点击显示弹出框
            $imageSection.find(".ggy-zoom-icon").on('click', function(event) {
                event.stopPropagation();
                $modalSection.html($zoomBox);
                $modalSection.show();
            });

        },

        /**
         * 上传文件
         * @param $file
         */
        ajaxUpload: function($file) {
            var $self = this,
                $this = $(this.element),
                $fileInput = $self.settings.fileInput,
                $postData  = $self.settings.postData,
                $postUrl   = $self.settings.postUrl,
                $allowZoom = $self.settings.allowZoom,
                $success   = $self.settings.success,
                $appendMethod = $self.settings.appendMethod;

            switch ($appendMethod) {
                case "before":
                    var $imageSection = $this.find('.ggy-image-section:first');
                    var $imageShow    = $this.find('.ggy-image-show:first');
                    break;
                case "after":
                    var $imageSection = $this.find('.ggy-image-section:last');
                    var $imageShow    = $this.find('.ggy-image-show:last');
                    break;
            }

            var $formData = new FormData();

            $formData.append($fileInput, $file);

            for (var $key in $postData) {
                $formData.append($key, $postData[$key]);
            }

            $.ajax({
                url: $postUrl,
                type: 'post',
                async: false,
                data: $formData,
                processData: false,
                contentType: false,
                headers: {'token': localStorage.getItem('token')},
                dataType: 'json',
                mimeType: "multipart/form-data",
                success: function($json) {
                    if ($json.code != 200) {
                        $self.callError($json.code, $json.msg);
                        $imageSection.remove();
                        return false;
                    }
                    $imageShow.removeClass("shade").attr('src', $json.data.src);
                    $imageSection.find('input[type=hidden]').val($json.data.src);
                    if ($allowZoom === true) {
                        $self.createZoomNode($imageSection);
                    }
                    $self.complete *= true;
                    $success($json);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $self.callError(jqXHR.status, 'AjaxUrl Service Error:' + jqXHR.statusText);
                    $imageSection.remove();
                }
            });
        },

        /**
         * 是否允许上传文件
         * @param $file
         * @returns {boolean}
         */
        isAllowFile: function($file) {
            var $allowType = this.settings.allowType,
                $fileExt   = this.getFileExt($file);
            if ($.inArray($fileExt, $allowType) != -1) {
                return true;
            }
            return false;
        },

        /**
         * 获取文件扩展名
         * @param $file
         * @returns {string}
         */
        getFileExt: function($file) {
            var $fileName = $file.name,
                $index    = $fileName.lastIndexOf('.');
            if ($index < 1) {
                return '';
            }
            return $fileName.substr($index + 1).toLowerCase();
        },

        /**
         * 获取文件大小
         * @param $file
         * @returns {number}
         */
        getFileSize: function($file) {
            return ($file.size) / (1024 * 1024);
        },

        /**
         * 重置上传域
         */
        resetFile: function() {
            $(this.element).find("input[type=file]").val(null);
        },

        /**
         * 调用error函数
         * @param $code
         * @param $msg
         */
        callError: function($code, $msg) {
            var $self  = this,
                $error = $self.settings.error;

            $self.complete *= false;

            $self.code = $code;
            $self.msg  = $msg;
            $error($self);
        }
    };

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery, window, document);