var submitData = {
    images: [],
    params: [],
    compstr: []
};
var uploadImgs = [];
var layerIndex = 0;
var attrList = null;
$(function () {
    $("#inputs").change(function (e) {
        var upload = $(this)[0];
        var file = upload.files[0];
        var fileData = new FormData();
        fileData.append("file", file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/handle/uploadfile", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var ret = JSON.parse(xhr.responseText);
                console.log('onreadystatechange===>', ret);
                if (ret.code == 1) {
                    layer.msg("文件上传成功。");
                    $("#uploadBox").append('<img src="' + ret.imgSite + ret.data + '" width="200px" style="margin-right:10px;" />');
                    uploadImgs.push(ret.imgSite + ret.data);
                } else {
                    layer.msg("文件上传失败。");
                }
            }
        };
        xhr.send(fileData);
        layer.msg("图片上传中...");
    });

    $.getJSON("/handle/GetAttrList", function (ret) {
        console.log('GetAttrList', ret);
        attrList = ret.data;
    })
})
function selectClass(o) {
    var me = $(o);
    if (!me.hasClass("active")) {
        submitData["classname"] = me.attr("title");
        submitData["bigimg"] = me.attr("path");
        me.addClass("active").siblings(".active").removeClass("active");
        $("#classImg").attr("src", me.attr("path"));
        var elem = null;
        var classId = me.attr("data-id");
        $("select.bind").each(function () {
            elem = $(this);
            elem.html("");
            var attrName = elem.attr("title");
            console.log("attrName=>", attrName);
            var m2 = attrList.find(m => m.AttrName == attrName);
            if (m2 && m2.AttrValues) {
                elem.append(("<option value=''>请选择" + attrName + "</option>"));
                var list1 = m2.AttrValues.filter(m => m.ClassId == classId);
                for (var t = 0; t < list1.length; t++) {
                    var m3 = list1[t];
                    console.log('opt-data-' + t, m3);
                    elem.append(("<option value='" + m3.AttrValue + "'>" + m3.AttrValue + "</option>"));
                }
            }
        })   
    }
}

function selectEvent(o) {
    var elem = $(o);
    var value = elem.val();
    var key = elem.attr("title");
    if (!submitData.params) {
        submitData.params = [];
    }
    submitData.params.push(key + ":" + value);
}
function create(o) {
    var btn = $(o);
    if (btn.hasClass("disabled")) {
        return;
    }
    if (!submitData.classname) {
        var elem1 = $(".tab-class.active");
        submitData["classname"] = elem1.attr("title");
        submitData["bigimg"] = elem1.attr("path");
    }
    var dt = new Date();
    var strParams = "";
    var arrParams = [];
    $(".bianhao_ul select").each(function () {
        var me = $(this);
        var v = me.val();
        var key = me.attr("title");
        if (v) {
            arrParams.push(key + ":" + v);
            strParams += '<div style="padding: 8px 10px;width:30%;">' + key + '：<span>' + v + '</span></div>';
        }
        else {
            layer.msg("请选择" + key);
            return false;
        }
    });
    if (arrParams.length != $(".bianhao_ul select").length) {
        return;
    }
    submitData.params = JSON.stringify(arrParams);

    var arr1 = [];
    $("#comp-list .chk_1:checked").each(function () {
        var me = $(this);
        arr1.push(me.attr("path"));
    });
    submitData.compstr = JSON.stringify(arr1);

    submitData.remark = $("#remark").val();
    submitData.name = $("#name").val();
    submitData.company = $("#company").val();
    submitData.tellphone = $("#tellphone").val();
    submitData.email = $("#email").val();
    if (!submitData.name) {
        layer.msg("请输入您的姓名");
        return;
    }
    if (!submitData.company) {
        layer.msg("请输入您的公司名称");
        return;
    }
    if (!submitData.tellphone) {
        layer.msg("请输入联系电话");
        return;
    }
    if (!submitData.email) {
        layer.msg("请输入电子邮箱");
        return;
    }
    var strImages = "";

    console.log("submitData----", submitData);
    if (uploadImgs) {
        submitData.images = JSON.stringify(uploadImgs);
    }
    layer.msg("数据提交中....");
    $.post('/handle/submitnaming', submitData, function (ret) {
        console.log("post-ret=>",ret);
        if (ret.code == 1) {
            var m = ret.data;
            layer.msg("数据保存成功，正在生成并下载PDF文件...");
            $("#tab_createtime").text(formatDate(dt, "yyyy-MM-dd HH:mm:ss"));
            $("#tab_classname").html(m.ClassName);
            $("#tab_classimg").attr("src", m.BigImg);
            $("#tab_params").html(strParams);

            if (m.CompStr) {
                var arr2 = JSON.parse(m.CompStr);
                var strComp = "";
                arr2.forEach(m => {
                    strComp += '<img src="' + m + '?v=1" alt="" width="200px" style="margin-right:10px;">';
                })
                $("#tab_comp").html(strComp);
            }
            if (m.Images) {
                var arr3 = JSON.parse(m.Images);
                var strImages = "";
                arr3.forEach(path => {
                    strImages += '<img src="' + path + '" alt="" width="150px" style="margin-right:10px;">';
                })
                $("#tab_images").html(strImages);
            }

            $("#tab_name").text(submitData.name);
            $("#tab_company").text(submitData.company);
            $("#tab_tellphone").text(submitData.tellphone);
            $("#tab_email").text(submitData.email);
            $("#tab_remark").text(submitData.remark);
            setTimeout(function () {
                PdfDownload('pdf_con', ret.data.Id);
            }, 500); 
            
        }
        else {
            layer.msg(ret.msg);
        }
    });
}
const PdfDownload = function (domId, code) {
    var targetDom = $('#' + domId)
    // 把需要导出的pdf内容clone一份，这样对它进行转换、微调等操作时才不会影响原来界面
    var copyDom = targetDom.clone()
    // 新的div宽高跟原来一样，高度设置成自适应，这样才能完整显示节点中的所有内容（比如说表格滚动条中的内容）
    copyDom.width(targetDom.width() + 'px')
    copyDom.height(targetDom.height() + 30 + 'px');
    copyDom.removeAttr("id");
    $('body').append(copyDom)// ps:这里一定要先把copyDom append到body下，然后再进行后续的
    setTimeout(function () {
        executeDown(copyDom[0], code)
    }, 500); 
}

