<template>
  <div class="full-width full-height block flex-center">
    <div class="flex flex-content-start mt-5 ml-10">
      <div class="text_62 bold mr-20">累计用户总数</div>
      <div class="flex flex-center" v-for="i in allCount.length">
        <div class="mr-5 bold flex-center flex user-number">
          {{ allCount.split('')[i - 1] }}
        </div>
      </div>
    </div>

    <div class="block box">
      <div class="flex flex-center-between">
        <div class="title pl-5 flex flex-align-center">梧桐智库</div>
        <div class="title pl-5 flex flex-align-center">梧桐研究院</div>
        <div class="title pl-5 flex flex-align-center">梧桐项目云</div>
      </div>
      <div class="flex flex-center-between mt-3">
        <div class="number bold pl-5 width25">{{ bizCount }}</div>
        <div class="number bold pl-5 width25">{{ wt }}</div>
        <div class="number bold pl-5 width25">{{ yunCount }}</div>
      </div>
      <div class="flex flex-center-between mt-3 mb-5 mr-5">
        <div class="flex flex-content-start width25 ml-5">
          <div class="white mr-10 flex flex-center">日新增</div>
          <div class="green bold font-10">{{ todayBiz }}</div>
        </div>
        <div class="flex flex-content-start width25 ml-5">
          <div class="white mr-10 flex flex-center">日新增</div>
          <div class="green bold font-10">{{ todayWt }}</div>
        </div>
        <div class="flex flex-content-start width25 ml-5">
          <div class="white mr-10 flex flex-center">日新增</div>
          <div class="green bold font-10">{{ todayYun }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allCount: '000',
      bizCount: 0,
      todayBiz: 0,
      yunCount: 0,
      todayYun: 0,
      wt: 0,
      todayWt: 0
    }
  },
  mounted() {
    this.getUserCountByTenant()
  },
  methods: {
    getUserCountByTenant() {
      this.$api.biz.getUserCountByTenant().then(res => {
        if (res.code === 200) {
          res.data.map(item => {
            if (item.name === 'biz') {
              this.bizCount = item.number
            } else if (item.name === 'yun') {
              this.yunCount = item.number
            } else if (item.name === 'wt') {
              this.wt = item.number
            } else if (item.name === 'todayBiz') {
              this.todayBiz = item.number
            } else if (item.name === 'todayYun') {
              this.todayYun = item.number
            } else if (item.name === 'todayWt') {
              this.todayWt = item.number
            }
          })
          this.allCount = (this.bizCount + this.yunCount).toString()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.text_62 {
  background-image: linear-gradient(
    180deg,
    rgba(238, 238, 238, 1) 0,
    rgba(49, 145, 187, 1) 100%
  );
  overflow-wrap: break-word;
  color: rgba(176, 200, 243, 1);
  font-size: 20px;
  font-family: PangMenZhengDao;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  margin-top: 5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.user-number {
  width: 20px;
  background: white;
  font-size: 26px;
  padding-right: 3px;
  padding-left: 3px;
  color: #3caaff;
  border-radius: 5px;
}
.ico1 {
  height: 80px;
  width: 80px;
}
.lin {
  background: #258e9b;
  width: 5px;
  height: 70%;
  border-radius: 10px;
}
.box {
  align-items: center;
  border: 1px solid #1b6ad2;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
.title {
  width: 25%;
  height: 30px;
  color: white;
  background-size: 100% 100%;
  background-image: url('@/assets/biz-img/jb.png');
}
.number {
  font-size: 26px;
  color: #f3a845;
}
.xz-number {
  font-size: 26px;
  color: #05f1dd;
}
.width25 {
  width: 25%;
}
.mt-3 {
  margin-top: 3px;
}
</style>
