<template>
    <div id="camera-skin" class="camera" ref="cameraBox">
        <div
            class="item"
            :class="{'z-active': playerInfo.playUrl == item.playUrl}"
            v-for="(item, index) in list"
            :key="index"
            @click="_changePlayer(item.playUrl, item.id)"
            v-if="item.display"
        >
            <div class="mark">{{item.name}}</div>
            <img class="img" v-if="item.thumbnail" :src="item.thumbnail" alt="">
        </div>
    </div>
</template>

<script>
    import {getCaremaList} from '@/plugins/API/apiAll'
    import { mapGetters, mapMutations } from 'vuex'
    export default {
        data(){
            return {
                list: []
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'playerInfo': 'playerInfo'
            })
        },
        mounted(){
            this._getCaremaList();
        },
        methods: {
            ...mapMutations({
                'set_playerInfo': 'set_playerInfo'
            }),
            //获取多机位
            async _getCaremaList(){
                const res = await getCaremaList({
                    id: this.channelInfo.id,
                    uin: this.channelInfo.uin
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.list = res.data;
                }
            },
            _changePlayer(url, id){
                let info = JSON.parse(JSON.stringify(this.playerInfo));
                info.playUrl = url;
                info.cameraId = id
                this.set_playerInfo(info)
            },
        }
    }
</script>

<style lang="less" scoped>
    .camera{
        height: 66px;
        padding: 3px 0;
        overflow-x: auto;
        background-color: #333333;
        white-space: nowrap;
        font-size: 0;

        .item{
            display: inline-block;
            position: relative;
            margin: 0 3px;
            width:107px;
            height:60px;
            border: 1px solid transparent;
            background: url(./img/icon-video.png) no-repeat center center;
            background-size:100% 100%;

            .img{
                display:block;
                width: 100%;
                height: 100%;
                background-color:#333333;
            }
            .mark{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height: 15px;
                line-height: 15px;
                font-size: 12px;
                background-color:rgba(0,0,0,0.2);
                color: #fff;
                padding-left: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &.z-active{
                border-color: #008DF6;
                .mark{
                    background-color: #008DF6;
                }
            }
        }
    }
</style>

