<template>
  <div class="video-list">
    <!-- 视频 -->
    <div>
      <img src="../../../assets/images/Group 1321314647.png" alt="" />
      <img src="../../../assets/images/Group 1321314649.png" alt="" />
      <img src="../../../assets/images/Group 1321314650.png" alt="" />
      <img src="../../../assets/images/Group 1321314651.png" alt="" />
    </div>
    <Monitor3D ref="monitor" />
    <div>
      <div class="info">
        <div class="bg-num" @click="clickItem(1)">
          <div class="line-box">
            <span
              :class="{
                line: true,
                active: pieActive1,
              }"
            ></span>
            <span>生命通道监控点位</span>
          </div>
          <div>
            <!-- 在线 -->
            <div class="dis-online">
              <div>
                <span class="online"></span>
                <span>1234个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>1234个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-num" @click="clickItem(2)">
          <div class="line-box">
            <span
              :class="{
                line: true,
                'line-b': true,
                active: pieActive2,
              }"
            ></span>
            <span>电气火灾监测点位</span>
          </div>
          <div>
            <!-- 在线 -->
            <div class="dis-online">
              <div>
                <span class="online"></span>
                <span>1234个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>1234个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-num" @click="clickItem(3)">
          <div class="line-box">
            <span
              :class="{
                line: true,
                active: pieActive3,
                'line-g': true,
              }"
            ></span>
            <span>水压检测点位</span>
          </div>
          <div>
            <!-- 在线 -->
            <div class="dis-online">
              <div>
                <span class="online"></span>
                <span>1234个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>1234个</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-2">
        <div class="bg-num" @click="clickItem(4)">
          <div class="line-box">
            <span
              :class="{
                line: true,
                'line-d': true,
                active: pieActive4,
              }"
            ></span>
            <span>火灾报警主机监测点位</span>
          </div>
          <div>
            <!-- 在线 -->
            <div class="dis-online">
              <div>
                <span class="online"></span>
                <span>1234个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>1234个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-num" @click="clickItem(5)">
          <div class="line-box">
            <span
              :class="{
                line: true,
                'line-e': true,
                active: pieActive5,
              }"
            ></span>
            <span>消防监控室人员离岗检测点位</span>
          </div>
          <div>
            <!-- 在线 -->
            <div class="dis-online">
              <div>
                <span class="online"></span>
                <span>1234个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>1234个</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Monitor3D from "@/components/Monitor3D.vue";
export default {
  components: { Monitor3D },
  data() {
    return {
      pieActive1: true,
      pieActive2: true,
      pieActive3: true,
      pieActive4: true,
      pieActive5: true,
      ctx: ["生命通道监控点位", "电气火灾监测点位", "水压检测点位", '火灾报警主机监测点位', '消防监控室人员离岗检测点位'],
    };
  },
  methods: {
    clickItem(idx) {
      this[`pieActive${idx}`] = !this[`pieActive${idx}`];
      this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  display: flex;
  justify-content: space-between;
  .online {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #15ff2d;
    border-radius: 50%;
    margin-right: 2px;
  }
  .off-line {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f06040;
    border-radius: 50%;
    margin-right: 2px;
  }
  .dis-online {
    display: flex;
    // justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
  }
  
  // 渐变
  .bg-num {
    width: 125px;
    height: 50px;
    background: rgba(0, 213, 255, 0.18);
    padding: 5px 5px;
    cursor: pointer;
  }
  .line-box {
    display: flex;
    align-items: center;
    margin-top: 7px;
  }
  .line {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #d3d3d3;
    margin-right: 5px;
    &.active {
      background: #d5c307;
    }
  }
  .line-g {
    &.active {
      background: #12a647;
    }
  }
  .line-b {
    &.active {
      background: #01adef;
    }
  }
}
.info-2 {
  display: flex;
  margin-top: 4px;
  gap: 8px;
  .online {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #15ff2d;
    border-radius: 50%;
    margin-right: 2px;
  }
  .off-line {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f06040;
    border-radius: 50%;
    margin-right: 2px;
  }
  .dis-online {
    display: flex;
    // justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
  }
  .bg-num {
    width: 197px;
    height: 50px;
    background: rgba(0, 213, 255, 0.18);
    padding: 5px 5px;
    cursor: pointer;
  }
  .line-box {
    display: flex;
    align-items: center;
    margin-top: 7px;
  }
  .line {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #d3d3d3;
    margin-right: 5px;
  }
  .line-d {
    &.active {
      background: #caf869;
    }
  }
  .line-e {
    &.active {
      background: #88ffc6;
    }
  }
}
.video-list {
  padding: 10px 10px;
  font-size: 13px;
}
</style>
