var app = new Vue({
    el: '#app',
    data: {
        // 用户信息
        memberInfo: {},
        // 当前编辑后图片
        preview: true,
        editPic: '',
        // 剪切参数
        cropParams: {
            id: 0,
            url: '',
            preview: '',
            cropData: {},
        },
        // 图片列表
        picList: {
            img1: {url: '', preview: ''},
            img2: {url: '', preview: ''}
        },
        // 预览状态
        cropPreviewStatus: false,
        // 上传状态
        submitting: false,
        // 打印方式
        printType: 1,
        // 色彩
        colorType: 1,
        image: null,
        // 设备ID
        deviceId: 0,
        // 剪切对象
        jc: false,
        id: 0,
    },
    created: function () {
        //this.getFileList();
        var printType = getParam('pt');
        this.id = getParam('id');
        this.printType = printType ? printType : 1;
    },
    mounted: function () {
        var _this = this;
        // 计时器
        var MAX = 100, MIN = 1;
        $('.weui-count__decrease').on('click', function (e) {
            var $input = $(e.target).siblings('.weui-count__number');
            var number = parseInt($input.val() || "0") - 1
            if (number < MIN) number = MIN;
            $input.val(number)
        })
        $('.weui-count__increase').on('click', function (e) {
            var $input = $(e.target).siblings('.weui-count__number');
            var number = parseInt($input.val() || "0") + 1;
            if (number > MAX) number = MAX;
            $input.val(number)
        });

        $(".weui-count__number").blur(function () {
            var num = $.trim($(this).val());
            if (!/[1-9][0-9]{0,2}/.test(num) || num < MIN || num > MAX) {
                num = 1;
            }
            $(this).val(num);
        });

        $("#colorType").change(function(){
            if($(this).is(":checked")){
                _this.colorType = 2;
            }else{
                _this.colorType = 1;
            }
        })
        
        $("body").css('overflow','hidden');
    },
    methods: {
        // 获取图片列表
        getFileList: function () {
            var _this = this;
            $.post('/weixin/print/getFileList', {type: 3}, function (res) {
                if (res.code == 'success') {
                } else if (res.code == 'login') {
                    login(res.data.url);
                }
            }, "json");
        },
        // 获取用户信息
        getMemberInfo: function () {
            var _this = this;
            $.post('/weixin/member/getMemberInfo', {}, function (res) {
                if (res.code == 'success') {
                    _this.memberInfo = res.data
                } else if (res.code == 'login') {
                    login(res.data.url);
                }
            }, "json");
        },
        // 提交
        doSubmit: function () {
            var _this = this;
            var count = 0;
            var formData = new FormData();
            if (_this.submitting) {
                return false;
            }
            if ((_this.picList.img1.preview == '' || typeof(_this.picList.img1.preview) == 'undefined') && (_this.picList.img2.preview == '' || typeof(_this.picList.img2.preview) == 'undefined')) {
                $.toast('请选择打印的图片');
                return false;
            }

            _this.preview = false;
            setTimeout(function(){
                $.closePopup();
                $("#previewBox").popup();
                // _this.colorType = $("#colorType").is(":checked") ? 2 : 1;
                var num = parseInt($("#papers-num").val());
                num = num > 0 ? num : 1;
                $("#previewBox").show();

                var $previewImg = document.getElementById("print-preview");
                html2canvas($previewImg, {scale: 3, useCORS: true}).then( function (canvas) {
                        const context = canvas.getContext('2d');
                        context.translate(0.5,0.5);
                        context.mozImageSmoothingEnabled = false;
                        context.webkitImageSmoothingEnabled = false;
                        context.msImageSmoothingEnabled = false;
                        context.imageSmoothingEnabled = false;
                        var src = canvas.toDataURL('image/jpeg');
                        var file = _this.dataURLtoFile(src, '证件打印.jpeg');
                        formData.append('type', 3);
                        formData.append('image[]', file);
                        formData.append('nums[]', num);
                        formData.append('colors[]', _this.colorType);
                        $.hideLoading();
                        _this.saveImg(formData);
                    }
                );
            }, 200)


        },
        // 保存图片
        saveImg: function (formData) {
            // 上传
            var _this = this;
            $.showLoading('文件上传处理中...');
            var ajax = $.ajax({
                url: '/weixin/upload/image',
                data: formData,
                type: "post",
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                timeout: 30000,
                success: function (res) {
                    $.hideLoading();
                    if (res.code == 'success') {
                        _this.showModal();
                    } else if (res.code == 'login') {
                        login(res.data.url);
                    } else {
                        $.toast(res.message);
                    }
                },
                error: function (res) {
                    $.toast('服务器错误');
                },
                complete: function (XMLHttpRequest, status) {
                    if (status == 'timeout') {
                        ajax.abort();
                        $.toast('请求超时，请重新提交');
                        location.reload();
                    }
                }
            })
        },
        // 显示填写窗口
        showModal: function () {
            var _this = this;
            $.closeModal();
            $.modal({
                title: "",
                autoClose: false,
                text: "<div class='scan'>填写/扫码打印设备</div><div class='tips'>设备号<input type='text' id='device_code' placeholder='请填写打印机设备号'></div>",
                buttons: [
                    {
                        text: "取消",
                        className: "default",
                        onClick: function () {
                            $.closeModal();
                            $.closePopup();
                            $("#previewBox").hide();
                            return false;
                        }
                    },
                    {
                        text: "扫码打印",
                        className: "warning",
                        onClick: function () {
                            _this.scan();
                        }
                    },
                    {
                        text: "填写打印",
                        className: "success",
                        onClick: function () {
                            _this.inputCode();
                            return false;
                        }
                    },
                ]
            });
        },
        // 输入设备号打印
        inputCode: function () {
            var _this = this;
            var deviceCode = $.trim($("#device_code").val());
            if (deviceCode == '' || deviceCode === null) {
                $.toast('请填写设备号');
                setTimeout(function () {
                    _this.showModal();
                }, 500)
                return false;
            }
            $.post('/weixin/print/checkDevice', {deviceCode: deviceCode}, function (res) {
                if (res.code == 'success') {
                    var deviceId = res.data.id;
                    $.closeModal();
                    $.modal({
                        title: "",
                        text: "<div class='scan'>设备验证成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
                        buttons: [
                            {
                                text: "取消",
                                className: "default",
                                onClick: function () {
                                    $.closeModal();
                                    setTimeout(function () {
                                        _this.showModal();
                                    }, 500)
                                    return false;
                                }
                            },
                            {
                                text: "确认下单",
                                className: "warning",
                                onClick: function () {
                                    var params = {
                                        clusterId: _this.id,
                                        deviceId: deviceId,
                                        printType: _this.printType,
                                        colorType: _this.colorType,
                                        type: 3
                                    };

                                    $.showLoading('订单处理中...');
                                    $.post('/weixin/order/confirm', params, function (res) {
                                        $.hideLoading();
                                        if (res.code == 'success') {
                                            var msg = _this.id > 0 && _this.printType == 2 ? '参与拼团成功' : (_this.printType == 2 ? '发起拼团成功' : '下单成功');
                                            $.showLoading(msg + '，即将前往支付...');
                                            setTimeout(function () {
                                                location.href = '/weixin/order/pay?id=' + res.data;
                                            }, 800);

                                        } else if (res.code == 'login') {
                                            login(res.data.url);
                                        } else {
                                            $.closeModal();
                                            $.modal({
                                                title: "",
                                                text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
                                                buttons: [
                                                    {
                                                        text: "取消",
                                                        onClick: function () {
                                                            return false;
                                                        }
                                                    }
                                                ]
                                            });
                                        }

                                    }, "json")
                                }
                            },
                        ]
                    });
                } else {
                    $.toast(res.message);
                    setTimeout(function () {
                        _this.showModal();
                    }, 500)
                }
            }, 'json');
        },
        // 扫码设备
        scan: function () {
            var _this = this;
            $.post('/weixin/index/getJssdkParams', {url: location.href}, function (res) {
                var params = res.data;
                // 微信JSSDK
                wx.config({
                    debug: false, // 是否调试模式
                    appId: params.appId, // 必填，公众号的唯一标识
                    timestamp: params.timestamp, // 必填，生成签名的时间戳
                    nonceStr: params.nonceStr, // 必填，生成签名的随机串
                    signature: params.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'scanQRCode'] // 必填，需要使用的JS接口列表
                });

                // 初始化处理
                wx.ready(function () {
                    // 微信扫一扫
                    $.closeModal();
                    wx.scanQRCode({
                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                            var deviceId = res.resultStr;
                            _this.deviceId = deviceId;
                            if (deviceId) {
                                $.closeModal();
                                $.modal({
                                    title: "",
                                    text: "<div class='scan'>扫码成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
                                    buttons: [
                                        {
                                            text: "取消",
                                            className: "default",
                                            onClick: function () {
                                                $.closeModal();
                                                setTimeout(function () {
                                                    _this.showModal();
                                                }, 500)
                                                return false;
                                            }
                                        },
                                        {
                                            text: "确认下单",
                                            className: "warning",
                                            onClick: function () {
                                                var params = {
                                                    clusterId: _this.id,
                                                    deviceId: deviceId,
                                                    printType: _this.printType,
                                                    colorType: _this.colorType,
                                                    type: 3
                                                };

                                                $.showLoading('订单处理中...');
                                                $.post('/weixin/order/confirm', params, function (res) {
                                                    $.hideLoading();
                                                    if (res.code == 'success') {
                                                        var msg = _this.id > 0 && _this.printType == 2 ? '参与拼团成功' : (_this.printType == 2 ? '发起拼团成功' : '下单成功');
                                                        $.showLoading(msg + '，即将前往支付...');
                                                        setTimeout(function () {
                                                            location.href = '/weixin/order/pay?id=' + res.data;
                                                        }, 800);

                                                    } else if (res.code == 'login') {
                                                        login(res.data.url);
                                                    } else {
                                                        $.closeModal();
                                                        $.modal({
                                                            title: "",
                                                            text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
                                                            buttons: [
                                                                {
                                                                    text: "取消",
                                                                    onClick: function () {
                                                                        return false;
                                                                    }
                                                                },
                                                                {
                                                                    text: "重新扫码下单",
                                                                    className: "warning",
                                                                    onClick: function () {
                                                                        _this.scan();
                                                                    }
                                                                },
                                                            ]
                                                        });
                                                    }

                                                }, "json")
                                            }
                                        },
                                    ]
                                });
                            } else {
                                $.toast('扫码信息错误');
                            }
                        }
                    });
                });
            }, "JSON");
        },
        // base转文件
        dataURLtoFile: function (dataurl, filename) {//将base64转换为文件
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        },
        // 删除图片
        picDel: function (id) {
            this.picList[id] = {url: '', preview: ''};
            $("#upload_"+id).val('');
        },
        // 彩印
        picColor: function (k) {
            if ($("#color_" + k).hasClass('active')) {
                $("#color_" + k).attr('data-color', 1);
                $("#color_" + k).text('黑白');
            } else {
                $("#color_" + k).attr('data-color', 2);
                $("#color_" + k).text('彩印');
            }
            $("#color_" + k).toggleClass('active');
        },
        // 编辑图片
        picEdit: function (id) {
            var _this = this;
            $.closePopup();
            $(".crop-img").html('<img id="cropImg" src="" alt="" off="">');
            _this.cropParams = JSON.parse(JSON.stringify(_this.picList[id]));
            if (_this.cropParams.url == '') {
                $.toast('请选择图片');
                return false;
            }
            $("#cropImg").attr('src', _this.cropParams.url);
            $image = $("#cropImg");

            $("#cropBox").popup();
            var imgWidth = 243;
            var imgHeight = 153;
            var options = {
                // aspectRatio: parseFloat(16/9),
                aspectRatio: parseFloat(243/153),
                // movable: false,
                //resizable: false,
                //touchDragZoom: true,
                //zoomable: true,
                // autoCropArea: 0.8,
                // zoomOnTouch: false,
                zoomOnWheel: false,
                scalable: false,
                // touchDragZoom: false,
                responsive:false,
                minCropBoxWidth: imgWidth,
                minCropBoxHeight: imgHeight,
                // maxCropBoxWidth: imgWidth,
                // maxCropBoxHeight: imgHeight,
                preview: '.preview_' + id,
                crop: function (data) {
                    /*var cropData = {
                        x: Math.round(data.x),
                        y: Math.round(data.y),
                        height: Math.round(data.height),
                        width: Math.round(data.width),
                        rotate: Math.round(data.rotate),
                    };*/


                    _this.cropParams.id = id;
                    _this.cropParams.cropData = {width: imgWidth*20, height: imgHeight*20, rotate: data.rotate, imageSmoothingQuality: 'high'};
                    // _this.picList[id].cropData = cropData;
                }
            }

            if (_this.jc != null) {
                $image.cropper(options);
                $image.cropper('replace', _this.cropParams.blobUrl);
            } else {
                $image.cropper(options);
                _this.jc = $image.cropper('replace', _this.cropParams.blobUrl);
            }

        },
        // 取消剪切
        cropCancel: function () {
            $.closePopup();
            $("#previewBox").hide();
            this.preview = true;
            if (this.jc != false) {
                $("#cropImg").cropper('destroy');
                this.jc = null;
                $("#cropImg").remove();
            }
        },
        // 预览剪切
        cropPreview: function () {
            $.closePopup();
            $("#previewBox").hide();
            $("#previewBox").popup();
            if(this.picList.img1.url || this.picList.img2.url){
                this.preview = false;
            }
        },
        // 旋转
        rotateConfirm: function(){
            $("#cropImg").cropper("rotate", 45);
        },
        // 缩放
        cropZoom: function(ele, type){
            $("#cropImg").cropper("zoom", type==1? 0.1 : -0.1);
        },
        // 确定剪切
        cropConfirm: function () {
            var _this = this;
            $.closePopup();
            $("#previewBox").hide();
            if (this.jc != null) {
                $.showLoading('图片处理中...');
                $image = $("#cropImg");
                var id = _this.cropParams.id;
                var canvas = $image.cropper('getCroppedCanvas', _this.cropParams.cropData);
                var url = canvas.toBlob(function(e){
                    //console.log(e);  //生成Blob的图片格式
                    var timestamp = Date.parse(new Date());
                    e.name=timestamp+".png";
                    url = URL.createObjectURL(e);
                    _this.picList[id].url = url;
                    _this.picList[id].preview = url;
                    // _this.picList[id].fileData = _this.dataURLtoFile(e, e.name);

                    setTimeout(function(){
                        $.hideLoading();
                        $("#cropImg").cropper('destroy');
                        _this.jc = null;
                        $("#cropImg").remove();
                    }, 300)

                },"image/jpeg");

            }
        },
        // 选择图片
        selectPic: function (ele, id) {
            var _this = this;
            var files = ele.target.files;
            console.log(files);
            if (files.length > 0) {
                $.each(files, function (k, file) {
                    if (file) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        var blobUrl = URL.createObjectURL(file);
                        reader.onloadend = function (even) {
                            var img = {
                                id: id,
                                url: even.currentTarget.result,
                                preview: even.currentTarget.result,
                                blobUrl: blobUrl,
                                name: file.name,
                                file_size: file.size,
                                file_type: file.type
                            };
                            _this.picList[id] = img;
                            setTimeout(function(){
                                _this.picEdit(id);
                            }, 300)
                        }
                    }
                })
                _this.getFileList(0);
            }

        }
    }
});