<template>
  <div>
    <div class="number-list">
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_ts.png" alt="">
        </div>
        <div>
          <div class="txt">
            12345热线 <br>
            投诉人数
          </div>
          <div class="num"><span>{{event12345Num?event12345Num:0}}</span> 人</div>
        </div>

      </div>
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_bmy.png" alt="">
        </div>
        <div>
          <div class="txt">
            省满意度调查 <br>
            不满意人数
          </div>
          <div class="num"><span>{{provinceSatisfactionNum?provinceSatisfactionNum:0}}</span> 人</div>
        </div>

      </div>
      <div class="number-item">
        <div class="img">
          <img src="@/assets/images/manyidu/hf_zpbmy.png" alt="">
        </div>
        <div>
          <div class="txt">
            社区满意度自评 <br>
            不满意人数
          </div>
          <div class="num"><span>{{selfInspectNum?selfInspectNum:0}}</span> 人</div>
        </div>
      </div>
    </div>
    <div class="number-list2">
      <div class="number-item">
        <div class="txt">
          本月回访 <br>
          次数
        </div>
        <div class="num"><span class="grey">{{followMonthNum?followMonthNum:0}}</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          本月回访消除 <br>
          风险人员数
        </div>
        <div class="num"><span class="green">{{followMonthNotRiskyNum?followMonthNotRiskyNum:0}}</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          累计回访 <br>
          次数
        </div>
        <div class="num"><span class="purple">{{followSumNum?followSumNum:0}}</span> 人</div>
      </div>
      <div class="number-item">
        <div class="txt">
          累计回访消除 <br>
          风险人员数
        </div>
        <div class="num"><span class="blue">{{followNotRiskyNum?followNotRiskyNum:0}}</span> 人</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "RiskStatistics",
  data() {
    return {
      event12345Num: 0,
      followMonthNotRiskyNum: 0,
      followMonthNum: 0,
      followNotRiskyNum: 0,
      followSumNum: 0,
      provinceSatisfactionNum: 0,
      selfInspectNum: 0,
    }
  },

  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getData();
      }
    }
  },
  mounted() {
    if (this.$store.state.chooseArea.chooseName.orgId) {
      this.getData();
    }
  },
  methods: {
    getData() {
      let params = {
        level: this.$store.state.chooseArea.chooseName.level,
        orgId: this.$store.state.chooseArea.chooseName.orgId
      }
      this.$http.get('/governance/satisfactionOverview/satisfactionFollowGroup?'+this.$paramsFormat(params)).then(({data:{data}}) => {
        this.event12345Num = data.event12345Num;
        this.followMonthNotRiskyNum = data.followMonthNotRiskyNum;
        this.followMonthNum = data.followMonthNum;
        this.followNotRiskyNum = data.followNotRiskyNum;
        this.followSumNum = data.followSumNum;
        this.provinceSatisfactionNum = data.provinceSatisfactionNum;
        this.selfInspectNum = data.selfInspectNum;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.number-list {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  padding: 0 15px 0 8px;

  .number-item {
    display: flex;

    .image {
      width: 98px;
      height: 70px;
    }

    .txt {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 24px;
      margin-bottom: 22px;
    }

    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
        color: #3AB7FF;
      }
    }
  }
}

.number-list2 {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 39px;
  .number-item {
    .txt {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      line-height: 24px;
      margin-bottom: 16px;
    }
    .num {
      font-size: 14px;
      font-weight: 500;
      color: #A3B9DA;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }
}
.grey {
  color: #78C4F3;
}
.green {
  color: #08EBAE;
}
.purple {
  color: #A761FD;
}
.blue {
  color: #356EFF;
}
</style>