<template>
  <div class="big-today-ratio-wrap">
    <nav-temp htmlType="t1" :title="title">
      <div class="bd-conter" slot="mk-center">
        <div class="echarts-list-wrap">
          <div v-for="item in rchartsList" :key="item.valueKeys">
            <div class="title">{{ item.title }}</div>
            <echarts-gauge-wrap
              :styles="item.styles"
              :colorList="item.colorList"
              :eId="item.valueKeys"
              :option="tempResult[item.valueKeys]"
            ></echarts-gauge-wrap>
          </div>
        </div>
        <div class="info-tb-block">
          <div>
            <div>{{ alarmTB }}%</div>
            <div>同比</div>
          </div>
          <div>
            <div>{{ warningTB }}%</div>
            <div>同比</div>
          </div>
        </div>
      </div>
    </nav-temp>
  </div>
</template>
<script>
import EchartsGaugeWrap from "./echartsGauge";
import NavTemp from "./navTemp";
export default {
  name: "todayRatio",
  components: {
    EchartsGaugeWrap,
    NavTemp,
  },
  props: ["result"],
  data() {
    return {
      tempResult: {
        q1: 0,
        q2: 0,
        q3: 0,
        q4: 0,
      },
      alarmTB: 0,
      warningTB: 0,
      rchartsList: [
        {
          styles: "width: 100%; height: 100%;",
          colorList: ["#27d0ec"],
          valueKeys: "q1",
          title: "今日报警",
        },
        {
          styles: "width: 100%; height: 100%;",
          colorList: ["#fdc46e"],
          valueKeys: "q2",
          title: "昨日报警 ",
        },
        {
          styles: "width: 100%; height: 100%;",
          colorList: ["#27d0ec"],
          valueKeys: "q3",
          title: "今日预警",
        },
        {
          styles: "width: 100%; height: 100%;",
          colorList: ["#fdc46e"],
          valueKeys: "q4",
          title: "昨日预警",
        },
      ],
      title: "最近2天警情同比",
    };
  },
  watch: {
    result: {
      handler: function (val, oldVal) {
        if (val) {
          this.tempResult = {};
          for (var i = 0; i < val.length; i++) {
            if (val[i]["alarmDivide"] === "ALARM") {
              this.tempResult["q1"] = val[i]["todayAlarm"];
              this.tempResult["q2"] = val[i]["yesterdayAlarm"];
              this.alarmTB = val[i]["dayOnDay"];
            } else if (val[i]["alarmDivide"] === "WARNING") {
              this.tempResult["q3"] = val[i]["todayAlarm"];
              this.tempResult["q4"] = val[i]["yesterdayAlarm"];
              this.warningTB = val[i]["dayOnDay"];
            }
          }
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.big-today-ratio-wrap {
  width: 100%;
  height: 370px;
  display: flex;
  flex-wrap: wrap;
  .bd-conter {
    width: 100%;
    height: 310px;
    background-size: contain;
    padding-top: 10px;
    padding: 5px;
    display: flex;
    padding: 0 20px;
    .echarts-list-wrap {
      width: 80%;
      height: 200px;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      > div {
        width: 50%;
        height: calc(100% / 2);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-size: 14px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        > .title {
          position: relative;
          top: 10px;
          width: 100%;
          display: flex;
          justify-content: center;
          height: 30px;
        }
      }
    }
    .info-tb-block {
      height: 100%;
      display: flex;
      width: 20%;
      flex-wrap: wrap;
      align-items: center;
      font-size: 16px;
      cursor: default;
      > div {
        width: 100%;
        // height:  50%;
        display: flex;
        flex-wrap: wrap;
        align-items: inherit;
        justify-content: center;
        > div {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>
