<template>
    <div>
        <video id="video" style="width: 100%"></video>
        <canvas id="canvas" style="display: none"></canvas>
        <canvas id="draw" style="display: none"></canvas>
    </div>
</template>

<script>
import Player from "./libs/player";

export default {
    name: "index",
    props: ["rtspData"],
    data() {
        return {
            options: {
                video: null,
                canvas: null,
                drawer: null,
                wsUrl: null,
                rtspUrl: null
            },
            player: null
        };
    },
    watch: {
        rtspData: {
            handler(nv, ov) {
                console.log("新值1->", nv);
                if (
                    nv != null &&
                    nv.rtsp &&
                    nv.ws &&
                    /rtsp:\/\/.+/.test(nv.rtsp) &&
                    /ws:\/\/.+/.test(nv.ws)
                ) {
                    console.log("新值2->", nv);
                    this.options.wsUrl = nv.ws;
                    this.options.rtspUrl = nv.rtsp;

                    if (
                        this.options.video &&
                        this.options.wsUrl &&
                        this.options.rtspUrl
                    ) {
                        console.log("---watch player---");
                        this.createPlayer();
                    }
                }
            },
            immediate: true
        }
    },
    mounted() {
        console.log("--mounted--");
        this.options.video = document.getElementById("video");
        this.options.canvas = document.getElementById("canvas");
        this.options.drawer = document.getElementById("draw");
        //this.player.connect()
        if (this.options.rtspUrl && this.options.wsUrl) {
            console.log("---mounted player---");
            //直接播放
            this.createPlayer();
        }
    },
    destroyed() {
        if (this.player) this.player.close();
    },
    methods: {
        createPlayer() {
            if (this.player != null) this.player.close();
            this.player = new Player(this.options);
            this.player.init(this);
            this.player.on("error", function() {
                console.log("连接失败");
            });
            this.player.on("noStream", function() {
                console.log("noStream");
                this.player.close();
                this.player = null;
                this.player = new Player(this.options);
                this.player.init();
                this.player.connect();
            });

            this.player.on("canplay", function() {
                //player.close();
            });

            this.player.on("initialCompleted", function() {
                // let data = [[
                //     {x: 2861, y: 4395},
                //     {x: 6403, y: 4013},
                //     {x: 3260, y: 7986},
                //     {x: 640, y: 6252}
                // ]];
                // console.log('initialCompleted')
                // player.setROI(data);
            });

            this.player.on("ROIFinished", function() {
                console.log("ROIFinished");
            });
            this.player.connect();
        },
        close() {
            player.close();
        }
    }
};
</script>

<style scoped>
</style>