<template>
    <div>
        <!--<input type="file" multiple @change="fileChange" value="上传视频"/>
        <el-button @click="createTracks">createTracks</el-button>
        <el-button @click="createButton">createButton</el-button>-->
        <!--<el-button @click="setSrc">setSrc</el-button>-->
        <video-player :options="videoOptions" class="video-player" ref="stVideoPlayer" v-if="videoOptions.display"/>
    </div>
</template>

<script>
    import VideoPlayer from '@/components/custom/VideoPlayer.vue';
    import * as kejian from '@/api/peixun/kejian';

    export default {
        name:       'MtaBusVideoPlayer',
        components: {
            VideoPlayer,
        },
        data() {
            return {
                videoOptions: {
                    autoplay:              false,                   // 共用逻辑：自动播放
                    controls:              true,                    // 共用逻辑：是否使播放器可控 为true
                    sources:               [],                      // 共用逻辑：当前资源列表 默认支持一组相同资源的不同编码格式
                    progressControlEnable: true,                    // 共用逻辑：进度条可操作 可用true/禁用false
                    // theme:                 'city',               // 共用逻辑：主题枚举 'default', 'city', 'fantasy', 'forest', 'sea'
                    height:                '500px',                 // 共用逻辑
                    playlist:               [],                     // 共用逻辑
                    display:                false,                  // 共用逻辑,
                    playIndex:             0,                       // 不共用逻辑 可删除
                    shitiList:              null,                   // 不共用逻辑 被插入的试题list
                },
            };
        },
        props:    {
            options: {
                kjId: String,
                default() {
                    return '';
                },

            },
        },
        methods:    {
            fileChange(event) {
                /*var files = event.target.files;
                if (files && files.length > 0) {
                    for (const file of files) {
                        /!*name: "129个美女类无印小视频素材第二季 (100).mp4"
    lastModified: 1577773604272
    lastModifiedDate: Tue Dec 31 2019 14:26:44 GMT+0800 (中国标准时间) {}
    webkitRelativePath: ""
    size: 1325755
    type: "video/mp4"*!/
                    }
                }*/
            },
            createTracks() {
                this.$refs.stVideoPlayer.createTracks();
            },
            createButton() {
                this.$refs.stVideoPlayer.createButton();
            },
            /*setSrc() {
                this.videoOptions.playIndex++;
                if (this.videoOptions.playIndex >= 5) {
                    this.videoOptions.playIndex = 0;
                }
                let videos = [
                    {
                        src:  '/videos/1.mp4',
                        type: 'video/mp4',
                    },
                    {
                        src:  'http://192.168.0.179/v/542.mp4',
                        type: 'video/mp4',
                    },
                    {
                        src:  '/videos/3.mp4',
                        type: 'video/mp4',
                    },

                    {
                        src:  'http://mtafa.com/da6afd4724c24b47970d177f4a133aad/5c88b72c09ee445c97cbbb704c803870-c9b683dbc9af6e1a71cd545340fbbe2b-ld.mp4',
                        type: 'video/mp4',
                    },
                    {
                        src:  '/videos/2.mp4',
                        type: 'video/mp4',
                    },
                ];
                this.$refs.stVideoPlayer.setSrc(videos[this.videoOptions.playIndex]);
            },*/
        },
        mounted() {
            kejian.getKejian({
                kjId: this.options.kjId
            }).then(res=>{
                if (res.code === 0) {
                    let videoItem = {
                        name:        res.data.name,
                        duration:    res.data.duration,  // 该视频播放时长
                        sources:     [
                            {
                                src:  res.data.newUrl,
                                type: 'video/mp4',
                            },
                        ],
                        thumbnail:   [
                            {
                                srcset: res.data.cover,
                                type:   'image/jpeg',
                                style:  'width:180px;',
                                // media: '(min-width: 367px;)'
                            },
                        ],
                        // poster:      'http://media.w3.org/2010/05/sintel/poster.png',
                    };
                    // console.log(res.data);
                    this.videoOptions.shitiList = res.data.shitiList;
                    this.videoOptions.display = true;
                    this.$nextTick(()=>{
                        this.videoOptions.playlist.push(videoItem);
                    });
                }

            });


        },
    };
</script>
<style lang="scss" scoped>
    .el-button {
        font-size: 14px;
    }

    .fl {
        display: block;
        float: left;
    }

    .ml-30 {
        margin-left: 30px;
    }

    /*.video-player {
        margin: 0 auto;
    }*/
</style>
