<template>
    <div :class="showVideo?'videos':''">
        <template v-if="showVideo">
            <template v-for="(item, index) in playList">
                <div class="item" :key="index">
                    <video-player class="video-player custom-video vjs-custom-skin"
                        :ref="`videoPlayer${index}`"
                        :playsinline="true"
                        :options="item.config">
                    </video-player>
                    <div class="item-title">{{item.name}}</div>
                </div>
            </template>
        </template>
        <template v-else>
            <el-empty :description="desc"></el-empty>
        </template>
    </div>
</template>

<script>
    import { getJobVideos } from '@/api/job'

    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import { videoPlayer } from 'vue-video-player'

    export default {
        props: ['taskId'],
        components: {
            videoPlayer
        },
        data () {
            return {
                showVideo: false,
                desc: '正在获取视频信息...',
                poster: require('@/assets/video.png'),
                playList: [],
                playerOptions: {
                    playbackRates: [1.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    controls: true,
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - // // 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    html5: { hls: { withCredentials: false } },
                    sources: [{
                        src: '', // 直播视频的路径
                        type: 'video/mp4',
                    }],
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true //全屏按钮
                    }
                }

            }
        },
        mounted () {
            if (this.taskId) {
                getJobVideos(this.taskId).then(res => {
                    // const res = ['https://www.w3school.com.cn/i/movie.mp4', 'https://www.runoob.com/try/demo_source/movie.mp4'];
                    if (res && res.length > 0) {
                        let target = null;
                        let list = [];
                        // let sources = [];
                        res.map(item => {
                            target = JSON.parse(JSON.stringify(this.playerOptions));
                            target.poster = this.poster;
                            target.sources[0].src = item.url;
                            list.push({
                                config: target,
                                name: item.name || ' ',
                            });
                        });
                        this.playList = list;
                        this.showVideo = true;
                    }
                    else {
                        this.desc = '暂无视频信息';
                    }
                }).catch(err => {
                    this.desc = '暂无视频信息';
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
.videos {
    overflow-x: auto;
    display: flex;
}
.custom-video {
    width: 400px;
    min-width: 400px;
    // height: 400px;
}
.item {
    position: relative;
    &-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba($color: #000000, $alpha: 0.6);
        padding: 4px;
        color: #FFFFFF;
        font-size: 14px;
    }
}
.item:not(:first-child) {
    margin-left: 20px;
}
</style>