var $=require('jquery');
require("../util/jquery-ui.min");
(function () {

    var Base = {
            scale: function (img, max, oWidth, oHeight) {
                var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
                if (ow > max || oh > max) {
                    if (ow >= oh) {
                        if (width = ow - max) {
                            percent = (width / ow).toFixed(2);
                            img.height = oh - oh * percent;
                            img.width = max;
                        }
                    } else {
                        if (height = oh - max) {
                            percent = (height / oh).toFixed(2);
                            img.width = ow - ow * percent;
                            img.height = max;
                        }
                    }
                }

                return this;
            },
            close: function ($img) {

                $img.css({
                    //top: ($img.parent().height() - $img.height()) / 2,
                    left: ($img.parent().width()-$img.width())/2
                });

                return this;
            },
            callback: function (editor, $w, url, state) {
            }
        };

    var Product={
        init: function (editor, $w) {
            var me = this;

            me.editor = editor;
            me.dialog = $w;
            me.initEvt();
        },
        initEvt: function () {
            var me = this,
                $ele = $(".edui-image-product .edui-product-content", me.dialog);
            if($.trim($('#productSkn').val())){
                $.ajax({
                    url:"/productVideo/queryProductVideoList",
                    data:{
                        skn:$('#productSkn').val()
                    },
                    dataType: 'json',
                    method:'post',
                    success:function(res){
                        var data = res;
                        if (res.code == 200 && data.data instanceof Array){
                            var defaultUrl = UMEDITOR_CONFIG.UMEDITOR_HOME_URL + "static/assets/images/defaultvideo.png";
                            $.each(data.data, function (index, video) {
                                var url = video.url;
                                var name = video.videoName;
                                if (url) {
                                    $(".edui-tab-content").html("<div class='edui-image-product edui-tab-pane edui-active'><div class='edui-product-content'></div></div>");

                                    $("<img src='" + defaultUrl + "' data-src='" + url + "' class='edui-image-pic' />").on("load", function () {

                                        var $item = $("<div class='edui-image-item'></div>").append(this);


                                        $item.append($("<span class='namelabel'>" + name + "</span><label>宽 </label><input class='widthinput' type='text' maxlength='5' placeholder='750' value=''><label>高 </label><input class='heightinput' type='text' maxlength='5' placeholder='420' value=''>"));

                                        $(".edui-image-product .edui-product-content", me.dialog).append($item);

                                        Base.scale(this, 120);

                                        $item.width(120);
                                        $item.height(165);

                                        Base.close($(this));
                                    });
                                }
                            });
                        }
                    }
                });

                $(document).on("click",".edui-image-product .edui-product-content .edui-image-pic",function(){
                    if ($(this).parent().hasClass("active-product")) {
                        $(this).parent().removeClass("active-product");
                    }
                    else {
                        $(this).parent().addClass("active-product");
                    }
                });
            }
        }
    }

    var $tab = null,
        currentDialog = null;

    UM.registerWidget('video', {
        tpl:
        "<div class=\"edui-image-wrapper\">" +
            "<div class=\"edui-tab-content\">" +
            "</div>" +
        "</div>",
        initContent: function (editor, $dialog) {
            var lang = editor.getLang('image')["static"],
                opt = $.extend({}, lang, {
                    image_url: UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/image/'
                });

            //Upload.showCount = 0;

            if (lang) {
                var html = $.parseTmpl(this.tpl, opt);
            }

            currentDialog = $dialog.edui();

            this.root().html(html);

            // 禁止滚动
            $(document.body).css("overflow", "hidden");
            $(".fileinput-button").hide();

        },
        initEvent: function (editor, $w) {
            $tab = $.eduitab({selector: ".edui-image-wrapper"})
                .edui().on("beforeshow", function (e) {
                    e.stopPropagation();
                });

            Product.init(editor, $w);
        },
        /**
         * 将单个视频信息插入编辑器中
         */
        insertSingle: function(editor){
            $('.active-product').each(function() {
                var img = $(this).find(".edui-image-pic")[0],
                     widthinput = $(this).find(".widthinput")[0],
                     heightinput = $(this).find(".heightinput")[0];
                editor.execCommand('insertvideo', {
                    url: $(img).attr('data-src'),
                    width: $(widthinput).val() || 750 ,
                    height: $(heightinput).val() || 420 ,
                    align: null
                });
            });
        },
        buttons: {
            'ok': {
                exec: function (editor, $w) {
                    // 允许滚动
                    $(document.body).css("overflow", "scroll");
                    $(".fileinput-button").show();
                    editor.getWidgetData("video").insertSingle(editor);
                }
            },
            'cancel': {
                exec: function() {
                    // 允许滚动
                    $(document.body).css("overflow", "scroll");
                    $(".fileinput-button").show();

                    $(document).off("click",".edui-image-product .edui-product-content .edui-image-pic");
                }

            }
        },
        width: 700,
        height: 408
    }, function (editor, $w, url, state) {
        Base.callback(editor, $w, url, state)
    })
})();