<template>
    <div id="playList-skin" class="play-list">
        <ul class="list">
            <li v-for="(item,index) in list" :key="index" class="item">
                <div class="item-box" @click="_play(item.materialUrl)">
                    <div class="img-box">
                        <img class="video-img" :src="item.coverUrl" alt="">
                        <div class="play-state" :class="{'z-play': item.materialUrl == playerInfo.playUrl}">
                            <i class="play">播放中</i>
                            <i class="pause"></i>
                        </div>
                    </div>
                </div>
                <div class="title">{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getPlaylistList} from '@/plugins/API/apiAll'
    import {mapGetters,mapMutations} from 'vuex'

    export default {
        props: {
            listId: {}
        },
        data(){
            return {
                list: [],
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'playerInfo': 'playerInfo'
            }),
        },
        mounted(){
            if(this.listId){
                this._getPlaylistList();
            }
        
        },
        methods: {
            ...mapMutations({
                'set_playerInfo': 'set_playerInfo'
            }),
            async _getPlaylistList(){
                const res = await getPlaylistList({
                    uin: this.channelInfo.uin,
                    listId: parseInt(this.listId),
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.list = res.data.detail;
                }
            },
            _play(url){
                let info = JSON.parse(JSON.stringify(this.playerInfo));
                info.playUrl = url;
                info.cameraId = ''
                this.set_playerInfo(info)
            },
        }
    }
</script>

<style lang="less" scoped>
    
    .play-list{
        height: 100%;
        overflow: auto;
        .list{
            padding: 5px;
            display: flex;
            flex-wrap: wrap;

            .item{
                display: flex;
                flex-direction: column;
                flex: 0 0 auto;
                width: 20%;
                padding-bottom: 10px;

                .item-box{
                    flex: 1;
                    padding: 0 5px;
                    .img-box{
                        position: relative;
                        padding-top: 100% * 9 /16;

                        .video-img{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        .play-state{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);

                            .play{
                                color: #008DF6;
                            }
                            .pause{
                                display: block;
                                width: 30px;
                                height: 30px;
                                background-image: url("./img/icon-play.png");
                                background-repeat: no-repeat;
                                background-position: center center;
                                background-size: 100% 100%;
                            }
                            .play{
                                display: none;
                            }
                            .pause{
                                display: block;
                            }
                            &.z-play{
                                .play{
                                    display: block;
                                }
                                .pause{
                                    display: none;
                                }
                            }
                        }
                    }
                }
                .title{
                    flex: 1;
                    padding: 4px 5px;
                    max-height: 40px;
                    line-height: 20px;
                    overflow: hidden;
                    font-size: 14px;
                    color: #333333;
                    text-align: justify;
                    word-break: break-all;
                }
            }
        }
    }
</style>
