<template>
    <div>
        <Upload action="" :on-success="uploadSchoolPlan" :before-upload="getFileData">
            <Button icon="ios-cloud-upload-outline">{{$t('schoolBaseInfo.uploadPlan')}}</Button>
        </Upload>
        <div class="school-plan-zoom">
            <span @click="defaultSize()">1:1</span>
            <Icon type="ios-add-circle-outline" color="white" size="24" @click="bigger()" />
            <Icon type="ios-remove-circle-outline" color="white" size="24" @click="smaller()" />
        </div>
        <div class="school-plan-box" id="school-plan-box">
            <canvas id="school-plan" style="cursor:move;" @mousedown="canvasMouseDown" @mousemove="canvasMouseMove" @mouseup="canvasMouseUp" @mouseout="canvasMouseOut">
                {{$t('schoolBaseInfo.suportCanvas')}}
            </canvas>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            schoolPlan: '',
            point: {},
            clickPoint: {},
            isMouseDown: false,
            isFirstDraw: 0,
            schoolImageData: [],
            pinImageData: {},
            whiteImageData: {},
            greenImageData: {},
            activeIcon: -1,
            textStatus: true,
            scaleDefault: 1,
            maxScale: 3,
            minScale: 0.4,
            scaleStep: 0.1,
            stopScale: false,
        }
    },
    methods: {
        bundleScoll() {
            let schoolPlanBox = document.getElementById('school-plan-box')
            let _this = this
            schoolPlanBox.addEventListener('mousewheel', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false) || schoolPlanBox.addEventListener('DOMMouseScroll', function (e) {
                if (e.preventDefault) {
                    e.preventDefault()
                } else {
                    window.event.returnValue == false
                }
                _this.scrollFunc(e)
            }, false)
        },
        scrollFunc(e) {
            e = e || window.event
            if (e.wheelDelta) { // 判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { // 当滑轮向上滚动时
                    this.bigger()
                }
                if (e.wheelDelta < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            } else if (e.detail) { // Firefox滑轮事件
                if (e.detail > 0) { // 当滑轮向上滚动时
                    this.bigger()
                }
                if (e.detail < 0) { // 当滑轮向下滚动时
                    this.smaller()
                }
            }
        },
        defaultSize() {
            this.scaleDefault = 1
            this.repaint(this.scaleDefault)
        },
        bigger() {
            if (this.scaleDefault + this.scaleStep > this.maxScale) {
                if (!this.stopScale) {
                    this.$Message.warning(this.$t('schoolBaseInfo.csTips1'))
                    this.stopScale = true
                }
            } else {
                this.stopScale = false
                this.scaleDefault += this.scaleStep
                this.repaint(this.scaleDefault)
            }
        },
        smaller() {
            if (this.scaleDefault - this.scaleStep < this.minScale) {
                if (!this.stopScale) {
                    this.$Message.warning(this.$t('schoolBaseInfo.csTips2'))
                    this.stopScale = true
                }
            } else {
                this.stopScale = false
                this.scaleDefault -= this.scaleStep
                this.repaint(this.scaleDefault)
            }
        },
        repaint(scale) {
            this.schoolPlan = document.getElementById('school-plan')
            this.schoolPlan.height = this.schoolImageData.height * this.scaleDefault
            this.schoolPlan.width = this.schoolImageData.width * this.scaleDefault
            this.drawSchoolPlan('imgUrl')
            this.initIcon()
        },

        drawText(text, x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            ctx.font = '16px Arial'
            ctx.fillStyle = 'yellow'
            ctx.fillText(text, x, y)
        },
        drawIcon(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            ctx.beginPath()
            ctx.drawImage(this.whiteImageData, x * this.scaleDefault, y * this.scaleDefault, 20 * this.scaleDefault, 20 * this.scaleDefault)
        },
        moveIcon(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            let _this = this
            for (let i = 0; i < _this.roomListShow.length; i++) {
                if (this.activeIcon == i) {
                    ctx.drawImage(this.greenImageData, x * _this.scaleDefault, y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
                    this.updated = true
                } else {
                    ctx.drawImage(this.whiteImageData, _this.roomListShow[i].x * _this.scaleDefault, _this.roomListShow[i].y * _this.scaleDefault, 20 * _this.scaleDefault, 20 * _this.scaleDefault)
                }
            }
        },
        initIcon() {
            this.schoolPlan = document.getElementById('school-plan')
            let ctx = this.schoolPlan.getContext('2d')
            for (let i = 0; i < this.roomListShow.length; i++) {
                let icon = i == this.curClassIndex ? this.greenImageData : this.whiteImageData
                if (icon.complete) {
                    ctx.drawImage(icon,
                        this.roomListShow[i].x * this.scaleDefault, this.roomListShow[i].y * this.scaleDefault,
                        20 * this.scaleDefault, 20 * this.scaleDefault)
                }
            }
        },
        checkActivieIcon(point) {
            for (let item in this.roomListShow) {
                if (point.x > this.roomListShow[item].x * this.scaleDefault && point.x < (this.roomListShow[item].x + 15) * this.scaleDefault && point.y > this.roomListShow[item].y * this.scaleDefault && point.y < (this.roomListShow[item].y + 15) * this.scaleDefault) {
                    return item
                }
            }
            return -1
        },
        getCanvasPoint(x, y) {
            this.schoolPlan = document.getElementById('school-plan')
            let canvasRect = this.schoolPlan.getBoundingClientRect()
            let ctx = this.schoolPlan.getContext('2d')
            return {
                x: x - canvasRect.left,
                y: y - canvasRect.top
            }
        },
        canvasMouseDown(e) {
            this.point = this.getCanvasPoint(e.clientX, e.clientY)
            this.clickPoint = this.getCanvasPoint(e.clientX, e.clientY)
            this.activeIcon = this.checkActivieIcon(this.point)
            if (this.activeIcon != -1 && this.activeIcon != this.curClassIndex) {
                this.$Message.warning(this.$t('schoolBaseInfo.noStdClass'))
                this.activeIcon = -1
            } else {
                this.isMouseDown = true
            }
        },
        moveCanvas(start, current) {
            let container = document.getElementById('school-plan-box')
            container.scrollLeft = container.scrollLeft + (start.x - current.x)
            container.scrollTop = container.scrollTop + (start.y - current.y)
        },
        canvasMouseMove(e) {
            this.point = this.getCanvasPoint(e.clientX, e.clientY)
            if (this.isMouseDown == true && this.activeIcon != -1) {
                this.drawSchoolPlan('')
                this.moveIcon(this.point.x / this.scaleDefault, this.point.y / this.scaleDefault)
            } else if (this.isMouseDown == true && this.activeIcon == -1) {
                this.moveCanvas(this.clickPoint, this.point)
            } else {
                let index = this.checkActivieIcon(this.point)
                if (index != -1) {
                    if (this.textStatus == true) {
                        this.drawText(this.roomListShow[index].name, (this.roomListShow[index].x + 25) * this.scaleDefault, (this.roomListShow[index].y + 20) * this.scaleDefault)
                        this.textStatus = false
                    }
                } else {
                    this.drawSchoolPlan('')
                    this.initIcon()
                    this.textStatus = true
                }
            }
        },
        canvasMouseUp(e) {
            this.isMouseDown = false
            if (this.activeIcon != -1) {
                this.roomListShow[this.activeIcon].x = this.point.x / this.scaleDefault
                this.roomListShow[this.activeIcon].y = this.point.y / this.scaleDefault
            }
            this.activeIcon = -1
        },
        canvasMouseOut(e) {
            this.isMouseDown = false
            if (this.activeIcon != -1) {
                this.roomListShow[this.activeIcon].point = this.point
            }
            this.activeIcon = -1
        },
        drawSchoolPlan(imgUrl) {
            this.schoolPlan = document.getElementById('school-plan')
            let context = this.schoolPlan.getContext('2d')
            context.clearRect(0, 0, this.schoolPlan.width, this.schoolPlan.height)
            let _this = this
            if (_this.isFirstDraw <= 0) {
                let image = new Image()
                image.crossOrigin = 'anonymous'
                image.src = require('../../../assets/image/school_plan.jpg');
                image.onload = function () {
                    _this.schoolPlan.width = image.width
                    _this.schoolPlan.height = image.height
                    context.drawImage(image, 0, 0)
                    let imgData = context.getImageData(0, 0, _this.schoolPlan.width, _this.schoolPlan.height)
                    for (let i = 0; i < imgData.data.length; i += 4) {
                        let r = imgData.data[i]
                        let g = imgData.data[i + 1]
                        let b = imgData.data[i + 2]
                        let a = imgData.data[i + 3]
                        if (r > 200 && g > 200 && b > 200) {
                            imgData.data[i + 3] = 0
                        } else {
                            imgData.data[i] = 255
                            imgData.data[i + 1] = 255
                            imgData.data[i + 2] = 255
                            imgData.data[i + 3] = 255
                        }
                    }
                    context.putImageData(imgData, 0, 0)
                    let PNGImg = new Image()
                    PNGImg.src = _this.schoolPlan.toDataURL('image/png')
                    PNGImg.onload = function () {
                        _this.schoolImageData = PNGImg
                        _this.isFirstDraw++
                        _this.initIcon()
                    }

                }
            } else {
                if (this.schoolImageData) {
                    context.drawImage(this.schoolImageData, 0, 0, this.schoolImageData.width, this.schoolImageData.height, 0, 0, this.schoolImageData.width * this.scaleDefault, this.schoolImageData.height * this.scaleDefault)
                }
            }
        },
        getFileData(file) {
            let _this = this
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                const _base64 = reader.result
                _this.drawSchoolPlan(_base64)
            }
            return false
        },
        uploadSchoolPlan(res, file) {
            this.$Message.success(this.$t('schoolBaseInfo.csTips5'))
        },
        initData() {
            let white = new Image()
            let pink = new Image()
            let green = new Image()
            white.crossOrigin = 'anonymous'
            pink.crossOrigin = 'anonymous'
            green.crossOrigin = 'anonymous'
            white.src = require('../../../assets/pin.svg')
            pink.src = require('../../../assets/redpin.svg')
            green.src = require('../../../assets/greenpin.svg')
            let _this = this
            white.onload = function () {
                _this.whiteImageData = white
                _this.drawSchoolPlan()
                _this.initIcon()
            }
            pink.onload = function () {
                _this.pinImageData = pink
            }
            green.onload = function () {
                _this.greenImageData = green
            }
            this.bundleScoll()
        },
    }
}
</script>
<style scoped lang="less">
</style>