new Vue({
    el: "#container",
    data: {
        urls: [],
        canvas: null,
        image: null,
        scale: 1,
        angle: 0,
        totalAngle: 0,
        WebScan: null,
        isSetup: false,
        showBlankThre: false,
        showHotPixel: false,
        licence: 'gE/rN4vZATMg49y/OCFlZA==',
        form: {
            device: '',
            autofeeder: true,//自动进纸  false:只扫一张 true:扫描到没纸为止
            pixel: 1,//扫描模式 0：黑白 1：灰度  2：彩色
            white: false,//丢弃空白页
            discardBlankThre: 5,//跳过空白页阈值  1-100
            single: false,//单面扫描
            format: "jpg",//保存格式  jpg  png bmp tiff pdf ofd
            resolution: 100,//扫描分辨率  100-600
            orentation: 0,//图片旋转 0：原图 90：旋转90度  180：旋转180度  270：旋转270度
            paperType: "Auto",//扫描幅面  A3 Auto:自适应幅面 A4 A4R:A4横向
            splitImage: 0,//图像分割  0 disable 1垂直分割  2 水平分割
            noiseDetachEnable: true,//去除噪点  scanner
            noiseDetach: 15,//噪点阈值  10-50  scanner
            upload: {//上传参数
                uploadMode: 2,//是否边扫边上传 0：http 1：ftp 2:不上传
                httpUrl: '',//上传地址
                fileName: '',//接收文件参数名
                httpMethod: '',//上传方式 GET POST PUT
                header: '',//请求头
                param: '',//参数 json格式
                ftpUrl: '',//ftp 地址
                ftpPath: '/images',//路径
                ftpUser: '',//ftp 用户名
                ftpPassword: '',//ftp 密码
                ftpPort: 21,//端口号
                ftpMode: 2//连接模式 1：主动 2：被动
            }
        },
        devices: [],
        pid: "",
        imageName: '',
        loading: null,
        loadingPageShow: false,
        rectificationDialog: false,
        repSliderValue: 0,
        rules: {
            device: [
                {required: true, message: '请选择扫描仪', trigger: 'blur'}
            ],
            'upload.httpUrl': [{
                validator: this.validateHttpSet, trigger: 'blur'
            }],
            'upload.httpMethod': [{
                validator: this.validateHttpSet, trigger: 'blur'
            }],
            'upload.fileName': [{
                validator: this.validateHttpSet, trigger: 'blur'
            }],
            'upload.ftpUrl': [{
                validator: this.validateFtpSet, trigger: 'blur'
            }],
            'upload.ftpPath': [{
                validator: this.validateFtpSet, trigger: 'blur'
            }]
        },
        validateHttpSet: function (rule, value, callback) {
            if (this.form.upload.uploadMode == '0' && value == '') {
                callback(new Error('请输入必填项'));
            }
        },
        validateFtpSet: function (rule, value, callback) {
            if (this.form.upload.uploadMode == '1' && value == '') {
                callback(new Error('请输入必填项'));
            }
        },
        activeName: '1',
        isInsertScan: false,
        selectImageObj: {
            index: -1
        },
        redoStack: [],
        undoStack: [],
        startP: null,
        isUploadAllImage: false,
        uploadAllForm: {
            uploadMode: 0,
            httpUrl: '',
            fileName: '',
            httpMethod: '',
            header: '',
            param: '',
            ftpUrl: '',
            ftpPath: '/images',
            ftpUser: '',
            ftpPassword: '',
            ftpPort: 21,
            ftpMode: 2,
            format: 2
        },
        uploadAllRules: {
            'httpUrl': [{
                validator: this.validateUploadAllHttpSet, trigger: 'blur'
            }],
            'httpMethod': [{
                validator: this.validateUploadAllHttpSet, trigger: 'blur'
            }],
            'fileName': [{
                validator: this.validateUploadAllHttpSet, trigger: 'blur'
            }],
            'ftpUrl': [{
                validator: this.validateUploadAllFtpSet, trigger: 'blur'
            }],
            'ftpPath': [{
                validator: this.validateUploadAllFtpSet, trigger: 'blur'
            }]
        },
        assistLine: null,
        assistText: null,
        selectManyImages: [],
        validateUploadAllHttpSet: function (rule, value, callback) {
            if (this.uploadAllForm.uploadMode == '0' && value == '') {
                callback(new Error('请输入必填项'));
            }
        },
        validateUploadAllFtpSet: function (rule, value, callback) {
            if (this.uploadAllForm.uploadMode == '1' && value == '') {
                callback(new Error('请输入必填项'));
            }
        },
    },
    created: function () {
        //Vue的方法给原生调用，则需要把方法挂在Window下面
        window.eleLoadding = this.eleLoadding;
        window.eleAlert = this.eleMessage;
        window.scanCallBack = this.scanCallBack;
        window.setupWindowCallBack = this.setupWindowCallBack
    },
    mounted: function () {
        var width = $("#canvas-container").width();
        var height = $("#canvas-container").height();

        var canvas = new fabric.Canvas(
            'imageCanvas',
            {
                allowTouchScrolling: true,
                centeredRotation: true,
                centeredScaling: true,
                defaultCursor: 'default',
                hoverCursor: 'default',
                backgroundColor: "#ffffff",
                backgroundVpt: true,
                width: 500,
                height: 300
            }
        );
        this.canvas = canvas;

        let that = this


        this.WebScan = new WebScan({
            url: 'http://127.0.0.1:18999/WebScan',
            wsUrl: 'http://127.0.0.1:28999/',
            licence: that.licence
        });
        this.WebScan.disconnect();
        this.init();
    },
    watch: {
        'form.white'(newvalue, oldvalue) {
            this.showBlankThre = newvalue
        },

        'form.noiseDetachEnable'(newvalue, oldvalue) {
            this.showHotPixel = newvalue
        }
    },
    methods: {
        setupWindowCallBack: function (configJson) {
            alert('配置项为:' + configJson)
            console.log('配置项为:' + configJson)
        },
        setup: function () {
            this.isSetup = true;
        },
        eleLoadding: function () {
            return this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                target: '#container',
                background: 'rgba(0,0,0,0.7)'
            });
        },
        eleUnloadding: function () {
            this.loading.close();
        },
        eleMessage: function (msg, sign) {
            this.$message({
                message: msg,
                type: sign,
                duration: 2000
            });
        },
        whiteChanged: function (e) {
            this.showBlankThre = e
        },
        hotPixelChanged: function (e) {
            this.showHotPixel = e
        },
        selectImage: function (image, index) {
            this.selectImageObj = {
                "image": image,
                "index": index
            }
            console.log("selectImage: " + JSON.stringify(this.selectImageObj))
            this.loadImage(image);
            this.selectManyImages = new Array();
            this.selectManyImages.push(index);

        },
        selectManyImage: function (image, index) {
            var indexof = this.selectManyImages.indexOf(index);
            if (indexof >= 0) {
                var nextIndex = indexof + 1;
                if (nextIndex < this.selectManyImages.length) {
                    var index = this.selectManyImages[nextIndex];
                    this.selectImageObj = {
                        "image": this.urls[index],
                        "index": index
                    }
                    this.loadImage(this.urls[index]);
                } else {
                    var preIndex = indexof - 1;
                    if (preIndex >= 0) {
                        var index = this.selectManyImages[preIndex];
                        this.selectImageObj = {
                            "image": this.urls[index],
                            "index": index
                        }
                        this.loadImage(this.urls[index]);
                    } else {
                        this.loadImage(null);
                        $(".canvas-container").css("border", "none");
                    }
                }
                this.selectManyImages.splice(indexof, 1);
            } else {
                this.selectManyImages.push(index);
                this.loadImage(image);
            }
        },
        init: function () {
            var that = this;
            var loading = this.eleLoadding();
            this.WebScan.initSef(function (result) {
                console.log("initSef: " + JSON.stringify(result))

                if (result.code != 200) {
                    that.eleMessage('初始化失败', "error");
                    loading.close();
                    return;
                }
                that.pid = result.data;
                //获取上次的扫描结果
                that.getAllImages();
                that.getDevices();
                loading.close();
            });
        },
        getAllImages: function () {
            var that = this;
            var loading = this.eleLoadding();
            this.WebScan.getAllImages(function (result) {
                console.log("getAllImages: " + JSON.stringify(result))

                loading.close();
                if (result.code == 200) {
                    if (result.data != null && result.data.length > 0) {
                        that.urls = result.data;
                    }
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            })
        },
        deleteImage: function () {
            var that = this;
            if (this.selectImageObj == null || this.selectImageObj.image == null
                || this.selectImageObj.index == -1
            ) {
                this.eleMessage("请选择要删除的图像", "warning");
                return;
            }

            if (this.selectImageObj.image.imageName == null ||
                this.selectImageObj.image.imageName.length === 0) {
                this.eleMessage("当前图像异常", "warning");
                return;
            }

            this.$confirm('此操作将永久删除该文件, 是否继续?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: function (value) {
                    if (value == 'confirm') {
                        var loading = that.eleLoadding();
                        that.WebScan.deleteImage(that.selectImageObj.image.imageName, function (result) {
                            console.log("deleteImage: " + JSON.stringify(result))

                            loading.close();
                            if (result.code == 200) {
                                that.urls.splice(that.selectImageObj.index, 1);
                                if (that.selectImageObj.image.imageName == that.imageName) {
                                    if (that.urls.length > that.selectImageObj.index) {
                                        //选中下一个元素
                                        that.loadImage(that.urls[that.selectImageObj.index]);
                                    } else {
                                        that.clearDivListener();
                                        that.canvas.clear();
                                        that.canvas.setZoom(1);
                                        that.scale = 1;
                                        that.angle = 0;
                                        that.totalAngle = 0;
                                        that.canvas.discardActiveObject();
                                        $(".canvas-container").css("border", "none");
                                    }
                                }
                                that.eleMessage("删除成功", "success");
                            } else {
                                that.eleMessage(result.msg, "warning");
                            }
                        });
                    }
                }
            });
        },
        deleteAllImage: function () {
            var that = this;
            this.$confirm('此操作将永久清除该批次文件, 是否继续?', '清空列表', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: function (value) {
                    if (value == 'confirm') {
                        var loading = that.eleLoadding();
                        var result = that.WebScan.deleteAllImage(function (result) {
                            console.log("deleteAllImage: " + JSON.stringify(result))

                            loading.close();
                            if (result.code == 200) {
                                that.urls = new Array();
                                that.eleMessage("清空成功", "success");
                                window.location.reload();
                            } else {
                                that.eleMessage(result.msg, "warning");
                            }
                        });
                    }
                }
            })
        },
        addOptActive: function (e) {
            if (e == null || e == undefined) {
                return;
            }
            $(e.currentTarget).addClass("active");
            $(e.currentTarget).siblings().removeClass("active");
        },
        getDevices: function () {
            var that = this;
            this.WebScan.getDevices(function (result) {
                console.log("getDevices: " + JSON.stringify(result))
                if (result.code != 200) {
                    that.eleMessage(result.msg, "warning");
                    return;
                } else {
                    that.devices = result.data;
                    //获取浏览器中的内存
                    var localDevice = localStorage.getItem('webscan_device');
                    if (localDevice != null && devices.contains(localDevice)) {
                        that.form.device = localDevice;
                    }
                    if (that.devices != null && that.devices.length > 0) {
                        that.form.device = that.devices[0];
                    }
                }
                that.getUploadParam();
            });
        },
        getUploadParam: function () {
            var that = this;
            this.WebScan.getParams(function (result) {
                console.log("getParams: " + JSON.stringify(result))

                if (result.code != 200) {
                    that.eleMessage(result.msg, "warning");
                    return;
                } else {
                    if (result.data != null) {
                        if (that.devices == null || that.devices.length < 0) {
                            that.form.device = '';
                        }

                        that.form = result.data;
                    }
                }
            });
        },
        getLastBatch: function () {
            var that = this;
            if (that.WebScan.url) {
                utils.get({
                    "url": that.WebScan.url + "/getLastBatch",
                    cache: false,
                    success: function (data) {
                        console.log("getLastBatch: " + JSON.stringify(data))
                        if (data.code == 200) {
                            if (data.data != null && data.data != that.pid) {
                                window.location.reload();
                            } else {
                                that.eleMessage("当前批次已是最新批次", "warning");
                                return;
                            }
                        } else {
                            that.eleMessage(data.msg, "warning");
                            return;
                        }
                    }
                })
            }
        },
        scan: function () {
            var result = this.WebScan.startScan(window.scanCallBack, null);
            if (result.code != 200) {
                this.eleMessage(result.msg, "warning");
                return;
            }
            this.loading = this.eleLoadding();
        },
        insertScan: function () {
            if (this.selectImageObj == null || this.selectImageObj.image == null ||
                this.selectImageObj.image.imageName == undefined) {
                this.eleMessage("请选择插入图像", "warning");
            }

            var imageName = this.selectImageObj.image.imageName;
            var scanData = {
                "imageName": imageName,
                "isInsert": true,
            }
            var result = this.WebScan.startScan(window.scanCallBack, scanData);
            if (result.code != 200) {
                this.eleMessage(result.msg, "warning");
                return;
            }
            this.isInsertScan = true;
            this.loading = this.eleLoadding();
        },
        stopScan: function () {
            var result = this.WebScan.stopScan(window.scanCallBack, null);
            if (result.code != 200) {
                this.eleMessage(result.msg, "warning");
                return;
            }
        },
        scanCallBack: function (data) {
            this.eleUnloadding();
            console.log("scanCallBack:  " + JSON.stringify(data))
            var that = this
            var code = data.code;
            if (code == 201) {
                if (this.form.format === 'ofd' || this.form.format === 'pdf') {//生成的是一页的PDF ofd，直接下载
                    if (data.image != null && data.image != undefined) {
                        var blob = that.dataURLtoBlob(data.image);
                        var fileName = that.pid + "-" + data.imageName;
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, fileName);
                        } else {
                            that.blobToFile(blob, that.pid + "." + this.form.format);
                            let aLink = document.createElement('a');
                            document.body.appendChild(aLink);
                            let evt = document.createEvent("HTMLEvents");
                            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
                                                               // 事件类型，是否冒泡，是否阻止浏览器的默认行为
                            aLink.download = fileName;
                            aLink.href = URL.createObjectURL(blob);
                            aLink.click();
                            document.body.removeChild(aLink);
                        }
                    }
                } else {//是图片
                    var image = {
                        "src": data.image,
                        "imageName": data.imageName
                    }
                    if (this.isInsertScan) {
                        //找到文件位置，插入元素
                        var index = this.selectImageObj.index;
                        this.urls.splice(index, 0, image);
                        this.selectImageObj.index += 1;
                    } else {
                        this.urls.push(image);
                    }
                }
            }
            if (code == 203) {
                this.isInsertScan = false;
            }

            if (code == 204) {//扫描结束
                this.eleMessage(data.msg, "success");
            }
            if (data.code == 500) {
                this.eleMessage(data.msg, "warning");
            }
            if (code == 200) {
                console.log('连接成功')
            }
        },
        ajustDimensions: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            if (this.image == null || this.image == undefined) {
                return;
            }
            var width = $("#canvas-container").width() - 4;
            var height = $("#canvas-container").height() - 4;
            var zoom = Math.min(width / this.image.width, height / this.image.height);
            //图像压缩
            if (width > this.image.width && height > this.image.height) {
                width = this.image.width;
                height = this.image.height
            } else if (zoom < 1) {
                width = this.image.width * zoom;
                height = this.image.height * zoom;
            }
            //判断是否需要横放
            var oldEven = (this.totalAngle / 90) % 2;
            if (oldEven != 0 && this.totalAngle % 90 == 0) {
                this.canvas.setDimensions({
                    width: height,
                    height: width
                })
            } else {
                this.canvas.setDimensions({
                    width: width,
                    height: height
                })
            }
            this.canvas.setZoom(zoom);
            this.scale = zoom;
            this.canvas.renderAll.bind(this.canvas);
            this.clearDivListener();
        },
        loadImage: function (imageSrc) {
            this.clearDivListener();
            this.canvas.clear();
            this.canvas.setZoom(1);
            this.scale = 1;
            this.angle = 0;
            this.totalAngle = 0;
            this.canvas.discardActiveObject();
            var that = this;
            var src = imageSrc.src;
            new fabric.Image.fromURL(src, function (image) {
                that.image = image;
                that.imageName = imageSrc.imageName;
                that.canvas.add(image);
                that.ajustDimensions();
            }, {
                selectable: false
            });
            $(".canvas-container").css("border", "2px solid #e1e1e1");
        },
        realDimensions: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            if (this.image == null || this.image == undefined) {
                return;
            }
            var that = this;
            //判断是否需要横放
            var oldEven = (this.totalAngle / 90) % 2;
            if (oldEven != 0 && this.totalAngle % 90 == 0) {
                this.canvas.setDimensions({
                    width: that.image.height,
                    height: that.image.width
                })
            } else {
                this.canvas.setDimensions({
                    width: that.image.width,
                    height: that.image.height
                })
            }
            this.canvas.setZoom(1);
            this.canvas.renderAll.bind(this.canvas);
        },
        addListenerToDiv: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            var that = this;
            var startX = 0;
            var startY = 0;
            this.canvas.defaultCursor = 'pointer';
            this.canvas.hoverCursor = 'pointer';
            $("#canvas-container").bind("mousedown", function (e) {
                startX = e.offsetX;
                startY = e.offsetY;
                that.canvas.selection = false;
                $("#canvas-container").bind("mousemove", function (e) {
                    var endX = e.offsetX;
                    var endY = e.offsetY;
                    var offsetX = startX - endX;
                    var offsetY = startY - endY;
                    //获取现在X的滚动长度
                    var scrollY = $(this).scrollTop();
                    //获取当前Y的滚动长度
                    var scrollX = $(this).scrollLeft();
                    $(this).scrollLeft(scrollX + offsetX);
                    $(this).scrollTop(scrollY + offsetY);
                });
            });
            $("#canvas-container").bind("mouseup", function (e) {
                $(this).unbind("mousemove");
            });
        },
        clearDivListener: function () {
            $("#canvas-container").unbind("mouseup");
            $("#canvas-container").unbind("mousedown");
            this.canvas.defaultCursor = 'default';
            this.canvas.hoverCursor = 'default';
            this.canvas.off("mouse:down");
            this.canvas.off("mouse:up");
            this.canvas.off("mouse:move");
            this.rectificationDialog = false;
        },
        saveSetup: function () {
            var that = this;


            console.log('setparams:\n' + JSON.stringify(that.form))

            this.WebScan.setParams(that.form, function (result) {
                console.log("setParams: " + JSON.stringify(result))

                if (result.code == 200) {
                    that.eleMessage(result.msg, "success");
                    that.isSetup = false;
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            })
        },
        scaleMax: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            var height = this.$refs.canvasContainer.offsetHeight;
            var width = this.$refs.canvasContainer.offsetWidth;
            if (this.image == null) {
                this.$message.warning('请选择图像进行操作');
                return;
            }
            var offset = 0.1;
            var scale = this.scale;
            scale += offset;
            var canvasWidth = this.image.width * scale;
            var canvasHeight = this.image.height * scale;
            var oldEven = (this.totalAngle / 90) % 2;
            if (oldEven != 0 && this.totalAngle % 90 == 0) {
                this.canvas.setDimensions({
                    width: canvasHeight,
                    height: canvasWidth
                })
            } else {
                this.canvas.setDimensions({
                    width: canvasWidth,
                    height: canvasHeight
                })
            }
            this.canvas.setZoom(scale);
            this.scale = scale;
        },
        scaleMin: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            var height = this.$refs.canvasContainer.offsetHeight;
            var width = this.$refs.canvasContainer.offsetWidth;
            if (this.image == null) {
                this.$message.warning("请选择图像进行操作");
                return;
            }
            var offset = 0.1;
            var scale = this.scale;
            scale -= offset;
            if (scale < 0.1) {
                scale = 0.1;
            }
            var canvasWidth = this.image.width * scale;
            var canvasHeight = this.image.height * scale;
            var oldEven = (this.totalAngle / 90) % 2;
            if (oldEven != 0 && this.totalAngle % 90 == 0) {
                this.canvas.setDimensions({
                    width: canvasHeight,
                    height: canvasWidth
                })
            } else {
                this.canvas.setDimensions({
                    width: canvasWidth,
                    height: canvasHeight
                })
            }
            this.canvas.setZoom(scale);
            this.scale = scale;
        },
        rotate: function (rotate, $event) {
            if ($event != undefined) {
                this.addOptActive($event);
            }
            this.clearDivListener();
            this.redoStack.length = 0;
            this.rotateAngle(rotate);
            //添加undo
            var undo = {
                "type": 'rotate',
                "angle": rotate
            }
            this.undoStack.push(undo);
        },
        rotateAngle: function (rotate) {
            var that = this;
            // this.angle+=rotate;
            var zoom = this.canvas.getZoom();
            var group = new fabric.ActiveSelection(this.canvas.getObjects(), {
                selectable: false,
                hasBorders: false,
                hasControls: false,
                centeredRotation: true,
                originX: "center",
                originY: "center"
            });
            this.totalAngle += rotate;
            group.rotate(rotate);
            //旋转后的角度
            var oldEven = (this.totalAngle / 90) % 2;
            if (oldEven != 0 && this.totalAngle % 90 == 0) {
                //设置group偏移
                group.set({
                    left: that.image.height / 2,
                    top: this.image.width / 2
                });
                this.canvas.setDimensions({
                    width: that.image.height * zoom,
                    height: that.image.width * zoom
                });
            } else {
                group.set({
                    left: that.image.width / 2,
                    top: this.image.height / 2
                });
                // console.log(group.getCenterPointer());
                // console.log(that.image.width/2+","+this.imageHeight/2);
                this.canvas.setDimensions({
                    width: that.image.width * zoom,
                    height: that.image.height * zoom
                });
                this.canvas.setBackgroundColor("#ffffff");
            }
            this.canvas.renderAll();
            group.destroy();
        },
        /**
         * 纠偏
         * @param {Object} $event
         */
        rectification: function ($event) {
            if ($event != undefined) {
                this.addOptActive($event);
            }
            this.clearDivListener();
            this.rectificationDialog = true;
            this.repSliderValue = 0;
        },
        sliderRotateChange: function (value) {
            var that = this;
            var rotate = value - this.angle;
            this.angle = value;
            this.redoStack.length = 0;
            this.rotateAngle(rotate);
            //添加undo
            var undo = {
                "type": 'rotate',
                "angle": rotate
            }
            this.undoStack.push(undo);

        },
        innerErase: function ($event) {
            this.addOptActive($event);
            this.clearDivListener();
            var that = this;
            this.redoStack.length = 0;
            // this.canvas.discardActiveObject();
            var that = this;
            this.canvas.hoverCursor = 'crosshair';
            this.canvas.defaultCursor = 'crosshair';
            this.canvas.selection = true;
            this.canvas.on("mouse:down", function (e) {
                that.startP = that.canvas.getPointer(e);
            })
            that.canvas.on("mouse:up", function (e) {
                endPointer = that.canvas.getPointer(e);
                if (endPointer.x == that.startP.x && endPointer.y == that.startP.y) {
                    return;
                }
                //计算开始结束点和范围
                var width = endPointer.x - that.startP.x;
                var height = endPointer.y - that.startP.y;
                if (width < 0) {
                    width = -width;
                }
                if (height < 0) {
                    height = -height;
                }
                var startLeft = that.startP;
                if (endPointer.x < startLeft.x) {
                    startLeft.x = endPointer.x;
                }
                if (endPointer.y < startLeft.y) {
                    startLeft.y = endPointer.y;
                }
                //添加矩形区域
                var rect = new fabric.Rect({
                    fill: 'rgb(255,255,255)',
                    hasBorders: false,
                    hasControls: false,
                    left: startLeft.x,
                    top: startLeft.y,
                    width: width,
                    height: height,
                    preserveObjectStacking: true,
                    selectable: false
                })
                that.canvas.add(rect);
                var objects = new Array();
                objects.push(rect);
                var undo = {
                    "type": 'addObjects',
                    "objects": objects
                }
                that.undoStack.push(undo);
            });
        },
        outerErase: function ($event) {
            this.redoStack.length = 0;
            this.addOptActive($event);
            this.clearDivListener();
            var that = this;
            // this.canvas.discardActiveObject();
            this.canvas.hoverCursor = 'crosshair';
            this.canvas.selection = true;
            this.canvas.on("mouse:down", function (e) {
                that.startP = that.canvas.getPointer(e);
                console.log(that.startP);
            })
            that.canvas.on("mouse:up", function (e) {
                var endPointer = that.canvas.getPointer(e);
                if (endPointer.x == that.startP.x && endPointer.y == that.startP.y) {
                    return;
                }
                //计算开始结束点和范围
                var width = endPointer.x - that.startP.x;
                width = width < 0 ? -width : width;
                var height = endPointer.y - that.startP.y;
                height = height < 0 ? -height : height;

                var startP = {x: that.startP.x, y: that.startP.y};
                var endP = {x: endPointer.x, y: endPointer.y}
                if (endPointer.x < that.startP.x) {
                    startP.x = endPointer.x;
                    endP.x = that.startP.x;
                }
                if (endPointer.y < that.startP.y) {
                    startP.y = endPointer.y;
                    endP.y = that.startP.y;
                }
                var objects = new Array();
                //区域外的地方设置为透明
                var rectTop = new fabric.Rect({
                    fill: 'rgb(255,255,255)',
                    hasBorders: false,
                    hasControls: false,
                    left: 0,
                    top: 0,
                    width: that.image.width,
                    height: startP.y,
                    selectable: false
                })
                that.canvas.add(rectTop);
                objects.push(rectTop);
                var rectLeft = new fabric.Rect({
                    fill: 'rgb(255,255,255)',
                    hasBorders: false,
                    hasControls: false,
                    left: 0,
                    top: 0,
                    width: startP.x,
                    height: that.image.height,
                    selectable: false
                })
                that.canvas.add(rectLeft);
                objects.push(rectLeft);
                var rectBottom = new fabric.Rect({
                    fill: 'rgb(255,255,255)',
                    hasBorders: false,
                    hasControls: false,
                    left: 0,
                    top: endP.y,
                    width: that.image.width,
                    height: that.image.height - endP.y,
                    selectable: false
                })
                that.canvas.add(rectBottom);
                objects.push(rectBottom);
                var rectRight = new fabric.Rect({
                    fill: 'rgb(255,255,255)',
                    hasBorders: false,
                    hasControls: false,
                    left: endP.x,
                    top: 0,
                    width: that.image.width - endP.x,
                    height: that.image.height,
                    selectable: false
                })
                that.canvas.add(rectRight);
                objects.push(rectRight);
                var undo = {
                    "type": 'addObjects',
                    "objects": objects
                }
                that.undoStack.push(undo);
            });
        },
        undo: function ($event) {
            if (this.undoStack.length <= 0) {
                return false;
            }
            this.addOptActive($event);
            this.clearDivListener();
            var undo = this.undoStack.pop();
            if (undo == undefined) {
                return false;
            }
            if (undo.type == 'rotate') {
                var rotate = undo.angle;
                this.rotateAngle(-rotate);
                //添加redo
                var redo = {
                    "type": "rotate",
                    "angle": -rotate
                }
                this.redoStack.push(redo);
            }
            if (undo.type == 'addObjects') {
                var objects = undo.objects;
                if (objects != null && objects.length > 0) {
                    for (var i = 0; i < objects.length; i++) {
                        var obj = objects[i];
                        this.canvas.remove(obj);
                    }
                }
                var redo = {
                    "type": "addObjects",
                    "objects": objects
                }
                this.redoStack.push(redo);
            }
        },
        redo: function ($event) {
            if (this.redoStack.length <= 0) {
                return false;
            }
            this.addOptActive($event);
            this.clearDivListener();
            var that = this;
            var redo = this.redoStack.pop();
            if (redo.type == 'rotate') {
                var rotate = redo.angle;
                this.rotateAngle(-rotate);
                //添加redo
                var undo = {
                    "type": "rotate",
                    "angle": -rotate
                }
                this.undoStack.push(undo);
            }
            if (redo.type == 'addObjects') {
                var objects = redo.objects;
                if (objects != null && objects.length > 0) {
                    for (var i = 0; i < objects.length; i++) {
                        var obj = objects[i];
                        this.canvas.add(obj);
                    }
                }
                var undo = {
                    "type": "addObjects",
                    "objects": objects
                }
                this.undoStack.push(undo);
            }
        },
        save: function () {
            if (this.imageName == null || this.imageName == '') {
                this.eleMessage("请选择图像", "warning");
                return;
            }
            this.clearDivListener();

            var zoom = this.canvas.getZoom();
            zoom = 1 / zoom;
            var dataUrl = this.canvas.toDataURL({
                format: 'jpeg',
                multiplier: zoom,
                quality: 1
            });

            var that = this;
            var loading = this.eleLoadding();
            console.log('save image  dataUrl:' + dataUrl)
            this.WebScan.saveImage(this.imageName, dataUrl, function (result) {
                loading.close();
                if (result.code == 200) {
                    that.eleMessage("保存成功", "success");
                    that.undoStack.length = 0;
                    that.redoStack.length = 0;
                    //获取选中的一张重新赋值
                    that.selectImageObj.image.src = dataUrl;
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            });
        },
        exportOfd: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorOFD(true, function (result) {
                console.log("majorOFD: " + JSON.stringify(result))

                loading.close();
                if (result.code == 200) {
                    var data = result.data;
                    if (data != null && data != undefined) {
                        var blob = that.dataURLtoBlob(data);
                        var ofdName = that.pid + ".ofd";
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, ofdName);
                        } else {
                            var file = that.blobToFile(blob, that.pid + ".ofd");
                            var aLink = document.createElement('a');
                            document.body.appendChild(aLink);
                            var evt = document.createEvent("HTMLEvents");
                            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
                                                               // 事件类型，是否冒泡，是否阻止浏览器的默认行为
                            aLink.download = that.pid + ".ofd";
                            aLink.href = URL.createObjectURL(blob);
                            aLink.click();
                            document.body.removeChild(aLink);
                        }
                    }
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            });
        },
        exportOfdFile: function () {

            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorOFDFile(true, function (result) {
                console.log("majorOFD: " + JSON.stringify(result))

                loading.close();
                if (result.status == 200) {
                    // 返回200
                    var blob = result.response;
                    /* var reader = new FileReader();
                     reader.readAsDataURL(blob);
                     reader.onload = function (e) {
                         // 转换完成，创建一个a标签用于下载
                         var a = document.createElement('a');
                         a.download = that.pid+'.ofd';
                         a.href = e.target.result;
                         $("body").append(a);  // 修复firefox中无法触发click
                         a.click();
                         $(a).remove();
                     }*/
                    saveAs(blob, that.pid + '.ofd')
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            });
        },
        exportPdf: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorPDF(function (result) {
                console.log("majorPDF: " + JSON.stringify(result))

                loading.close();
                if (result.code == 200) {
                    var data = result.data;
                    if (data != null && data != undefined) {
                        var blob = that.dataURLtoBlob(data);
                        var ofdName = that.pid + ".pdf";
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, ofdName);
                        } else {
                            var file = that.blobToFile(blob, that.pid + ".pdf");
                            var aLink = document.createElement('a');
                            document.body.appendChild(aLink);
                            var evt = document.createEvent("HTMLEvents");
                            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
                                                               // 事件类型，是否冒泡，是否阻止浏览器的默认行为
                            aLink.download = that.pid + ".pdf";
                            aLink.href = URL.createObjectURL(blob);
                            aLink.click();
                            document.body.removeChild(aLink);
                        }
                    }
                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        exportPdfFile: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorPDFFile(function (result) {
                console.log("majorPDF: " + JSON.stringify(result.response))

                loading.close();
                if (result.status == 200) {
                    // 返回200
                    var blob = result.response;
                    /*var reader = new FileReader();
                    reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                    reader.onload = function (e) {
                        // 转换完成，创建一个a标签用于下载
                        var a = document.createElement('a');
                        a.download = that.pid + '.pdf';
                        a.href = e.target.result;
                        $("body").append(a);  // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                    }*/
                    saveAs(blob, that.pid + '.pdf')

                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        exportTiff: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorTiff(function (result) {
                console.log("majorTiff: " + JSON.stringify(result))

                loading.close();
                if (result.code == 200) {
                    var data = result.data;
                    if (data != null && data != undefined) {
                        var blob = that.dataURLtoBlob(data);
                        var ofdName = that.pid + ".tiff";
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, ofdName);
                        } else {
                            var file = that.blobToFile(blob, that.pid + ".tiff");
                            var aLink = document.createElement('a');
                            document.body.appendChild(aLink);
                            var evt = document.createEvent("HTMLEvents");
                            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
                                                               // 事件类型，是否冒泡，是否阻止浏览器的默认行为
                            aLink.download = that.pid + ".tiff";
                            aLink.href = URL.createObjectURL(blob);
                            aLink.click();
                            document.body.removeChild(aLink);
                        }
                    }
                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        exportTiffFile: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorTiffFile(function (result) {
                console.log("majorTiff: " + result)

                loading.close();
                if (result.status == 200) {
                    // 返回200
                    var blob = result.response;
                    /* var reader = new FileReader();
                     reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                     reader.onload = function (e) {
                         // 转换完成，创建一个a标签用于下载
                         var a = document.createElement('a');
                         a.download = 'dd.tiff';
                         a.href = e.target.result;
                         $("body").append(a);  // 修复firefox中无法触发click
                         a.click();
                         $(a).remove();
                     }*/

                    saveAs(blob, that.pid + '.tiff')

                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        exportZip: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorZip(function (result) {
                console.log("majorZip: " + JSON.stringify(result))

                loading.close();
                if (result.code == 200) {
                    var data = result.data;
                    if (data != null && data != undefined) {
                        var blob = that.dataURLtoBlob(data);
                        var ofdName = that.pid + ".zip";
                        if (window.navigator.msSaveOrOpenBlob) {
                            navigator.msSaveBlob(blob, ofdName);
                        } else {
                            var file = that.blobToFile(blob, that.pid + ".zip");
                            var aLink = document.createElement('a');
                            document.body.appendChild(aLink);
                            var evt = document.createEvent("HTMLEvents");
                            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错
                                                               // 事件类型，是否冒泡，是否阻止浏览器的默认行为
                            aLink.download = that.pid + ".zip";
                            aLink.href = URL.createObjectURL(blob);
                            aLink.click();
                            document.body.removeChild(aLink);
                        }
                    }
                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        exportZipFile: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }
            var loading = this.eleLoadding();
            var that = this;
            this.WebScan.majorZipFile(function (result) {
                console.log("majorZip: " + JSON.stringify(result))

                loading.close();
                if (result.status == 200) {
                    // 返回200
                    var blob = result.response;
                    /* var reader = new FileReader();
                     reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                     reader.onload = function (e) {
                         // 转换完成，创建一个a标签用于下载
                         var a = document.createElement('a');
                         a.download = 'dd.zip';
                         a.href = e.target.result;
                         $("body").append(a);  // 修复firefox中无法触发click
                         a.click();
                         $(a).remove();
                     }*/
                    saveAs(blob, that.pid + '.zip')

                } else {
                    that.$message.warning(result.msg);
                }
            });
            loading.close();
        },
        // 将base64转换为blob
        dataURLtoBlob: function (dataurl) {
            var bstr = atob(dataurl)
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new Blob([u8arr])
        },
        // 将blob转换为file
        blobToFile: function (theBlob, fileName) {
            theBlob.lastModifiedDate = new Date()
            theBlob.name = fileName
            return theBlob
        },
        upload: function () {
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("图像列表为空，请刷新后尝试", "warning");
                return;
            }
            this.isUploadAllImage = true;
        },
        uploadAllImage: function () {
            var that = this;
            this.isUploadAllImage = false;
            var loading = this.eleLoadding();
            this.WebScan.uploadImage(this.uploadAllForm, function (result) {
                console.log("uploadImage: " + JSON.stringify(result))

                loading.close();
                console.log("uploadAllImage  code:" + result.code + "  msg:" + result.msg)
                if (result.code == 200) {
                    that.eleMessage("上传成功", "success");
                } else {
                    that.eleMessage(result.msg, "warning");
                }
            })
        },
        resetPatchIndex: function () {
            var that = this;
            this.WebScan.resetPatchIndex(function (result) {
                console.log("resetPatchIndex: " + JSON.stringify(result))
                if (result.code === 200) {
                    var data = result.data;
                    if (data != null && data != undefined) {
                        that.$message.warning(result.data);
                    }
                } else {
                    that.$message.warning(result.msg);
                }
            });
        },
        split: function (isHorizontal, $event) {

            if (this.selectImageObj == null || this.selectImageObj.image == null ||
                this.selectImageObj.image == undefined) {
                this.eleMessage("请选择要切分的文件", "warning");
                return;
            }
            this.clearDivListener();
            this.addOptActive($event);
            var that = this;
            var fontSize = 18;
            var zoom = this.canvas.getZoom();
            fontSize = fontSize / zoom;
            this.canvas.on("mouse:down", function (ev) {
                var pointer = that.canvas.getPointer(ev);
                if (isHorizontal) {
                    that.assistLine =
                        new fabric.Line([pointer.x, 0, pointer.x, that.image.height], {
                            fill: 'red',
                            stroke: 'red',    //笔触颜色
                            strokeWidth: 2,//笔触宽度
                            selectable: false
                        });
                    that.assistText = new fabric.IText('双击进行切分', {
                        left: pointer.x + 10,
                        top: pointer.y,
                        fill: '#ff0000',
                        fontSize: fontSize,
                        selectable: false
                    });
                    that.canvas.add(that.assistText);
                    that.canvas.add(that.assistLine);
                } else {
                    that.assistLine = new fabric.Line([0, pointer.y, that.image.width, pointer.y], {
                        fill: 'red',
                        stroke: 'red',    //笔触颜色
                        strokeWidth: 2,//笔触宽度
                        selectable: false
                    });
                    that.canvas.add(that.assistLine);
                    that.assistText = new fabric.IText('双击进行切分', {
                        left: pointer.x + 10,
                        top: pointer.y + 10,
                        fill: '#ff0000',
                        fontSize: fontSize,
                        selectable: false
                    });
                    that.canvas.add(that.assistText);
                }
                that.canvas.on("mouse:move", function (event) {
                    that.canvas.off("mouse:down");
                    var movepointer = that.canvas.getPointer(event);
                    that.canvas.remove(that.assistLine);
                    that.canvas.remove(that.assistText);
                    if (isHorizontal) {
                        that.assistLine =
                            new fabric.Line([movepointer.x, 0, movepointer.x, that.image.height], {
                                fill: 'red',
                                stroke: 'red',    //笔触颜色
                                strokeWidth: 2,//笔触宽度
                                selectable: false
                            });
                        that.assistText = new fabric.IText('双击进行切分', {
                            left: movepointer.x + 10,
                            top: movepointer.y,
                            fill: '#ff0000',
                            fontSize: fontSize,
                            selectable: false
                        });
                        that.canvas.add(that.assistText);
                        that.canvas.add(that.assistLine);
                    } else {
                        that.assistLine =
                            new fabric.Line([0, movepointer.y, that.image.width, movepointer.y], {
                                fill: 'red',
                                stroke: 'red',    //笔触颜色
                                strokeWidth: 2,//笔触宽度
                                selectable: false
                            });
                        that.assistText = new fabric.IText('双击进行切分', {
                            left: movepointer.x + 10,
                            top: movepointer.y + 10,
                            fill: '#ff0000',
                            fontSize: fontSize,
                            selectable: false
                        });
                        that.canvas.add(that.assistText);
                        that.canvas.add(that.assistLine);
                    }
                })
                that.canvas.on("mouse:dblclick", function (ev) {
                    that.$confirm('文件拆分后不可撤销, 是否继续?', '拆分', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (value) {
                            if (value == "confirm") {
                                that.clearDivListener();
                                var loading = this.eleLoadding();

                                that.WebScan.split(that.selectImageObj.image.imageName, isHorizontal, that.assistLine.x1,
                                    that.assistLine.y1, that.assistLine.x2, that.assistLine.y2, function (result) {
                                        loading.close();
                                        console.log('拆分结果：' + JSON.stringify(result))
                                        if (result.code == 200) {
                                            that.eleMessage("切分成功", "success");
                                            that.selectImageObj.image.src = result.data.oneSrc;

                                            let currentImage = {
                                                "imageName": result.data.oneName,
                                                "src": result.data.oneSrc
                                            }
                                            that.loadImage(currentImage)
                                            that.getAllImages()
                                        } else {
                                            that.eleMessage(result.msg, "warning");
                                        }
                                    })


                            } else {
                                that.canvas.remove(that.assistLine);
                                that.canvas.remove(that.assistText);
                            }
                        }
                    });
                })
            })
        },
        mergeHorizontal: function (isHorizontal) {
            if (this.selectManyImages == null || this.selectManyImages == undefined ||
                this.selectManyImages.length <= 0) {
                this.eleMessage("请选择要合并的图像", "warning");
                return;
            }
            if (isHorizontal == null || isHorizontal == undefined) {
                isHorizontal = true;
            }
            var that = this;
            var sortList = that.selectManyImages.sort();
            this.$confirm('此操作将合并文件，合并后不可恢复, 是否继续?', '合并', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: function (value) {
                    if (value == 'confirm') {
                        var loading = that.eleLoadding();
                        that.WebScan.merge(isHorizontal, sortList, function (result) {
                            loading.close();
                            if (result.code == 200) {
                                var data = result.data;
                                var image = {
                                    "src": data.src,
                                    "imageName": data.imageName
                                }
                                that.getAllImages()
                                that.loadImage(image)
                            } else {
                                that.eleMessage(result.msg, "warning");
                            }
                        })
                    }
                },
            })
        },
        exchangeImage: function () {
            if (this.selectManyImages == null || this.selectManyImages == undefined ||
                this.selectManyImages.length <= 0) {
                this.eleMessage("请选择要交换的图像！", "warning");
                return;
            }

            if (this.selectManyImages.length != 2) {
                this.eleMessage("请选择两张图像进行交换！", "warning");
                return;
            }

            var that = this;

            var loading = that.eleLoadding();
            that.WebScan.exchangeImage(that.selectManyImages, function (result) {
                loading.close();
                if (result.code == 200) {

                    var sortList = that.selectManyImages.sort();

                    let first = that.urls[sortList[0]];
                    let last = that.urls[sortList[1]];

                    that.urls.splice(sortList[0], 1, last)
                    that.urls.splice(sortList[1], 1, first)


                } else {
                    that.eleMessage(result.msg, "warning");
                }
            })

        },
        bookSort: function () {//是否是按照书籍类型来排序
            if (this.urls == null || this.urls.length <= 0) {
                this.eleMessage("该批次不包含图像", "warning");
                return;
            }

            let that = this;
            let loading = that.eleLoadding();

            that.WebScan.bookSort(function (result) {
                loading.close();
                if (result.code == 200) {

                    if (result.data != null && result.data.length > 0) {
                        that.urls = result.data;
                    }

                } else {
                    that.eleMessage(result.msg, "warning");
                }
            })
        },
    }
})