<template>
  <div class="big-wraring-info-wrap">
    <div class="mk-top">{{title}}</div>
    <div class="conter-block">
      <div class="count-block">
        <div class="info-block-div alarm-ycl">
          <div>
            <svg-icon icon-class="bigS_jc" class="big-wraring-svg" />
          </div>
          <div>已处理</div>
          <div >{{result.processed}}</div>
        </div>
        <div class="info-block-div alarm-wcl">
          <div>
            <svg-icon icon-class="bigS_jj" class="big-wraring-svg" />
          </div>
          <div style="color: #ffc000;">未处理</div>
          <div >{{result.unProcessed}}</div>
        </div>
        <div class="info-block-div alarm-zs">
          <div>
            <svg-icon icon-class="bigS_alarm" class="big-wraring-svg" />
          </div>
          <div style="color: #e30000;">报警总数</div>
          <div>{{result.alarmTotal}}</div>
        </div>
      </div>
      <echarts-bar-wrap style="display: flex; justify-content: center;" :styles="'width: 90%; height: 180px;'" :option="radarOption"></echarts-bar-wrap>
    </div>
    <div class="mk-bottom"></div>
  </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);
  .mk-top {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #02d9fd;
    padding-left: 0;
    align-items: end;
    padding-bottom: 0px;
    letter-spacing: 1px;
    background-size: cover;
    padding-top: 4px;
    background-image: url("../../../../assets/images/big/boxleft-top.png");
  }

  .conter-block {
    width: 100%;
    height: 350px;
    background-image: url("../../../../assets/images/big/boxleft-center.png");
    background-size: contain;
    padding-top: 10px;
    padding: 5px;
    .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-zs {
        background-image: url("../../../../assets/images/big/Group20.png");
      }
      .alarm-ycl {
        background-image: url("../../../../assets/images/big/Group22.png");
      }
      .alarm-wcl {
        background-image: url("../../../../assets/images/big/Group21.png");
      }

      .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>
