<template>
  <div class="v-ideo">
    <el-carousel trigger="click" height="450px" :interval="20000">
      <el-carousel-item v-for="i in count" :key="i">
        <div class="v-one" v-if="getVideo((i - 1) * 2)">
          <Camera :id="getVideo((i - 1) * 2).sbbm" :byList="byList" :data="getVideo((i - 1) * 2)" />
          <!-- <div class="txt">{{ getVideo(i).sbmc }}</div> -->
        </div>
        <div class="v-one" v-if="getVideo((i - 1) * 2 + 1)">
          <Camera :id="getVideo((i - 1) * 2 + 1).sbbm" :byList="byList" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import Camera from "@/components/Camera.vue";
export default {
  name: "IotName",
  props: ["list", "byList"],
  data() {
    return {
      count: 5,
      idx: 2,
    };
  },
  components: {
    Camera,
  },
  methods: {
    getVideo(no) {
      if (this.list.length > no) {
        return this.list[no];
      }
      return null;
    },
  },
  created() {
    console.log(this.list);
    this.count = this.list.length / 2;
    console.log(this.count);
  },
};
</script>

<style lang="less" scoped>
.v-ideo {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;

  .v-one {
    width: calc(100% - 2px);
    height: 185px;
    border: 1px solid #ccc;
    position: relative;
    .txt {
      position: absolute;
      font-family: "Abel";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      right: 11px;
      top: 6px;
    }
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      cursor: pointer;
    }
  }
  .v-one:first-child {
    margin-bottom: 10px;
  }
}
</style>
