<template>
    <div class="imgzoom" @mouseenter='mouseEnter' @mouseleave='mouseLeave' @mousemove="moseOverEvent">
        <img ref="mainImg" :src="src" alt="">
        <template v-if="isShow">
            <div class="min-box" :style="{top:top+'px',left:left+'px',width:configs.maskWidth+'px',height:configs.maskHeight+'px',backgroundColor:configs.maskColor,opacity:configs.maskOpacity}"></div>
            <div class="imgBig" :style="{backgroundSize:configs.imgWithd*2+'px '+configs.imgHeight*2+'px',backgroundPosition:backgroundPosition,backgroundImage:'url('+bigsrc+')',width:configs.width+'px',height:configs.height+'px',right:0-configs.width+'px'}"></div>
        </template>
    </div>

</template>

<script>
import logo from '../components/Logo'
import { mapState } from "vuex";
export default {
    name: 'imgZoom',
    data() {
        return {
            top: 0,
            left: 0,
            isShow: false,
            offsetY: 0,
            offsetX: 0
        }
    },
    props: {
        src: {
            type: String,
            default: ''
        },
        bigsrc: {
            type: String,
            default: ''
        },
        configs: {
            type: Object,
            default: {
                width: 200,
                height: 200,
                maskWidth: 100,
                maskHeight: 100,
                maskColor: 'red',
                maskOpacity: 0.2,
                imgWithd: 500,
                imgHeight: 500,
            }
        }
    },
    computed: {
        backgroundPosition() {
            var left = 0 - this.left
            var top = 0 - this.top
            left = left
            top = top
            return left * 2 + 'px ' + top * 2 + 'px'
        }
    },
    watch: {

    },
    created() {

    },
    methods: {
        moseOverEvent(e) {
            this.offsetX += e.movementX
            this.offsetY += e.movementY
            var left = this.offsetX
            var top = this.offsetY
            left = left - this.configs.maskWidth / 2
            top = top - this.configs.maskHeight / 2
            if (left < 0) {
                left = 0
            }
            if (top < 0) {
                top = 0
            }
            if (left > this.$refs.mainImg.width - this.configs.maskWidth) {
                left = this.$refs.mainImg.width - this.configs.maskWidth
            }
            if (top > this.$refs.mainImg.height - this.configs.maskHeight) {
                top = this.$refs.mainImg.height - this.configs.maskHeight
            }
            this.left = left
            this.top = top
        },
        mouseEnter(e) {
            this.isShow = true
            this.offsetX = e.offsetX
            this.offsetY = e.offsetY
        },
        mouseLeave(e) {
            this.isShow = false
        }
    },
    components: {

    }
}
</script>

<style lang="less" scoped>
.imgzoom {
    position: relative;
    cursor: crosshair;
    .imgBig {
        position: absolute;
        background-color: #ccc;
        right: 0;
        top: 0;
    }

    .min-box {
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>
