<template>
    <div class="player-container">
        <div class="player-item player-active">
            <EasyPlayer
                live
                alt="请输入视频地址"
                :muted="muted"
                ref="easyPlayer"
                :reconnection="true"
                v-model="player.url"
                :video-title="player.videoTitle"
            ></EasyPlayer>
        </div>
    </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
const headersUrlencoded = {
    'Content-type': 'application/x-www-form-urlencoded',
}
export default {
    name: 'easyPlayer',
    components: {
        EasyPlayer,
    },
    props: {},
    data() {
        return {
            player: {
                name: 'easyPlayer',
                url: '',
                videoTitle: '',
            },
            muted: true,
            url: '',
        }
    },
    methods: {
        getUrlAndPlay(url, code, title) {
            this.player.url = url
            // this.play()
            return
            let data = this.qs.stringify({
                code,
                scheme: 'HLS',
            })
            let param = {
                url: '${portal}/biz/catalog/base/point/previewURLs',
                data,
                method: 'post',
                headers: headersUrlencoded,
            }
            this.$http.request(param).then(
                (resp) => {
                    if (resp.data && resp.data.value) {
                        let value = JSON.parse(resp.data.value)
                        this.url = value.url
                        this.player.videoTitle = title
                        this.player.url = this.url
                        // this.play(this.player)
                    }
                },
                (error) => {
                    console.log('获取播放地址', error)
                    this.$message({
                        message: '获取播放地址失败，请重试！',
                        type: 'error',
                    })
                }
            )
        },
        play(player) {
            this.$nextTick(() => {
                console.log(this.$refs)
                this.$refs.easyPlayer.play()
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.player-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
    background-color: #333;
}
.player-item{
    width: 100%!important;
    height: 100%!important;
    border: 2px solid #000;
    box-sizing: border-box;
    cursor: pointer;
}
// .player-active{
//     border: 2px solid #ffcc00;
// }
// .player-item:nth-of-type(1){
//     width: calc(50% - 2px)!important;
//     height: calc(50% - 2px)!important;
//     margin: 0 2px 2px 0;
// }
// .player-item:nth-of-type(2){
//     height: calc(50% - 2px)!important;
//     margin: 0 0 2px 0;
// }
// .player-item:nth-of-type(3){
//     width: calc(50% - 2px)!important;
//     margin: 0 2px 0 0;
// }
</style>