$(function() { //底部调整
    ue = UE.getEditor('KgcmsEditor');
//
    $("#image").mouseover(function(){
        console.log('移入')
        $(this).find('div button').show();
    })
    $("#image").mouseout(function(){
        $(this).find('div button').hide();
    })
    // 素材id
    var material_id = $("#material_id").val()

    var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null;
    if (!isChrome) {
        $(".tpl-page-container .tpl-content-wrapper").addClass("R-wra");
        $(".tpl-page-container .tpl-left-nav").addClass("L-tpl");
    }
    // 点击上传图片按钮时，初始化模态框中的img
	$("#qrcodeUpload,#thumbnail,.addimg-js,#qrcodeInput,.btn-update").on("click",function(){
		$("#finalImg").attr("src","");
		$("#true.am-modal-btn").addClass("true_active");
	})

    $(".click_in input").click(function() {
        var index = $(this).index();
        $('.tab').hide();
        $('.tab').eq(index).show();
    });
    //页面中的input按钮事件
    $('.tpl-switch').find('.tpl-switch-btn-view').on('click', function() {
        $(this).prev('.tpl-switch-btn').prop("checked", function() {
            if ($(this).is(':checked')) {
                return false;
            } else {
                return true;
            }
        })
    })
    //鼠标悬停图片上的事件
    $("#picture_view").on('mouseover', '.tpl-table-images-content-i', function() {
        //经过
        $(this).find('.tpl-table-images-content-i-info').show();
        $(this).find('img').css('opacity', '0.5');
    })
    $("#picture_view").on('mouseout', '.tpl-table-images-content-i', function() {
        //经过
        $(this).find('.tpl-table-images-content-i-info').hide();
        $(this).find('img').css('opacity', '1');
    })
    // 模态框  右上角的图标叉的添加和事件
    $("body").on("click", function() {
        var a_2 = "<a class='am-icon-close ngjs-a2' href='javascript: void(0)'  onclick='$(this).prev().click();'></a>";
        $(".am-pureview-actions").append(a_2);
        $(".ngjs-a2").addClass("ngph-a1");
        $(".ngjs-a2").prev().addClass("ngph-a2");
    })
    //查看图片按钮
    $('body').on('click', '.btn-search', function() {
        $(this).parents('li').find('img').click();
    })
    //模态框点击事件
    //  图片上传js============================================================
    var picture_path = ''
    var thumb_id = ''
    var pic_ul = ''
    var picture_li = ''
    var btn = ''
    var thumbnail = 0
    //模态框点击事件
    $('body').on('click', '.btn-add,.btn-update,.btn-remove', function() {
        picture_li = $(this).parents('li')
        pic_ul = $(this).prev()
        btn = $(this).data('btn');
        switch (btn) {
            case 'remove':
                var parents = $(this).parents('li');
                var bool = confirm('确定要删除该图片吗？');
                if (bool) {
                    parents.remove();
                    if (btn == 'remove2') {
                        pic_ul.next().show();
                    }
                }
                break;
            case 'remove2':
                var parents = $(this).parents('li');
                var bool = confirm('确定要删除该图片吗？');
                if (bool) {
                    parents.remove();
                    $('#thumbnail').show();
                }
                break;
            default:
                $('#imgInFo')[0].reset();
                switch (btn) {
                    case 'update':
                        $('.modal .am-modal-hd').text('更新图片信息');
                        thumbnail = 0;
                        break;
                    case 'add':
                        $('.modal .am-modal-hd').text('图片上传管理');
                        thumbnail = 0;
                        break;
                    case 'add2':
                        $('.modal .am-modal-hd').text('图片上传管理');
                        thumbnail = 1;
                        break;
                    case 'update2':
                        $('.modal .am-modal-hd').text('更新图片信息');
                        thumbnail = 1;
                        break;
                }
                if (btn == 'update' || btn == 'update2') {
                    var values = $(this).parents('li').find('input')
                    picture_path = values.eq(0).val()
                    $('#finalImg').attr('src', values.eq(0).val())
                }
                $('.modal').modal({
                    relatedElement: this,
                    onConfirm: function() {
                    console.log(thumb_id)
                        if (btn == 'add2') {
                            var name = 'thumbnail'
                            var data_btn = '2'
                            if($("#finalImg").attr("src") != ""){
                                pic_ul.next().hide();
                            }
                        } else {
                            var name = 'picture[]'
                            var data_btn = ''
                        }
                        var picture = '<li style="float: left; position: relative">' + '<div class="tpl-table-images-content-i-info absolute-middle">\n' + '<button type="button" class="other-btn1 btn1 btnsty am-btn-circle am-btn am-btn-success am-margin-horizontal btn-update ty-button" data-btn="update' + data_btn + '"><span class="square1"><i class="am-icon-pencil-square-o"></i>&nbsp;修改</span></button>' + '<button type="button" class="other-btn2 btnsty am-btn-circle am-btn am-btn-danger am-margin-horizontal btn-remove ty-button" data-btn="remove' + data_btn + '"><span class="remoe1"><i class="am-icon-remove ngsty-rem"></i>&nbsp;删除</span></button>' + '<button type="button" class="other-btn2 btnsty am-btn-circle am-btn am-btn-secondary am-margin-horizontal btn-search ty-button" data-btn="search"><span class="search1"><i class="am-icon-search ngsty-rem"></i>&nbsp;查看</span></button>' + '</div>' + '<img src="' + picture_path + '" height="120px" alt="">' + '<input type="hidden" name="' + name + '" value="' + picture_path + '"/>' + '</li>'
                        if (btn == 'update') {
                            picture_li.replaceWith(picture);
                        }
                        if(btn == "update2"){
                            $('.current').find('input').eq(1).val(thumb_id)
                            $('.current .background-image').css('background-image', 'url(' + picture_path + ')');
                            $("#image").show().find('img').attr("src", picture_path)
                        }
                        if(btn == 'add' || btn == 'add2'){
                            if($("#finalImg").attr("src") != ""){
                                if(btn == 'add2'){
                                    $('.current').find('input').eq(1).val(thumb_id)
                                    $('.current .background-image').css('background-image', 'url(' + picture_path + ')');
                                    $("#image").show().find('img').attr("src", picture_path)
                                }else{
                                    pic_ul.append(picture);
                                }
                            }else{
                                confirm("请选择图片");
                            }
                            // 图片位置计算
//                            img_position("ngar-uljs","ngar-Yjs");
                        }
                    }
                })
                break;
        }
    })
    //===========================
    //  在上传图片的弹出窗口,点击非图片区域,就隐藏窗口
    // ==========================
    $(".ngad-Jsj-click").on("click", function() {
        closeTailor(this);
    });
    $(".ngad-Ksj-change").on("change", function() {
        selectImg(this);
    });
    $(".ngad-Usj-click").on("click", function() {
        closeTailor(this);
    });
    // 图片上传
    function imgChange(e1, e2) {
        e1.change(function() {
            $filePath = URL.createObjectURL(this.files[0]);
            $('#ngac_Nfu_box').find('img').attr('src', $filePath); //给此img元素的src重新赋值
            $("#ngac_Nfu_box").show(); // 选中图片后， 显示此box
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]); //读取文件
            reader.onload = function(e) { //读取完成回调
                imgBase = e.target.result;
                e2.val(imgBase);
            }
        })
    }
    //原始上传
    $('#originalImg').click(function() {
        $("#originalChoose").trigger('click');
    })
    // 上传进度
	function progressHandlingFunction(e) {
		var curr = e.loaded;
		var total = e.total;
		var process = Math.floor(curr / total * 100);
		$("#loading").show().text((process - 1) + '%');
		$("#true.am-modal-btn").addClass("true_active");
		$.AMUI.progress.set((process - 1) / 100);
	}
    $("#originalChoose").change(function() {
        $(this)[0].files[0]
        var formData = new FormData();
        formData.append("file", $(this)[0].files[0]);
        formData.append("action", 'upload');
        if(thumbnail == 1){
            formData.append("type", 'thumb');
            formData.append("dir", 'wx_material/thumb');
        }else{
            formData.append("type", 'image');
            formData.append("dir", 'wx_material/image');
        }
        $.ajax({
            scriptCharset: 'UTF-8',
            type: 'post',
            url: window.location.pathname,
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            dataType : "json",
            xhr: function () {
				var myXhr = $.ajaxSettings.xhr();
				if (myXhr.upload) { //检查upload属性是否存在
					//绑定progress事件的回调函数
					myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
				}
				return myXhr; //xhr对象返回给jQuery使用
			},
        }).success(function(data) {
            if(data.status == 0){
                alert(data['msg'])
            }else{
                $('#finalImg').attr('src', data['url'])
                picture_path = data['url'];
                $("#loading").text("100%").hide();
				        $.AMUI.progress.set(1);
				        $("#true.am-modal-btn").removeClass("true_active");
                if(data['media_id']){
                    thumb_id = data['media_id']
                }
            }
        }).error(function() {
            alert("上传失败");
        });
    })
    //图片裁切
    function selectImg(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {
            var replaceSrc = evt.target.result;
            $('#tailoringImg').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }
    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }
    //弹出框水平垂直居中
    (window.onresize = function() {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768) {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-content").outerWidth()) / 2
            });
        }
    })();
    //弹出图片裁剪框
    $("#replaceImg").on("click", function() {
        $(".tailoring-container").toggle();
    });
    //图像上传
    //cropper图片裁剪
    $('#tailoringImg').cropper({
        aspectRatio: 1 / 1, //默认比例
        preview: '.previewImg', //预览视图
        guides: false, //裁剪框的虚线(九宫格)
        autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true, //是否允许移动剪裁框
        resizable: true, //是否允许改变裁剪框的大小
        zoomable: false, //是否允许缩放图片大小
        mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true, //是否允许通过触摸移动来缩放图片
        rotatable: true, //是否允许旋转图片
        crop: function(e) {
            // 输出结果数据裁剪图像。
        }
    });
    //旋转
    $(".cropper-rotate-btn").on("click", function() {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click", function() {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click", function() {
        if (flagX) {
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        } else {
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });
    //裁剪后的处理
    $("#sureCut").on("click", function() {
        if ($("#tailoringImg").attr("src") == null) {
            return false;
        } else {
            var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
            cas.toBlob(function(blob_url) {
                blob_url.lastModifiedDate = new Date();
                blob_url.name = 'picture.png';
                var formData = new FormData();
                formData.append("file", blob_url, 'picture.png');
                formData.append("action", 'upload');
                if(thumbnail == 1){
                    formData.append("type", 'thumb');
                    formData.append("dir", 'wx_material/thumb');
                }else{
                    formData.append("type", 'image');
                    formData.append("dir", 'wx_material/image');
                }
                $.ajax({
                    type: 'post',
                    url: window.location.pathname,
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    dataType : "json",
                    xhr: function () {
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { //检查upload属性是否存在
                            //绑定progress事件的回调函数
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用
                    },
                }).success(function(data) {
                     if(data['status'] == 0){
                        alert(data['msg'])
                    }else{
                        $('#finalImg').attr('src', data['url'])
                        picture_path = data['url'];
                        $("#loading").text("100%").hide();
				        $.AMUI.progress.set(1);
				        $("#true.am-modal-btn").removeClass("true_active");
                        if(data['media_id']){
                            thumb_id = data['media_id']
                        }
                    }
                }).error(function() {
                    alert("上传失败");
                });
            }); //转换为base64地址形式
            //关闭裁剪框
            closeTailor();
        }
    });
    //素材类型点击事件
    $('#type1').click(function () {
        $('.tab').hide().eq(0).show();
    })
    $('#type2').click(function () {
        $('.tab').hide().eq(1).show();
    })
    $('#type3').click(function () {
        $('.tab').hide().eq(2).show();
    })
    $('#type4').click(function () {
        $('.tab').hide().eq(3).show();
    })

    // 素材类型初始化
    var types = $("#type").find('input')
    for(var i=0; i < types.length; i++){
        if(types.eq(i).prop('checked')){
            types.eq(i).click();
        }
    }

    // 时间日期插件
    $.fn.datetimepicker.dates['zh-CN'] = {
        days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二  月"],
        today: "今日",
        suffix: [],
        meridiem: ["上午", "下午"]
    };
    var $dpInput = $('.form-datetime-lang').datetimepicker({
        container: '#Timebox',
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii'
    });

//    添加文章的加号
    var article = '<div class="article-content">\n' +
        '<div class="appmsg_item">\n' +
        '<div class="card_appmsg background-image">\n' +
        '</div>\n' +
        '<div class="image-button" style="display: none">\n' +
        '<span class="am-icon-long-arrow-up left-1" style="color: #f9f9f9"></span>\n' +
        '<span class="am-icon-long-arrow-down left-2" style="color: #f9f9f9"></span>\n' +
        '<span class="am-icon-trash-o" style="color: #f9f9f9"></span>\n' +
        '</div>\n' +
        '</div>\n' +
        '<div style="display: none;">\n' +
        '<input class="data_title" type="text" name="title[]" value="">\n' +
        '<input class="data_thumb_media_id" type="text" name="thumb_media_id[]" value="">\n' +
        '<input class="data_author" type="text" name="author[]" value="">\n' +
        '<input class="data_digest" type="text" name="digest[]" value="">\n' +
        '<input class="data_show_cover_pic" type="text" name="show_cover_pic[]" value="">\n' +
        '<input class="data_content_source_url" type="text" name="content_source_url[]" value="">\n' +
        '<input class="data_need_open_comment" type="text" name="need_open_comment[]" value="">\n' +
        '<input class="data_only_fans_can_comment" type="text" name="only_fans_can_comment[]" value="">\n' +
        '<textarea class="data_content" name="content[]"></textarea>\n' +
        '</div>\n' +
        '</div>'
    $("#article_add").click(function () {
        if($("#article_list").find('.article-content').length < 8){
            $("#article_list").append(article)
        }
        if($("#article_list").find('.article-content').length > 7){
            $("#article_add").hide();
        }


    })
//    文章的点击事件
    $('#article_list').on('click', '.article-content', function () {
        // 选中
        $(this).addClass('current').siblings().removeClass('current');
        // 替换数据  $("#event").trigger('changed.selected.amui');
        var values = $(this).find('input')
        $('#title').val(values.eq(0).val());
        $('#author').val(values.eq(2).val());
        $('#digest').html(values.eq(3).val());
        $('#source').val(values.eq(5).val());
        if($('.current .background-image').css("background-image") && $('.current .background-image').css("background-image") != 'none'){
            console.log($('.current .background-image').css("background-image").replace('url(','').replace(')',''))
            $("#image").show().find('img').attr('src', $('.current .background-image').css("background-image").replace('url("','').replace('")',''))
        }else{
            $("#image").hide();
            $("#image-add").show();
        }
        content = $(this).find('textarea').val()
        content = content.replace(/%3B/gm, ";")
		content = content.replace(/%26/gm, "&")

        ue.setContent(content)
        if(values.eq(6).val() == 0){
            $('#comment li').eq(0).click()
        }else{
            if(values.eq(7).val() == 0){
                $('#comment li').eq(1).click()
            }else{
                $('#comment li').eq(2).click()
            }
        }
    })
//    输入框的值改变事件

    $('#title').change(function () {
        var article_value = $('.current').find('input');
        article_value.eq(0).val($(this).val())
    })
    $('#author').change(function () {
        var article_value = $('.current').find('input');
        article_value.eq(2).val($(this).val())
    })
    $('#digest').change(function () {
        var article_value = $('.current').find('input');
        article_value.eq(3).val($(this).val())
    })
    $('#source').change(function () {
        var article_value = $('.current').find('input');
        article_value.eq(5).val($(this).val())
    })
    $('#comment li').click(function () {
        var article_value = $('.current').find('input');
        if($(this).attr('data-value') == 0){
            article_value.eq(6).val(0)
            article_value.eq(7).val(0)
        }
        if($(this).attr('data-value') == 1){
            article_value.eq(6).val(1)
            article_value.eq(7).val(0)
        }
        if($(this).attr('data-value') == 2){
            article_value.eq(6).val(1)
            article_value.eq(7).val(1)
        }
    })
    ue.addListener('blur', function () {
        var content = ue.getContent()
        content = content.replace(/data-src=/gm, "src=")
        ue.setContent(content)
        content = content.replace(/;/gm, "%3B")
		content = content.replace(/&/gm, "%26")
        $('.current').find('textarea').val(content);
    });
     ue.addListener( 'ready', function( editor ) {
         $('.current').click()
         if($('.current').find('input').eq(1).val()){
            $("#image-add").hide();
         }
     } );
//     图片上的按钮操作
    $("#article_list").on('mouseover', '.appmsg_item', function(){
        $(this).find('.image-button').show()
    })

    $("#article_list").on('mouseover', '.appmsg_item:last', function(){
        $(this).find('.am-icon-long-arrow-down').hide()
    })
    $("#article_list").on('mouseover', '.appmsg_item:first', function(){
        $(this).find('.am-icon-long-arrow-up').hide()
        $(this).find('.am-icon-trash-o').hide()
    })

    $("#article_list").on('mouseout', '.appmsg_item', function(){

        $(this).find('.image-button').hide()
        $(this).find('span').show()
    })
//    图片上的按钮点击
    $("#article_list").on('click', '.am-icon-long-arrow-up', function(){
        var parentDiv = $(this).parents('.article-content');
        var prev = parentDiv.prev()
        if(prev.html() !== undefined){
            prev.before(parentDiv)
        }
    })
    $("#article_list").on('click', '.am-icon-long-arrow-down', function(){
        var parentDiv = $(this).parents('.article-content');
        var next = parentDiv.next()
        if(next.html() !== undefined){
            next.after(parentDiv)
        }
    })
    $("#article_list").on('click', '.am-icon-trash-o', function(){
        $(this).parents('.article-content').remove();
    })
})