<script setup>
// 引入依赖
import api from '@/api/finance'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
import _ from 'lodash'
import {ref,onMounted } from 'vue'
// 图像
import icon1 from '@/assets/f_icon1.png'
import icon2 from '@/assets/f_icon2.png'
import icon3 from '@/assets/f_icon3.png'
import icon4 from '@/assets/f_icon4.png'
import icon5 from '@/assets/f_icon5.png'
// 生命周期
onMounted(() => {
  getFinanceInfo()
})
// 变量
const financeInfo = ref({})
// 方法
async function getFinanceInfo() {
  const res = await api.getFinanceInfo()
  if(res.code === 0) {
    financeInfo.value = res.data
  }
}
</script>
<template>
  <div class="gva-table-box fiance-box">
    <div class="card-box">
      <div class="card-item">
        <div class="ci-icon">
          <img :src="icon1" alt="">
        </div>
        <div class="ci-title">学生总数</div>
        <div class="ci-value">{{financeInfo.student_num}}人</div>
      </div>
      <div class="card-item">
        <div class="ci-icon">
          <img :src="icon2" alt="">
        </div>
        <div class="ci-title">助教总数</div>
        <div class="ci-value">{{financeInfo.assistant_num}}人</div>
      </div>
      <div class="card-item">
        <div class="ci-icon">
          <img :src="icon3" alt="">
        </div>
        <div class="ci-title">老师总数</div>
        <div class="ci-value">{{financeInfo.teacher_num}}人</div>
      </div>
      <div class="card-item">
        <div class="ci-icon">
          <img :src="icon4" alt="">
        </div>
        <div class="ci-title">课程订单</div>
        <div class="ci-value">{{financeInfo.course_order_num}}</div>
      </div>
      <div class="card-item">
        <div class="ci-icon">
          <img :src="icon5" alt="">
        </div>
        <div class="ci-title">测试订单</div>
        <div class="ci-value">{{financeInfo.exam_order_num}}</div>
      </div>
    </div>
    <div class="total-box">
      <div class="tb-item">
        今日收益：{{financeInfo.today_income/100}}
      </div>
      <div class="tb-item">
        累计总收益：{{financeInfo.total_income/100}}
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .fiance-box{
    .card-box{
      margin-bottom: 30px;
      .card-item{
        .ci-title{
          margin-bottom: 10px;
        }
        .ci-icon{
          img{
            width: 80px;
            height: 80px;
          }
          position: absolute;top: 5px;
          right: 5px;
        }
        position: relative;
        display: inline-block;
        width: 300px;
        height: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
        box-shadow: 5px 5px 5px #f0f2f5;
        padding: 10px;
        background: linear-gradient(#4fadc9,white);
        color: white;
      }
    }
    .total-box{
      .tb-item{
        margin-bottom: 10px;
      }
    }
  }
</style>
