<template>
  <ele-page flex-table>
    <ele-card flex-table>
      <page-search @search="reload"></page-search>

      <div class="state-item" v-for="item in stateList">
        <el-text size="large" class="state-title">{{ item.title }}</el-text>

        <div class="flex flex-wrap">
          <div
            class="child-item flex flex-col items-center justify-center"
            v-for="child in item.children"
          >
            <el-text size="large" type="warning" class="child-number">
              {{ child.number }}
            </el-text>
            <el-text size="large" class="child-name">{{ child.name }}</el-text>
          </div>
        </div>
      </div>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import pageSearch from './components/page-search.vue';
  import request from '@/utils/request';

  defineOptions({ name: 'financeOverview' });

  function reload() {
    request({ url: '/finance/overview' }).then((res) => {
      stateList.value = res.data;
    });
  }

  const stateList = ref([
    {
      title: '账户总览',
      children: [
        {
          name: '累计账户余额',
          number: 10023
        },
        {
          name: '待付款（待结算）',
          number: 32343
        },
        {
          name: '待提现金额',
          number: 2345
        },
        {
          name: '提现中金额',
          number: 344
        },
        {
          name: '已提现金额',
          number: 345
        }
      ]
    },
    {
      title: '佣金总览',
      children: [
        {
          name: '累计佣金',
          number: 10023
        },
        {
          name: '待结算佣金',
          number: 32343
        },
        {
          name: '已结算佣金',
          number: 2345
        }
      ]
    },
    {
      title: '书款总览',
      children: [
        {
          name: '累计书款',
          number: 10023
        },
        {
          name: '待结算书款',
          number: 32343
        },
        {
          name: '已结算书款',
          number: 2345
        }
      ]
    }
  ]);
</script>
<style lang="scss">
  .state-item {
    margin-bottom: 40px;
    .state-title {
      font-size: 18px;
      font-weight: 550;
    }
  }
  .child-item {
    padding: 20px 30px;
    border-radius: 10px;
    margin-right: 20px;
    background-color: #f5f7fa;
    margin-top: 10px;
    .child-number {
      font-size: 36px;
    }
  }
</style>
