<template>
  <div class="video-list">
    <!-- 视频 -->
    <div v-if="caremaList && caremaList.length > 0" class="videos">
      <template v-for="(item, i) in caremaList">
        <div class="video" :key="i" v-if="i < 4">
          <Camera :id="item.sbbm" :byList="caremaList" :dataList="caremaList" />
        </div>
      </template>
    </div>
    <div v-else class="no-data">
      <div class="in">
        <img
          src="../../../assets/images/no-video.png"
          style="width: 158px; height: 157px"
        />
        <span>暂无视频数据</span>
      </div>
    </div>
    <!-- <Monitor3D ref="monitor" :data="pieData" v-if="totalZs > 0" /> -->
    <div style="width: 420px; height: auto">
      <div class="sum">
        <div class="item yellow">设备总数 <span>{{ totalZs }}</span> 个</div>
        <div class="item green">在线 <span>{{ totalZx }}</span> 个</div>
        <div class="item red">告警 <span>{{ totalGj }}</span> 个</div>
      </div>
      <div class="line2"></div>
      <div class="status">
        <div class="txt">设备状态</div>
        <div class="s">
          <div class="legend">
            <div class="item green">
              <div class="dot"></div>
              在线
            </div>
            <div class="item red">
              <div class="dot"></div>
              告警
            </div>
          </div>
        </div>
      </div>
    </div>
    <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,
      totalZs: 0,
      totalZx: 0,
      totalGj: 0
    };
  },
  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: {
            name: 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,
          },
        };
        let totalZs = 0;
        let totalZx = 0;
        let totalGj = 0;
        if (res.data.rows) {
          res.data.rows.forEach((p) => {
            totalZs = totalZs + p.sbzs;
            totalZx = totalZx + p.zxs;
            totalGj = totalGj + p.gjs;
            if (p.sblx.indexOf("水压") >= 0) {
              // 水压
              pieData.sy.zs += p.sbzs || 0;
              pieData.sy.zx += p.zxs || 0;
              pieData.sy.bj += p.gjs || 0;
            } else if (p.sblx.indexOf("生命通道") >= 0) {
              // 生命通道
              pieData.smtd.zs += p.sbzs || 0;
              pieData.smtd.zx += p.zxs || 0;
              pieData.smtd.bj += p.gjs || 0;
            } else if (p.sblx.indexOf("消防监控室") >= 0) {
              // 消防控制室
              pieData.xfkzs.zs += p.sbzs || 0;
              pieData.xfkzs.zx += p.zxs || 0;
              pieData.xfkzs.bj += p.gjs || 0;
            } else if (p.sblx.indexOf("电气火灾") >= 0) {
              // 电器火灾
              pieData.dqhz.zs += p.sbzs || 0;
              pieData.dqhz.zx += p.zxs || 0;
              pieData.dqhz.bj += p.gjs || 0;
            } else if (p.sblx.indexOf("火灾报警") >= 0) {
              // 火灾报警主机
              pieData.hzbjzj.zs += p.sbzs || 0;
              pieData.hzbjzj.zx += p.zxs || 0;
              pieData.hzbjzj.bj += p.gjs || 0;
            }
          });
        }
        this.totalZs = totalZs;
        this.totalZx = totalZx;
        this.totalGj = totalGj;
        this.pieData = 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: 58px;
    background: rgba(0, 213, 255, 0.18);
    padding: 5px 5px;
    cursor: pointer;
  }

  .line-box {
        height: 24px;
    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: 8px;
  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: 58px;
    background: rgba(0, 213, 255, 0.18);
    padding: 5px 5px;
    cursor: pointer;
  }

  .line-box {
        height: 24px;
    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;
  }
}
.no-data {
  width: 100%;
  height: 192px;
  display: flex;
  justify-content: center;
  align-content: center;
  .in {
    display: flex;
    flex-direction: column;
    span {
      text-align: center;
    }
  }
}
.sum {
  width: 100%;
  height: 36px;
  margin-top: 26px;
  background: linear-gradient(
    180deg,
    rgba(0, 148, 255, 0.5) 0%,
    rgba(0, 148, 255, 0) 100%
  );
  box-sizing: border-box;
  padding: 6px 17px 6px 7px;
  display: flex;
  justify-content: space-between;
  .item {
    font-family: "Abel";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */

    display: flex;
    align-items: center;
    text-align: center;

    /* F/100 */

    color: #ffffff;
    span {
      font-family: "Abel";
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 36px;
      /* identical to box height, or 150% */

      display: flex;
      align-items: center;
      text-align: center;
      margin: 0 4px;
    }

    &.yellow span {
      color: #ffd74b;
    }
    &.green span {
      color: #00ff66;
    }
    &.red span {
      color: #ff4b23;
    }
  }
}
.line2 {
  width: 100%;
  height: 1px;
  background: rgba(0, 213, 255, 0.27);
  margin: 10px 0 7px 0;
}
.status {
  width: 100%;
  height: 36px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;

  .txt {
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 36px;
    /* identical to box height, or 257% */

    display: flex;
    align-items: center;
    text-align: center;

    color: #ffffff;
  }
}
.legend {
  width: 150px;
  height: 36px;
  display: flex;
  align-content: center;
  align-items: center;
  .item {
    width: 100%;
    height: 22px;
    margin-bottom: 2px;
    display: flex;
    align-content: center;
    align-items: center;

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 100%;
      margin-right: 10px;
    }

    &.green .dot {
      background-color: #15ff2d;
    }

    &.red .dot {
      background-color: #f06040;
    }
  }
}
</style>
