<template>
  <!-- 用户信息 -->
  <el-col :md="24" :lg="24" class="card-panel__col">
    <div class="component-container">
      <el-card class="project-card">
        <template #header>
            <el-row :gutter="10" class="fw-b">
                <el-col :span="8" align="center">用户类型</el-col>
                <el-col :span="8" align="center">累计</el-col>
                <el-col :span="8" align="center">昨日新增</el-col>
            </el-row>
        </template>
        <div class="project-card__main">
          <el-row :gutter="10">
            <el-col :span="8" align="center" class="fw-b"> 注册用户 </el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.registrationNum }}</el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.yesterdayRegistrationNum }}</el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8" align="center" class="fw-b"> 实名用户 </el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.applicationNum }}</el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.yesterdayApplicationNum }}</el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8" align="center" class="fw-b"> 认证商家 </el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.bussinessNum }}</el-col>
            <el-col :span="8" align="center">{{ memberBoardInfo.yesterdayBussinessNum }}</el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </el-col>
</template>

<script lang="ts">
  export default {
    name: 'index'
  };
</script>
<script setup lang="ts">
  import { onMounted, reactive, toRefs } from 'vue';
  import {
    memberBoard
  } from '@/api/system/dashboard';
  import {
    MemberBoardResponseData
  } from '@/types/api/system/dashboard';

  const state = reactive({
    memberBoardInfo: {
      registrationNum: 0,
      yesterdayRegistrationNum: 0,
      applicationNum: 0,
      yesterdayApplicationNum: 0,
      bussinessNum: 0,
      yesterdayBussinessNum: 0,
    } as MemberBoardResponseData
  });
  const {
    memberBoardInfo
  } = toRefs(state);
  function handleQuery() {
    memberBoard({ pageNo: 1, pageSize: 1000 }).then(({ data }) => {
      state.memberBoardInfo = data
    }).catch(err => {
      console.log(err)
    });
  }
  onMounted(() => {
    handleQuery();
  });
</script>

<style lang="scss" scoped>
.component-container {
  .project-card {
    font-size: 14px;

    &__main {
    line-height: 28px;
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    }
}

.fw-b {
    font-weight: bold;
  }
}
</style>