<template>
    <div class="mark-stage">
        <vuescroll ref="canvasScroll">
            <!-- canvas部分 -->
            <div class="container-box">
                <div id="container-mark" @mousemove="canvasMouseMove" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp"></div>
            </div>
        </vuescroll>
    </div>
</template>

<script>
import Konva from 'konva'
export default {
    name: 'MarkCanvas',
    props: {
        // 当前鼠标操作类型
        status: {
            type: String,
            default: '',
            required: true
        },
        //canvas主图（eg：学生作答数据）
        bgImg: {
            type: [String, Object],
            default: ''
        },
        //canvas绘制图片的数据（eg:添加表情包）
        drawImgData: {
            // type: [String, Object],
            default: ''
        },
        options: {
            type: Object,
            default: () => {
                return {
                    width: 600,         //画布宽度
                    height: 240,        //画布高度
                    lineColor: 'red',   //画笔颜色
                    lineWidth: 3,       //画笔粗细
                    textColor: 'red',   //文字颜色
                    textSize: 16        //文字大小
                }
            }
        }
    },
    data() {
        return {
            imgData: undefined,
            stage: undefined,
            orgLayer: undefined,
            markLayer: undefined,
            tr: undefined,
            scaleDefault: 1,
            maxScale: 5,
            minScale: 0.2,
            scaleStep: 0.2,
            imgWidth: 0,
            imgHeight: 0,
            isMouseDown: false,
            clickPoint: {
                x: 0,
                y: 0
            },
            mouseStatus: '', //move：移动  rect:画矩形 resize:调整图形
            moveBefore: '',
            rect: undefined,
            oval: undefined,
            arrow: undefined,
            text: undefined,
            line: undefined,
            img: undefined,
            isDltText: false,
        }
    },
    methods: {
        move() {
            this.mouseStatus = 'move'
        },
        drawImg() {
            this.mouseStatus = 'img'
            let p = this.stage.container().getBoundingClientRect()
            let x = p.width / this.scaleDefault - 100
            let y = p.height / this.scaleDefault - 90
            this.startImg({ x, y })
        },
        startImg(current) {
            let _this = this
            this.img = new Konva.Image({
                id: this.$tools.guid(),
                draggable: false,
                strokeScaleEnabled: false,
                image: _this.imgData,
                width: 80,
                height: 80,
                x: current.x,
                y: current.y
            })
            // 监听点击事件设置选中状态
            this.img.on('mousedown', (evt) => {
                _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus//记录resize之前的状态
                _this.mouseStatus = 'move'
                evt.target.draggable(true)
                evt.cancelBubble = true //阻止事件冒泡 
                _this.tr.nodes([evt.target])
                _this.markLayer.add(_this.tr)
            })
            this.img.on('mouseover', (evt) => {
                document.getElementById('container-mark').style.cursor = 'move'
                evt.cancelBubble = true //阻止事件冒泡
            })
            this.img.on('click', (evt) => {
                evt.cancelBubble = true //阻止事件冒泡
            })
            // 优化一些绘制逻辑
            this.img.on('mouseout', (evt) => {
                evt.cancelBubble = true //阻止事件冒泡
                let nodes = _this.tr.nodes()
                if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
            })
            // this.img.zIndex(1)
            this.markLayer.add(this.img)
            this.stage.add(this.markLayer)
            this.img = {}
        },
        drawText() {
            this.mouseStatus = 'text'
        },
        startText(current) {
            let _this = this
            if (!this.text) {
                this.text = new Konva.Text({
                    id: this.$tools.guid(),
                    fontSize: this.options.textSize,
                    text: '',
                    fill: this.options.textColor,
                    lineHeight: 1.5,
                    width: 180,
                    // height: 30,
                    x: _this.clickPoint.x / _this.scaleDefault,
                    y: _this.clickPoint.y / _this.scaleDefault,
                    draggable: false
                })
                _this.createTextArea(this.text, 'create')
                this.text.on('mousedown', (evt) => {
                    _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus//记录resize之前的状态
                    _this.mouseStatus = 'move'
                    evt.target.draggable(true)
                    evt.cancelBubble = true //阻止事件冒泡 
                    _this.tr.nodes([evt.target])
                    _this.markLayer.add(_this.tr)
                })
                this.text.on('click', (evt) => {
                    let textNode = evt.target
                    evt.cancelBubble = true //阻止事件冒泡 
                    textNode.hide()
                    _this.markLayer.draw()
                    _this.createTextArea(textNode, 'edit')
                })
                this.text.on("transform", function () {
                    textNode.setAttrs({
                        width: Math.max(
                            textNode.width() * textNode.scaleX(),
                            20
                        ),
                        height: Math.max(
                            textNode.height() * textNode.scaleY(),
                            20
                        ),
                        scaleX: 1,
                        scaleY: 1,
                    })
                })
                this.text.on('mouseover', (evt) => {
                    document.getElementById('container-mark').style.cursor = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                this.text.on('mouseout', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                    let nodes = _this.tr.nodes()
                    if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
                })

            } else {
                this.text.x(current.x)
                this.text.y(current.y)
            }
            this.markLayer.add(this.text)
            this.stage.add(this.markLayer)
        },
        /**
         * type create | edit
         */
        createTextArea(textNode, type) {
            let textPosition = textNode.absolutePosition()
            let stageBox = this.stage.container().getBoundingClientRect()
            let areaPosition
            if (type == 'create') {
                areaPosition = {
                    x: stageBox.left + textPosition.x * this.scaleDefault,
                    y: stageBox.top + textPosition.y * this.scaleDefault,
                }
            } else {
                areaPosition = {
                    x: stageBox.left + textPosition.x,
                    y: stageBox.top + textPosition.y,
                }
            }

            let textarea = document.createElement("textarea")
            document.body.appendChild(textarea)
            textarea.value = textNode.text()
            textarea.className = 'konva-textarea'
            textarea.style.position = "absolute"
            textarea.style.top = areaPosition.y + "px"
            textarea.style.left = areaPosition.x + "px"
            textarea.style.width = textNode.width() - textNode.padding() * 2 + "px"
            textarea.style.height = textNode.height() - textNode.padding() * 2 + 5 + "px"
            textNode.height() - textNode.padding() * 2 + 5 + "px"
            textarea.style.fontSize = textNode.fontSize() + "px"
            // if (type == 'create') {
            textarea.style.border = "1px solid red"
            // } else {
            //     textarea.style.border = "none"
            // }
            textarea.style.padding = "0px"
            textarea.style.margin = "0px"
            textarea.style.overflow = "hidden"
            textarea.style.background = "none"
            textarea.style.outline = "none"
            textarea.style.zIndex = 99999
            textarea.style.resize = "none"
            textarea.style.lineHeight = textNode.lineHeight()
            textarea.style.fontFamily = textNode.fontFamily()
            textarea.style.transformOrigin = "left top"
            textarea.style.textAlign = textNode.align()
            textarea.style.color = textNode.fill()
            let rotation = textNode.rotation()
            let transform = ""
            if (rotation) {
                transform += "rotateZ(" + rotation + "deg)"
            }
            let px = 0
            let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1
            if (isFirefox) {
                px += 2 + Math.round(textNode.fontSize() / 20)
            }
            transform += "translateY(-" + px + "px)"
            textarea.style.transform = transform
            textarea.style.height = "auto"
            textarea.style.height = textarea.scrollHeight + 3 + "px"
            textarea.focus()
            this.tr.nodes([])
            textarea.addEventListener("blur", (e) => {
                if (textarea.value) {
                    textNode.text(textarea.value)
                } else {
                    textNode.remove()
                }
                if (textarea.parentNode) textarea.parentNode.removeChild(textarea)
                textNode.show()
            })
            textarea.addEventListener("focus", (e) => {
                textarea.style.border = "1px solid red"
                this.tr.nodes([])
            })
            textarea.addEventListener("keydown", function (e) {
                let scale = textNode.getAbsoluteScale().x
                setTextareaWidth(textNode.width() * scale)
                textarea.style.height = "auto";
                textarea.style.height = textarea.scrollHeight + textNode.fontSize() * 2 + "px"
            })
            function setTextareaWidth(newWidth) {
                if (!newWidth) {
                    // set width for placeholder
                    newWidth = textNode.placeholder.length * textNode.fontSize();
                }
                // some extra fixes on different browsers
                let isSafari = /^((?!chrome|android).)*safari/i.test(
                    navigator.userAgent
                );
                let isFirefox =
                    navigator.userAgent
                        .toLowerCase()
                        .indexOf("firefox") > -1;
                if (isSafari || isFirefox) {
                    newWidth = Math.ceil(newWidth);
                }
                let isEdge =
                    document.documentMode ||
                    /Edge/.test(navigator.userAgent);
                if (isEdge) {
                    newWidth += 1;
                }
                textarea.style.width = newWidth + "px";
            }
        },
        drawLine() {
            this.mouseStatus = 'line'
        },
        startLine(current) {
            let _this = this
            if (!this.line) {
                this.line = new Konva.Line({
                    id: this.$tools.guid(),
                    stroke: this.options.lineColor,
                    strokeWidth: this.options.lineWidth,
                    draggable: false,
                    tension: 1,
                    points: [_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault]
                })
                _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus//记录resize之前的状态
                // 监听点击事件设置选中状态
                this.line.on('mousedown', (evt) => {
                    _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus//记录resize之前的状态
                    _this.mouseStatus = 'move'
                    evt.target.draggable(true)
                    evt.cancelBubble = true //阻止事件冒泡 
                    _this.tr.nodes([evt.target])
                    _this.markLayer.add(_this.tr)
                })
                this.line.on('mouseover', (evt) => {
                    document.getElementById('container-mark').style.cursor = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                this.line.on('click', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                })
                // 优化一些绘制逻辑
                this.line.on('mouseout', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                    let nodes = _this.tr.nodes()
                    if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
                })
            } else {
                this.line.points(this.line.points().concat([current.x / _this.scaleDefault, current.y / _this.scaleDefault]))
            }
            this.markLayer.add(this.line)
            this.stage.add(this.markLayer)
        },
        drawArrow() {
            this.mouseStatus = 'arrow'
        },
        // 绘制箭头
        startArrow(current) {
            let _this = this
            if (!this.arrow) {
                this.arrow = new Konva.Arrow({
                    id: this.$tools.guid(),
                    fill: 'transparent',
                    stroke: 'red',
                    strokeWidth: 4,
                    pointerLength: 10,
                    pointerWidth: 8,
                    draggable: false,
                    fill: 'red',
                    lineCap: 'round',
                    strokeScaleEnabled: false,
                    points: [_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault, (current.x) / _this.scaleDefault, (current.y) / _this.scaleDefault]
                })
                // 监听点击事件设置选中状态
                this.arrow.on('mousedown', (evt) => {
                    _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus//记录resize之前的状态
                    _this.mouseStatus = 'move'
                    evt.target.draggable(true)
                    evt.cancelBubble = true //阻止事件冒泡 
                    _this.tr.nodes([evt.target])
                    _this.markLayer.add(_this.tr)
                })
                this.arrow.on('mouseover', (evt) => {
                    document.getElementById('container-mark').style.cursor = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                this.arrow.on('click', (evt) => {
                    _this.mouseStatus = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                // 优化一些绘制逻辑
                this.arrow.on('mouseout', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                    document.getElementById('container-mark').style.cursor = 'default'
                    let nodes = _this.tr.nodes()
                    if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
                })
            } else {
                this.arrow.points([_this.clickPoint.x / _this.scaleDefault, _this.clickPoint.y / _this.scaleDefault, (current.x) / _this.scaleDefault, (current.y) / _this.scaleDefault])
            }
            this.markLayer.add(this.arrow)
            this.stage.add(this.markLayer)
        },
        drawOval() {
            this.mouseStatus = 'oval'
        },
        startOval(current) {
            let _this = this
            let rx = (current.x - _this.clickPoint.x) / _this.scaleDefault * 0.5
            let ry = (_this.clickPoint.y - current.y) / _this.scaleDefault * 0.5
            if (!this.oval) {
                this.oval = new Konva.Ellipse({
                    id: this.$tools.guid(),
                    x: _this.clickPoint.x,
                    y: _this.clickPoint.y,
                    radiusX: rx > 0 ? rx : -rx,
                    radiusY: ry,
                    fill: 'transparent',
                    stroke: 'red',
                    strokeWidth: 2,
                    draggable: false,
                    rotation: rx > 0 ? 0 : 180,
                    strokeScaleEnabled: false
                })
                _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus
                // 监听点击事件设置选中状态
                this.oval.on('mousedown', (evt) => {
                    _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus
                    _this.mouseStatus = 'move'
                    evt.target.draggable(true)
                    evt.cancelBubble = true //阻止事件冒泡 
                    _this.tr.nodes([evt.target])
                    _this.markLayer.add(_this.tr)
                })
                this.oval.on('mouseover', (evt) => {
                    document.getElementById('container-mark').style.cursor = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                this.oval.on('click', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                })
                // 优化一些绘制逻辑
                this.oval.on('mouseout', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                    let nodes = _this.tr.nodes()
                    if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
                })
            } else {
                this.oval.x(_this.clickPoint.x / _this.scaleDefault + rx)
                this.oval.y(_this.clickPoint.y / _this.scaleDefault - ry)
                this.oval.radiusX(rx > 0 ? rx : -rx)
                this.oval.radiusY(ry)
                this.oval.rotation(rx > 0 ? 0 : 180)
            }
            this.oval.zIndex(1)
            this.markLayer.add(this.oval)
            this.stage.add(this.markLayer)
        },
        //绘制矩形
        drawRect() {
            this.mouseStatus = 'rect'
        },
        startRect(current) {
            let _this = this
            //判断rect是否初始化
            if (!this.rect) {
                this.rect = new Konva.Rect({
                    id: this.$tools.guid(),
                    x: _this.clickPoint.x / _this.scaleDefault,
                    y: _this.clickPoint.y / _this.scaleDefault,
                    width: (current.x - _this.clickPoint.x) / _this.scaleDefault,
                    height: (current.y - _this.clickPoint.y) / _this.scaleDefault,
                    fill: 'transparent',
                    stroke: 'red',
                    strokeWidth: 2,
                    draggable: false,
                    strokeScaleEnabled: false
                })
                // 监听点击事件设置选中状态
                this.rect.on('mousedown', (evt) => {
                    _this.moveBefore = _this.mouseStatus == 'move' ? _this.moveBefore : _this.mouseStatus
                    _this.mouseStatus = 'move'
                    evt.target.draggable(true)
                    evt.cancelBubble = true //阻止事件冒泡
                    _this.tr.nodes([evt.target])
                    _this.markLayer.add(_this.tr)
                })
                this.rect.on('mouseover', (evt) => {
                    document.getElementById('container-mark').style.cursor = 'move'
                    evt.cancelBubble = true //阻止事件冒泡
                })
                this.rect.on('click', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                })
                // 优化一些绘制逻辑
                this.rect.on('mouseout', (evt) => {
                    evt.cancelBubble = true //阻止事件冒泡
                    let nodes = _this.tr.nodes()
                    if (_this.mouseStatus == 'move' && nodes.length == 0) _this.mouseStatus = _this.moveBefore
                })
            } else {
                this.rect.x(_this.clickPoint.x / _this.scaleDefault)
                this.rect.y(_this.clickPoint.y / _this.scaleDefault)
                this.rect.width((current.x - _this.clickPoint.x) / _this.scaleDefault)
                this.rect.height((current.y - _this.clickPoint.y) / _this.scaleDefault)
            }
            this.rect.zIndex(1)
            this.markLayer.add(this.rect)
            this.stage.add(this.markLayer)
        },
        //防抖函数
        debounce(func, delay) {
            return function () {
                window.clearTimeout(window.timeout)
                window.timeout = setTimeout(() => {
                    clearTimeout(window.timeout)
                    func.apply(this, arguments)
                }, delay)
            }
        },
        //还原比例
        restore() {
            this.scaleDefault = 1
            this.myScale()
        },
        // 缩小
        smaller() {
            this.scaleDefault -= this.scaleStep
            if (this.scaleDefault < this.minScale) {
                this.scaleDefault += this.scaleStep
                //函数防抖，优化重复提示
                this.debounce(() => {
                    this.$Message.warning('已经缩小到最小比例')
                }, 400)()
            } else {
                this.myScale()
            }
        },
        //放大
        larger() {
            this.scaleDefault += this.scaleStep
            if (this.scaleDefault > this.maxScale) {
                this.scaleDefault -= this.scaleStep
                //函数防抖，优化重复提示
                this.debounce(() => {
                    this.$Message.warning('已经放大到最大比例')
                }, 400)()
            } else {
                this.myScale()
            }
        },
        myScale() {
            this.stage.children.forEach(item => {
                item.scale({
                    x: this.scaleDefault,
                    y: this.scaleDefault
                })
            })
            this.stage.width(this.imgWidth * this.scaleDefault)
            this.stage.height(this.imgHeight * this.scaleDefault)
        },
        //绑定鼠标滚轮事件，操作缩放功能
        bundleScoll() {
            let stage = document.getElementById('container-mark')
            let _this = this
            stage.addEventListener('mousewheel', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false) || stage.addEventListener('DOMMouseScroll', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false)
        },
        //判断鼠标放大还是缩小
        scrollFunc(e) {
            let t = document.getElementsByClassName('konva-textarea')
            for (let node of t) {
                // if(node.parentNode) node.parentNode.removeChild(node)
            }
            e = e || window.event
            if (e.wheelDelta) { // 判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { // 当滑轮向上滚动时
                    this.larger()
                }
                if (e.wheelDelta < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            } else if (e.detail) { // Firefox滑轮事件
                if (e.detail > 0) { // 当滑轮向上滚动时
                    this.larger()
                }
                if (e.detail < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            }
        },
        //获取在canvas上的坐标
        getCanvasPoint(x, y) {
            // let canvas = document.getElementById('container')
            let canvas = document.getElementsByClassName('konvajs-content')
            let cs = canvas.length ? canvas[0] : null
            if (cs) {
                let canvasRect = cs.getBoundingClientRect()
                return {
                    x: x - canvasRect.left,
                    y: y - canvasRect.top
                }
            } else {
                return {
                    x, y
                }
            }
        },
        //按下鼠标事件
        canvasMouseDown(e) {
            this.isMouseDown = true
            this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY)
        },
        //鼠标弹起事件
        async canvasMouseUp() {
            this.isMouseDown = false
            switch (this.mouseStatus) {
                case 'move':
                    break
                case 'rect':
                    this.rect = null
                    break
                case 'oval':
                    this.oval = null
                    break
                case 'arrow':
                    this.arrow = null
                    break
                case 'text':
                    this.text = null
                    break
                case 'line':
                    this.line = null
                    break
                // case 'img':
                //     this.img = null
                //     break
                default:
                    break
            }
            if (this.mouseStatus != 'move') {
                let img = await this.saveAsImg()
                this.$emit('getImg', img)
            }

        },
        //鼠标移动事件
        canvasMouseMove(e) {
            if (this.isMouseDown) {
                let current = this.getCanvasPoint(e.clientX, e.clientY)
                switch (this.mouseStatus) {
                    case 'move':
                        this.$refs["canvasScroll"].scrollBy({
                            dx: this.clickPoint.x - current.x,
                            dy: this.clickPoint.y - current.y
                        }, 0)
                        break
                    case 'rect':
                        this.startRect(current)
                        break
                    case 'oval':
                        this.startOval(current)
                        break
                    case 'arrow':
                        this.startArrow(current)
                        break
                    // 点击事件触发文字
                    // case 'text':
                    //     this.startText(current)
                    //     break
                    case 'line':
                        this.startLine(current)
                        break
                    default:
                        break
                }
            }
        },

        //清除所有批注
        clear() {
            this.markLayer.removeChildren()
            this.stage.add(this.markLayer)
        },

        /* 保存批注 */
        saveAsImg() {
            return new Promise(async (r, j) => {
                let compressImg = await this.$editorTools.compressImg(this.stage.toDataURL(),
                    this.stage.attrs.width, this.stage.attrs.height)
                r({
                    base64: compressImg,
                    width: this.stage.attrs.width,
                    height: this.stage.attrs.height
                })
            })
        },
        initStage() {
            //创建画布
            this.stage = new Konva.Stage({
                container: 'container-mark',
                width: this.options.width,
                height: this.options.height
            })
            this.orgLayer = new Konva.Layer()
            this.markLayer = new Konva.Layer()
            this.stage.add(this.orgLayer)
            this.stage.add(this.markLayer)
            this.orgLayer.batchDraw()
            this.bundleScoll()
            this.stage.on('click', (evt) => {
                if (this.mouseStatus == 'text') {
                    this.startText()
                } else {
                    this.mouseStatus = this.moveBefore
                    this.tr.nodes([])
                }
            })
            this.stage.on('mouseover', (evt) => {
                document.getElementById('container-mark').style.cursor = 'default'
                let nodes = this.tr.nodes()
                if (this.mouseStatus == 'move' && nodes.length == 0) this.mouseStatus = this.moveBefore
            })
        }
    },
    mounted() {
        if (!this.stage) {
            this.initStage()
        }
        this.tr = new Konva.Transformer({
            rotateEnabled: false,
            anchorStroke: 'red',
            enabledAnchors: ['top-center', 'top-left', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right'],
            anchorSize: 8,
            borderStroke: 'red'
        })
        this.tr.on('mouseover', (evt) => {
            this.mouseStatus = 'move'
            evt.cancelBubble = true //阻止事件冒泡
        })
        this.tr.borderEnabled(true)
        this.tr.anchorCornerRadius(10)

    },
    created() {
        //监听删除按键，删除图形
        document.onkeydown = e => {
            if (e.keyCode == 8 && !this.isDltText) {
                let shape = this.tr ? this.tr.nodes() : []
                if (shape.length) {
                    shape[0].remove()
                    this.tr.nodes([])
                }
            }
        }
    },
    watch: {
        bgImg: {
            handler(n, o) {
                this.$nextTick(() => {
                    if (this.stage) {
                        this.restore()
                    } else {
                        this.initStage()
                    }
                    this.orgLayer.removeChildren()
                    this.markLayer.removeChildren()
                    let imageObj = new Image()
                    let _this = this
                    imageObj.onload = function () {
                        //创建画布
                        _this.imgWidth = imageObj.width
                        _this.imgHeight = imageObj.height
                        _this.stage.width(imageObj.width)
                        _this.stage.height(imageObj.height)
                        let img = new Konva.Image({
                            x: 0,
                            y: 0,
                            image: imageObj,
                            width: imageObj.width,
                            height: imageObj.height
                        })
                        _this.orgLayer.add(img)
                        _this.orgLayer.batchDraw()
                    }
                    imageObj.src = this.bgImg
                    this.stage.add(this.orgLayer)
                })
            },
            deep: true,
            immediate: true
        },
        drawImgData: {
            handler(n, o) {
                this.imgData = n
                this.drawImg()
            }
        },
        status: {
            handler(n, o) {
                this.mouseStatus = n || 'move'
            },
            immediate: true
        }
    }
}
</script>
<style scoped lang="less">
.mark-stage {
    flex: 1;
    overflow: hidden;
    background: white;
    text-align: center;
    position: relative;
    height: 100%;
}
.container-box {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
}
#container-mark {
    max-width: 100%;
}
</style>
<style>
.textarea:focus {
    box-shadow: none;
    overflow: hidden;
    outline: none !important;
    line-height: 1.5;
}
</style>