<template>
    <div id="camera-skin" class="camera" ref="cameraBox">
        <div class="go-left" @click="_scrollGo('left')"></div>
        <div class="list-box" ref="listBox">
            <ul class="list" ref="list">
                <li
                    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 v-if="item.thumbnail" :src="item.thumbnail" alt="" class="img">
                </li>
            </ul>
        </div>
        <div class="go-right" @click="_scrollGo('right')"></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'
            })
        },
        watch: {
            playerInfo: {
                handler(){
                    this.$nextTick(() => {
                        this._scroll()
                    })
                },
                deep: true
            }
        },
        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)
            },
            _scroll(){
                let dom = document.querySelector('.camera .item.z-active');
                if(dom){
                    this.$refs.list.style.left = `-${dom.offsetLeft}px`;
                }
            },
            _scrollGo(go){
                let listBox = this.$refs.listBox.clientWidth;
                let list = document.querySelectorAll('.camera .item').length * 330;
                let left = parseInt(this.$refs.list.style.left);
                if(go == 'left'){
                    if(left + listBox >= 0){
                        left = 0;
                    }else{
                        left = left + listBox;
                    }
                }else if(go == 'right'){
                    if(-(left - listBox) >= list){
                        left = -list;
                    }else{
                        left = left - listBox;
                    }
                }
                this.$refs.list.style.left = `${left}px`;
            }
        }
    }
</script>

<style lang="less" scoped>
    .camera{
        display: flex;
        margin: 10px 0;
        padding: 5px 0;
        background-color: rgba(225,225,225,0.6);
        font-size: 0;

        .go-left, .go-right{
            position: relative;
            flex: 0 0 30px;
            width: 30px;
            cursor: pointer;

            &:before{
                content: ' ';
                display: block;
                position: absolute;
                top:50%;
                left: 50%;
                margin: -10px -10px;
                width: 0;
                height: 0;
                border: 10px solid transparent;
            }
        }
        .go-left{
            &:before{
                margin: -10px -15px;
                border-right-color: #ADADAD;
            }
            &:hover:before{
                border-right-color: #2263F1;
            }
        }
        .go-right{
            &:before{
                margin: -10px -5px;
                border-left-color: #ADADAD;
            }
            &:hover:before{
                border-left-color: #2263F1;
            }
        }
        .list-box{
            flex: 1;
            width: 100%;
            margin: 0 5px;
            overflow: hidden;

            .list {
                position: relative;
                white-space: nowrap;
                transition: all 0.5s;

                .item {
                    display: inline-block;
                    position: relative;
                    margin: 0 5px;
                    width: 320px;
                    height: 180px;
                    background: url(./img/icon-video.png) no-repeat center center;
                    background-size: 100% 100%;
                    cursor: pointer;

                    .img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-color: #333333;
                    }
                    .mark {
                        position: absolute;
                        top: 10px;
                        left: 0;
                        min-width: 30%;
                        max-width: 90%;
                        height: 30px;
                        line-height: 30px;
                        background-color: #D5D5D5;
                        color: #1F1F1F;
                        padding: 0 15px 0 5px;
                        font-size: 17px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        border-top-right-radius: 30px;
                        border-bottom-right-radius: 30px;
                    }
                    &.z-active {
                        .mark {
                            background-color: #008DF6;
                            color: #ffffff;
                        }
                    }

                }
            }
        }
    }
</style>

