<template>
    <div class="canvasPanel">
        <canvas id="canvas" width="1000" height="500"></canvas>
        <canvas id="canvasA" width="1000" height="500"></canvas>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "canvasSensor", //
    components: {},
    data() {
        return {
            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
            aSrc: require("@/assets/common/image/others/sensorIcon.png"),
            ctx: null,
            ctxBg: null,
            imgBg: null,
            imgIcon: null,
        };
    },

    props: {
        coordinate: {
            type: Object,
            default: { x: 0, y: 0 },
        },
    },

    watch: {
        coordinate(val) {
            console.log(val);
            this.draw(val);
        },
    },

    methods: {
        draw1(data) {
            // var ctx = document.getElementById("canvas").getContext("2d");
            // var ctxA = document.getElementById("canvasA").getContext("2d");
            // ctx.translate(960, 250);
            // ctx.rotate(Math.PI / 2);
            // var img = new Image();
            // img.onload = () => {
            // ctxA.drawImage(img, 0, 0, 1000, 500);
            // ctx.translate(960, 250);
            // ctx.rotate(Math.PI/2);
            // ctxA.translate(60, 60);
            // img1.src = "";

            // ctx.save();
            // };
            // console.log(ctx);
            // ctx.save();
            var img1 = new Image();
            img.src = this.modelImgSrc;
            img1.src = this.aSrc;
            img1.onload = () => {
                ctx.drawImage(img1, 0, 0, 29, 41);
                ctx.rotate(-Math.PI / 2);
                ctx.translate(-960, -250);
            };

            setTimeout((_) => {
                // ctx.save();
                // img1.src = this.aSrc;
                ctx.clearRect(-250, -40, 500, 1000);
                ctx.drawImage(img1, 30, 30, 29, 41);
                // ctx.restore();
            }, 1000);
            // setTimeout((_) => {
            //     // ctx.save();
            //     // img1.src = this.aSrc;
            //     // ctx.clearRect(-250,960,1000,500)
            //     ctx.clearRect(-250,-40,500,1000)
            //     ctx.drawImage(img1, -10, 510, 29, 41);
            //     // ctx.restore();
            // }, 2000);
            // setTimeout((_) => {
            //     ctx.clearRect(-250,-40,500,1000)
            //     ctx.drawImage(img1, -180, 810, 29, 41);
            // }, 3000);
            // setTimeout((_) => {
            //     ctx.save();
            //     img1.src = this.aSrc;
            //     ctx.drawImage(img, -60, -60, this.width, this.height);
            //     ctx.drawImage(img1, 0, 0, 15, 20);
            // }, 4000);
        },
        draw(data) {
            if (!data.x || !data.y) return;
            // this.imgIcon.onload = () => {
                this.ctx.clearRect(-250, -40, 500, 1000);
                this.ctx.drawImage(this.imgIcon, data.x, data.y, 29, 41);
            // };
        },
    },

    mounted() {
        $(document).ready(() => {
            this.ctx = document.getElementById("canvas").getContext("2d");
            this.ctxBg = document.getElementById("canvasA").getContext("2d");

            this.ctx.translate(960, 250);
            this.ctx.rotate(Math.PI / 2);

            this.imgBg = new Image();
            this.imgBg.src = this.modelImgSrc;
            this.imgBg.onload = () => {
                this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
            };

            this.imgIcon = new Image();
            this.imgIcon.src = this.aSrc;
            // this.imgIcon.onload = () => {
            //     this.ctx.drawImage(this.imgIcon, 0, 0, 29, 41);
            // };
        });
    },
};
</script>

<style lang="less" scoped>
.canvasPanel {
    position: relative;

    canvas {
        width: 100%;
    }

    #canvas {
        position: relative;
        z-index: 1;
    }

    #canvasA {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
}
</style>
