<template>
  <div class="potential-people"
       v-loading="loading"
       element-loading-text="加载中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0,0,0,0.5)"
  >
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople?countType=event')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wjj.png" alt="">
      </div>
      <div class="txt">
        事件未解决 <br>
        上报人数
      </div>
      <div class="num"><span class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople?countType=demand')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wmz.png" alt="">
      </div>
      <div class="txt">
        需求未满足 <br>
        人数
      </div>
      <div class="num"><span class="green">{{ unFinishNum ? unFinishNum : 0 }}</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople?countType=service')">
      <div class="icon">
        <img src="@/assets/images/manyidu/qz_wx.png" alt="">
      </div>
      <div class="txt">
        应享未享 <br>
        服务人数
      </div>
      <div class="num"><span class="light">{{ noServiceNum ? noServiceNum : 0 }}</span>人</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PotentialPeople",
  data() {
    return {
      noServiceNum: 0,
      unFinishNum: 0,
      unSolvedNum: 0,
      loading: true
    }
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getData();
      }
    }
  },
  mounted() {
    if (this.$store.state.chooseArea.chooseName.orgId) {
      this.getData();
    }
  },

  methods: {
    getData() {
      this.loading = true
      let params = {
        level: this.$store.state.chooseArea.chooseName.level,
        orgId: this.$store.state.chooseArea.chooseName.orgId
      }
      this.$http.get('/governance/satisfactionOverview/potentialSatisfactionGroup?' + this.$paramsFormat(params)).then(({data: {data}}) => {
        this.noServiceNum = data.noServiceNum
        this.unFinishNum = data.unFinishNum
        this.unSolvedNum = data.unSolvedNum
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.potential-people {
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .potential-people-item {
    margin: 14px;
    text-align: center;
    flex: 1;
    border: 1px solid rgba(28, 67, 111, 0.22);
    background: linear-gradient(0deg, rgba(31, 121, 255, 0.22) 0%, rgba(31, 121, 255, 0) 100%);
    padding: 26px 0 31px;

    .icon {
      width: 86px;
      height: 86px;
      margin: 0 auto;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      line-height: 24px;
      margin: 11px 0 22px;
    }

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

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }

    }
  }
}

.orange {
  color: #FFB73C;
}

.green {
  color: #08EBAE;
}

.light {
  color: #7FCEFF;
}

</style>