<template>
  <div class="video-list">
    <!-- 视频 -->
    <div v-if="caremaList" class="videos">
      <!-- <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="" /> -->
      <template v-for="(item, i) in caremaList">
        <div class="video" :key="i" v-if="i < 4">
          <Camera :id="item.sbbm" :byList="caremaList" />
        </div>
      </template>

      <!-- <Camera :id="item.sbbm" v-for="(item, i) in caremaList" :key="i" /> -->
    </div>
    <Monitor3D ref="monitor" :data="pieData" v-if="pieData" />
    <div v-if="pieData">
      <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>{{ pieData.smtd.zx || 0 }}个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>{{ pieData.smtd.bj || 0 }}个</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>{{ pieData.dqhz.zx || 0 }}个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>{{ pieData.dqhz.bj || 0 }}个</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>{{ pieData.sy.zx || 0 }}个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>{{ pieData.sy.bj || 0 }}个</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>{{ pieData.hzbjzj.zx || 0 }}个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>{{ pieData.hzbjzj.bj || 0 }}个</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>{{ pieData.xfkzs.zx || 0 }}个</span>
              </div>
              <div>
                <span class="off-line"> </span>
                <span>{{ pieData.xfkzs.bj || 0 }}个</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Monitor3D from "@/components/Monitor3D.vue";
import { getDeviceList, getJrs } from "@/api/iot.js";
import { getXfjrs } from "@/api/detail.js";
import Camera from "@/components/Camera.vue";

export default {
  components: { Monitor3D, Camera },
  data() {
    return {
      pieActive1: true,
      pieActive2: true,
      pieActive3: true,
      pieActive4: true,
      pieActive5: true,
      ctx: [
        "生命通道监控点位",
        "电气火灾监测点位",
        "水压检测点位",
        "火灾报警主机监测点位",
        "消防监控室人员离岗检测点位",
      ],
      caremaList: [],
      pieData: null,
    };
  },
  props: ["detail"],
  methods: {
    clickItem(idx) {
      // this[`pieActive${idx}`] = !this[`pieActive${idx}`];
      // this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
      let sblx = "";
      if (idx === 1) {
        sblx = "生命通道监测";
      } else if (idx === 2) {
        sblx = "电气火灾终端";
      } else if (idx === 3) {
        sblx = "水压监测终端";
      } else if (idx === 4) {
        sblx = "火灾报警";
      } else if (idx === 5) {
        sblx = "消防控制室监控";
      }
      this.$emit("openModal", {
        name: "zhxfModal",
        params: { sblx, gcjzmc: this.detail.gcjzmc },
      });
    },
    getCaremarList() {
      getDeviceList({
        jzid: this.detail.id,
        pageNum: 1,
        pageSize: 20,
        zt: "在线",
        sblx: "生命通道监测",
      }).then((res) => {
        this.caremaList = res.data.rows;

        getDeviceList({
          jzid: this.detail.id,
          pageNum: 1,
          pageSize: 20,
          zt: "在线",
          sblx: "消防控制室监控",
        }).then((res) => {
          this.caremaList = this.caremaList.concat(res.data.rows);
        });
      });
    },
    getJrsList() {
      getXfjrs({
        pageNum: 1,
        pageSize: 100,
        jzid: this.detail.id,
      }).then((res) => {
        const pieData = {
          dqhz: {
            zs: null,
            bj: null,
            zx: null,
          },
          hzbjzj: {
            zs: null,
            bj: null,
            zx: null,
          },
          smtd: {
            zs: null,
            bj: null,
            zx: null,
          },
          sy: {
            zs: null,
            bj: null,
            zx: null,
          },
          xfkzs: {
            zs: null,
            bj: null,
            zx: null,
          },
        };
        if (res.data.rows) {
          res.data.rows.forEach((p) => {
            if (p.sblx === "水压监测终端") {
              // 水压
              pieData.sy.zs += p.zxs || 0;
              pieData.sy.zx += p.sbzs || 0;
              pieData.sy.bj += p.gjs || 0;
            } else if (p.sblx === "生命通道监测") {
              // 生命通道
              pieData.smtd.zs += p.sbzs || 0;
              pieData.smtd.zx += p.zxs || 0;
              pieData.smtd.bj += p.gjs || 0;
            } else if (p.sblx === "消防控制室监控") {
              // 消防控制室
              pieData.xfkzs.zs += p.sbzs || 0;
              pieData.xfkzs.zx += p.zxs || 0;
              pieData.xfkzs.bj += p.gjs || 0;
            } else if (p.sblx === "电气火灾终端") {
              // 电器火灾
              pieData.dqhz.zs += p.sbzs || 0;
              pieData.dqhz.zx += p.zxs || 0;
              pieData.dqhz.bj += p.gjs || 0;
            } else if (p.sblx === "火灾报警主机监测") {
              // 火灾报警主机
              pieData.hzbjzj.zs += p.sbzs || 0;
              pieData.hzbjzj.zx += p.zxs || 0;
              pieData.hzbjzj.bj += p.gjs || 0;
            }
          });
        }

        this.pieData = pieData;
        console.log(this.pieData);
      });
    },
  },
  mounted() {
    this.getCaremarList();
    this.getJrsList();
  },
};
</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;
}
.videos {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 192px;
  .video {
    width: 208px;
    height: 96px;
  }
}
</style>
