<template>
    <div class="video-wrap">
        <video class="" ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
    import videojs from "video.js";
    import "videojs-markers";

    export default {
        name: "VideoPlayer",
        props: {
            options: {
                type: Object,
                default() {
                    return {}
                },
            },
            markers: {
                type: Array,
                default() {
                    return {}
                },
            }
        },
        data() {
            return {
                player: null,
            }
        },
        mounted() {
            this.player = videojs(
                this.$refs.videoPlayer,
                this.options
            )
            //时间切片
            let _this = this
            this.player.markers({
                markerStyle: {
                    width: "16px",
                    height: "16px",
                    top: "-22px",
                    top: "-22px",
                    "display": "inline-block",
                    "border-radius": "50%",
                    "font-size": "12px",
                    "line-height": "16px",
                    "background-color": "orange"
                },
                breakOverlay: {
                    display: true,
                    displayTime: 4,
                    style: {
                        "z-index": "6",
                        width: "100%",
                        height: "10%",
                        "background-color": "rgba(200,250,10,0.6)",
                        color: "white",
                        "font-size": "16px",
                    },
                    text: function (marker) {
                        return this.$t('system.compt.cusWare') + marker.text;
                    },
                },
                markerTip: {
                    display: false,
                    text: function (marker) {
                        return marker.text;
                    },
                },
                markers: this.markers,

               //标记点击事件
                onMarkerClick: function (marker) {
                    
                },
                //视频播放到标记点触发的时间
                onMarkerReached: function (marker) {
                    let mkDoms = document.getElementsByClassName('vjs-marker ')
                    for (let index in mkDoms) {
                        if (mkDoms[index].dataset) {
                            if (parseInt(mkDoms[index].dataset.markerTime) <= marker.time) {
                                mkDoms[index].style.backgroundColor = '#1CC0F3'
                                mkDoms[index].classList.add('vjs-marker-active')
                            } else {
                                mkDoms[index].style.backgroundColor = 'orange'
                                mkDoms[index].classList.remove('vjs-marker-active')
                                
                            }
                            mkDoms[index].innerHTML = this.markers[index].page
                            
                        }
                    }
                    _this.$emit('getCurPage', marker.page)
                },
            });
        },
        beforeDestroy() {
            if (this.player) {
                this.player.dispose();
            }
        },
    };
</script>

<style lang="less">

    /*@import "~@/assets/student-web/default_styles/video-js.css";*/

    .video-wrap .video-js .vjs-progress-control {
        pointer-events: none;
    }
    .video-wrap .video-js .vjs-slider {
        pointer-events:auto;
    }
    .video-wrap .video-js .vjs-control-bar {
        height:36px;
    }

    .video-wrap .video-js .vjs-tech {
        outline: none;
        padding: 1px;
    }

    .video-wrap .video-js button {
        outline: none;
    }
    .video-wrap .vjs-marker {
        margin-left:-7px !important;
    }
    .video-wrap .vjs-marker::after {
        content: '';
        height: 0px;
        width: 0px;
        border: 3px transparent solid;
        display: block;
        position: absolute;
        bottom: -10px;
        z-index:-1;
        border-right: 8px solid transparent;
        border-top: 16px solid orange;
        border-left: 8px solid transparent;
    }
    .video-wrap .vjs-marker-active::after {
        border-right: 8px solid transparent !important;
        border-top: 16px solid #1cc0f3 !important;
        border-left: 8px solid transparent !important;
    }
    .video-js .vjs-time-control{
        display: block;
    }

    .video-js  .vjs-remaining-time {
        display: none;
    }
    .video-js .vjs-picture-in-picture-control {
        display:none;
    }
    .video-wrap .vjs-time-divider {
        padding-left: 0px !important;
        padding-right: 0px !important;
        min-width: 0px !important;
    }
    .video-wrap .video-js .vjs-big-play-button {
        width:50px;
        height:50px;
        line-height:50px;
        border-radius:50%;
        border:none;
    }
</style>
