<template>
  <div class="camera-box" ref="cameraBox">
    <div class="go-left" @click="_scrollGo('left')"></div>
    <div class="list-box">
      <ul class="list" :style="{'left': page * -100 +'%'}">
        <li
          class="item"
          :class="{ 'z-active': playerInfo.playUrl == item.playUrl }"
          v-for="(item, index) in list"
          :key="index"
          @click="_changePlayer(item.playUrl, item.id)"
        >
        <div class="box">
          <div class="name">{{ item.name }}</div>
          <img class="img" v-if="item.thumbnail" :src="item.thumbnail" alt="" />
          <div class="icon" v-else></div>
        </div>
        </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 {
  name: 'pc-camera-box',
  data() {
    return {
      page: 0,
      list: []
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      playerInfo: 'playerInfo'
    }),
    maxPage(){
      return Math.floor(this.list.length / 6);
    }
  },
  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) {
        const list = res.data || [];
        this.list = list.filter(x => {
          return x.display;
        });
      }
    },
    _changePlayer(url, id) {
      const info = JSON.parse(JSON.stringify(this.playerInfo));
      info.playUrl = url;
      info.cameraId = id;
      this.set_playerInfo(info);
    },
    _scrollGo(go) {
      let page = this.page
      if (go === 'left') {
        page = page - 1 > 0 ? page - 1 : 0;
      } else if (go === 'right') {
        page = page + 1 <= this.maxPage ? page + 1 : this.maxPage;
      }
       this.page = page
    }
  },
};
</script>
<style lang="less" scoped>
.camera-box {
  display: flex;
  padding: 5px 0;
  background-color: #2f3035;
  border-radius: 8px;
  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: #27282e;
    }
    &:hover:before {
      border-right-color: #fff;
    }
  }
  .go-right {
    &:before {
      margin: -10px -5px;
      border-left-color: #27282e;
    }
    &:hover:before {
      border-left-color: #fff;
    }
  }
  .list-box {
    flex: 1;
    width: 100%;
    margin: 0 5px;
    overflow: hidden;
    .list {
      width: 100%;
      position: relative;
      white-space: nowrap;
      transition: all 0.5s;
      .item {
        display: inline-block;
        margin: 0 5px;
        width: 100% / 6;
        border-radius: 2px;
        border: 1px solid transparent;
        overflow: hidden;
        cursor: pointer;
        .box{
          position: relative;
          padding-top: 9 / 16 *100%;
          .img {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #333333;
          }
          .icon{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #4A4A4A url(./img/icon-video.png) no-repeat center center;
            background-size: 20% auto;
          }
          .name {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 100;
            font-size: 20px;
            color: #fff;
          }
        }
        &.z-active {
          border-color: var(--main-color);
        }
      }
    }
  }
}
</style>
