<!--视频巡查-->
<template>
    <div class="infoWindow-model">
        <div class="model-title">{{ currentPoint.name }}</div>
        <div class="section-container">
            <!-- <video-player
                ref="video"
                split="1"
                id="videoIframe"
                :defaultSplit="1"
                class="video-container"
                v-if="isShow"
            ></video-player> -->
            <video-play-plugin
                ref="video"
                class="video-container"
                id="videoIframe"
                v-if="isShow"
                :options="options"
                @ready="ready"
            ></video-play-plugin>
        </div>
    </div>
</template>

<script>
import videoPlayer from './../../videoPlayer.vue'
import videoPlayPlugin from './../../videoPlayPlugin.vue'
export default {
    name: 'VideoPatrolModel',
    components: {
        videoPlayPlugin,
    },
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showvideo: false,
            options: {
                layout: '1x1',
                showToolbar: 1,
                simpleTips: true,
                mountedInit: false
            },
            videoCode: '',
        }
    },
    inject: ['mapData'],
    watch: {
        currentPoint: {
            handler(newVal) {
                this.videoCode = newVal.code
            },
        },
        isShow: {
            handler(newVal) {
                if (!newVal) {
                    this.$refs.video.disconnect()
                }
            },
        },
    },
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
    },
    mounted() {
        // debugger
        // console.log(this.currentPoint, 'this.currentPoint')
        // this.$nextTick(() => {
        //     this.showvideo = true
        // })
        this.map.addEventListener('moveend', () => {
            this.resize()
        })
    },
    beforeDestroy() {},
    methods: {
        resize() {
            this.$nextTick(() => {
                if (this.$refs && this.$refs.video) {
                    this.$refs.video.resize()
                }
            })
        },
        open() {
            this.$nextTick(() => {
                this.$refs.video.open()
            })
        },
        close() {
            this.$nextTick(() => {
                this.$refs.video.disconnect()
            })
        },
        ready() {
            this.play(this.videoCode)
        },
        play(code) {
            this.$nextTick(() => {
                this.$refs.video.play(code)
            })
        },
        handleClick(tab, event) {
            console.log(tab, event)
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../../css/model.scss';
.section-container{
    width: 400PX;
    height: 260PX;
    .video-container{
        height: 100%;
        width: 100%;
    }
}

</style>