<template>
  <div class="big-wraring-info-wrap">
    <div class="title-t">{{title}}</div>
    <div class="count-block">
      <div class="info-block-div">
        <div>报警总数</div>
        <div>{{result.alarmTotal}}</div>
      </div>
      <div class="info-block-div">
        <div>已处理率</div>
        <div>{{result.processedRate}}%</div>
      </div>
      <div class="info-block-div">
        <div>未处理</div>
        <div style="color: rgba(255, 47, 96, 1);">{{result.unProcessed}}</div>
      </div>
      <div class="info-block-div">
        <div>已处理</div>
        <div style="color: rgba(40, 255, 155, 1);">{{result.processed}}</div>
      </div>
      <div class="alarm-icon-block">
        <i class="iconfont iconbaojing"></i>
      </div>
    </div>
    <echarts-bar-wrap :styles="'width: 100%; height: 220px;'" :option="radarOption"></echarts-bar-wrap>
  </div>
</template>
<script>
import EchartsBarWrap from "./echartsBar";
export default {
  name: "wraringInfoWrap",
  components: {
    EchartsBarWrap
  },
  props: ["result"],
  data() {
    return {
      title: "警情信息处理情况",
      radarOption: []
    };
  },
  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 {
  width: 100%;
  height: calc(100% - 300px);
  .title-t {
    font-size: 16px;
    letter-spacing: 1px;
    height: 60px;
    width: 100%;
    background-size: cover;
    display: flex;
    justify-content: left;
    padding-left: 45px;
    align-items: center;
    padding-bottom: 10px;
    background-image: url("../../../../assets/images/big/b.png");
    width: 410px;
  }
  .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 {
      height: calc((180px - 20px) / 2);
      width: calc((100% - 10px) / 2);
      border: 1px solid #03a9f4;
      display: flex;
      flex-wrap: wrap;
      padding: 8px 0;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      > div {
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: "Source Han Sans CN";
        font-weight: 500;
      }
      > div:nth-child(1) {
        font-size: 14px;
        color: #ffffff;
      }
      > div:nth-child(2) {
        font-size: 16px;
        color: #ffffff;
      }
    }
    .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;
      }
    }
  }
}
</style>
