<template>
  <div>
    <div class="flex">
      <el-card class="box-card">
        <template #header>
          <div class="flex items-center card-header">
            <span>今日充值</span>
            <el-tooltip placement="top">
              <template #content>
                当前推广链接的状态<br />
                启用：当前推广ID已绑定回传配置<br />
                禁用：当前推广ID未绑定回传配置
              </template>
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
        <div class="money-wrapper">￥890</div>
        <div class="flex items-center justify-around">
          <div>
            <p class="text-lg font-bold">普通充值</p>
            <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
            <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
            <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
          </div>
          <div>
            <p class="text-lg font-bold">会员充值</p>
            <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
            <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
            <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
const statisticalData = ref({})
const router = useRouter()
const route = useRoute()
const rolesIdentify = inject('rolesIdentify')

onMounted(() => {
  
});
</script>

<style scoped lang="scss">
.box-card {
  width: 300px;
  margin: 8px;

  .money-wrapper {
    height: 50px;
    width: 100%;
    color: #ed892c;
    font-size: 26px;
  }
}
</style>