function executeDown(copyDom, code) {
    html2canvas(copyDom, {
        onrendered: function (canvas) {
            var imgData = canvas.toDataURL();
            var img = new Image();
            img.src = imgData;
            img.setAttribute("crossOrigin", "Anonymous");
            // 根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
            img.onload = function () {
                // 此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
                if (this.width > this.height) {
                    var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
                } else {
                    var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
                }
                doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
                // 根据下载保存成不同的文件名
                doc.save('order_' + code + '.pdf');

                // 删除复制出来的div
                copyDom.remove();
                location.reload();
            }
        },
        background: '#FFF',
        // 这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
        allowTaint: true // 避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
    })
}

// 将图片转换为Base64
function imageUrlToBase64(img) {
    // 一定要设置为let，不然图片不显示
    let image = new Image();
    // 解决跨域问题
    image.setAttribute('crossOrigin', 'anonymous');
    let imageUrl = img;
    image.src = imageUrl;
    // image.onload为异步加载
    image.onload = () => {
        getImageBase64(image);
    };
};

function getImageBase64(image) {
    let canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    let quality = 0.8;
    // 这里的dataurl就是base64类型
    let dataURL = canvas.toDataURL('image/jpeg', quality);

};

/****数组扩展方法***/
var formatDate = function (v, format) {
    if (!v) return "";
    var d = v;
    if (typeof v === 'string') {
        if (v.indexOf("/Date(") > -1)
            d = new Date(parseInt(v.replace("/Date(", "").replace(")/", ""), 10));
        else
            d = new Date(Date.parse(v.replace(/-/g, "/").replace("T", " ").split(".")[0]));
    }
    var o = {
        "M+": d.getMonth() + 1,  //month
        "d+": d.getDate(),       //day
        "H+": d.getHours(),      //hour
        "m+": d.getMinutes(),    //minute
        "s+": d.getSeconds(),    //second
        "q+": Math.floor((d.getMonth() + 3) / 3),  //quarter
        "S": d.getMilliseconds() //millisecondjsonca4
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}
Array.prototype.remove = function (i) {
    if (isNaN(i) || i > this.length) { return false; }
    this.splice(i, 1);
}
Array.prototype.select = function (callback) {
    var arrResult = [];
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i])) {
            arrResult.push(this[i]);
        }
    }
    return arrResult;
}
Array.prototype.get = function (callback) {
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i])) {
            return this[i];
        }
    }
    return null;
}
Array.prototype.dele = function (callback) {
    var newArray = [];
    for (var i = 0; i < this.length; i++) {
        if (!callback(this[i])) {
            newArray.push(this[i]);
        }
    }
    return newArray;
}
Array.prototype.done = function (callback) {
    for (var i = 0; i < this.length; i++) {
        callback(this[i]);
    }
}