<template>
  <div class="big-wraring-info-wrap">
    <nav-temp htmlType="t1" :title="title">
      <div class="conter-block" slot="mk-center">
        <census-temp-b
          v-for="(item, idx) in radarOption2"
          :key="idx"
          :icolor="item.icolor"
          :title="item.title"
          :value="result[item.key] || 0"
          :icons="item.icons"
          style="width: calc((100% - 20px) / 2)"
        ></census-temp-b>
      </div>
    </nav-temp>
  </div>
</template>
<script>
import NavTemp from "./navTemp";
import CensusTempA from "./censusTempA";
import censusTempB from "./censusTempB"
export default {
  name: "wraringInfoWrap",
  components: {
    NavTemp,
    censusTempB,
  },
  props: ["result", 'countResult'],
  data() {
    return {
      title: "运行分析",
      radarOption: [],
      radarOption2: [
        {
          icolor: "#00FF48",
          icons: "iconfenxi",
          title: "总功率(kW)",
          value: "456",
          key: 'psTotal'
        },
        {
          icolor: "#4FFFFF",
          icons: "iconbiandianzhan",
          title: "总电量(kWh)",
          value: "456",
          key: 'pwTotal'
        },
        {
          icolor: "#4FFFFF",
          icons: "iconqunchengyuan",
          title: "接入用户(家)",
          value: "456",
          key: 'userTotal'
        },
        {
          icolor: "#F1E156",
          icons: "iconjierusb",
          title: "接入设备(台)",
          value: "456",
          key: 'deviceTotal'
        },
        {
          icolor: "#F1E156",
          icons: "iconfugaidq",
          title: "覆盖地区(个)",
          value: "456",
          key: 'projectTotal'
        },
        {
          icolor: "#00FF48",
          icons: "iconshebei",
          title: "设备在线(台)",
          value: "456",
          key: 'onlineTotal'
        },
      ],
    };
  },
  created() {
    this.radarOption = [0, 0, 0];
  },
  watch: {
    result: {
      handler: function (obj, oldVal) {
        this.radarOption = [];
        if (obj) {
          this.radarOption.push(obj.alarmTotal);
          this.radarOption.push(obj.unProcessed);
          this.radarOption.push(obj.processed);
        } else {
          this.radarOption = [0, 0, 0];
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.big-wraring-info-wrap {
  height: 190px;
  width: calc((100% - 20px) / 2);
  .conter-block {
    width: 100%;
    height: 190px;
    background-size: contain;
    padding-top: 10px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-items: center;
    padding: 5px 35px;
    .count-block {
      width: calc(100% - 40px);
      height: 180px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      margin: 5px 20px;
      .info-block-div {
        width: 115px;
        height: 165px;
        border: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 20px 0;

        > div {
          width: 100%;
          display: flex;
          justify-content: center;
          font-family: "Source Han Sans SC";
        }
        > div:nth-child(2) {
          font-size: 16px;
          color: #ffffff;
          font-size: 16px;
          font-weight: 400;
          color: #00bedb;
          line-height: 16px;
        }
        > div:nth-child(3) {
          font-size: 34px;
          font-family: "Agency FB";
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          height: 40px;
        }
        .big-wraring-svg {
          font-size: 40px;
        }
      }
      .alarm-icon-block {
        position: relative;
        width: 49px;
        height: 49px;
        z-index: 1;
        border: 2px solid #21ffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        top: -120px;
        left: 155px;
        background: #042fb4;
        box-shadow: 0px 0px 60px 15px #012c9e;
        > i {
          color: #21ffff;
          font-size: 30px;
        }
      }
    }
  }
  .mk-bottom {
    height: 30px;
    width: 100%;
    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
  }
}
</style>
