<template>
  <div class="home-container">
     <el-row class="row-bg" :gutter="10">
        <el-row class="custom" :gutter="10">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card style="margin-bottom: 10px">
              <div class="grid-content">
                <div class="left" style="background: #f25e43"
                ><el-icon style="font-size: 24px; color: white"><Coin /></el-icon
                ></div>
                <div class="right">
                  <div
                      class="h2"
                      style="color: #f25e43"
                  ><count-to
                      :start-val="0"
                      :end-val=todayTotalIncome
                      :duration="2000"
                      :autoplay="true"
                  ></count-to
                  ></div>
                  <div>当日总充值金额¥ </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card style="margin-bottom: 10px">
              <div class="grid-content">
                <div class="left"
                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                ></div>
                <div class="right">
                  <div
                      class="h2"
                      style="color: #2d8cf0"
                  ><count-to
                      :start-val="0"
                      :end-val=todayChargeCount
                      :duration="2000"
                      :autoplay="true"
                  ></count-to
                  ></div>
                  <div>当日总充值人数 </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card style="margin-bottom: 10px">
              <div class="grid-content">
                <div class="left" style="background: #64d572"
                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                ></div>
                <div class="right">
                  <div
                      class="h2"
                      style="color: #64d572"
                  ><count-to
                      :start-val="0"
                      :end-val=todayRegisterCount
                      :duration="2000"
                      :autoplay="true"
                  ></count-to
                  ></div>
                  <div>当日总注册人数 </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-card style="margin-bottom: 10px">
              <div class="grid-content">
                <div class="left" style="background: #9269D6"
                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
                ></div>
                <div class="right">
                  <div
                      class="h2"
                      style="color: #9269D6"
                  ><count-to
                      :start-val="0"
                      :end-val=currOnlineCount
                      :duration="2000"
                      :autoplay="true"
                  ></count-to
                  ></div>
                  <div>当前在线人数 </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>30分钟在线人数</span>
            </div>
          </template>
          <div style="display: flex">
            <el-card class="box-card">
          <line-charts height="200px" width="100%" />
        </el-card>
          </div>
        </el-card>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>各个服务器充值</span>
            </div>
          </template>
          <div>
            <bar-charts height="300px" width="100%" id="bar1"></bar-charts>
          </div>
        </el-card>

        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>30天活跃人数</span>
            </div>
          </template>
          <div style="display: flex">
            <el-card class="box-card">
          <line-charts height="200px" width="100%" />
        </el-card>
          </div>
        </el-card>
      <!-- </el-col> -->
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import {ref} from 'vue'
  import { Coin, User } from '@element-plus/icons-vue'
  import CountTo from '@/components/CountTo/index.vue'
  import BarCharts from '@/views/echarts/simple/components/bar.vue'
  import LineCharts from '@/views/echarts/simple/components/line.vue'
  let todayTotalIncome = ref<number>(9999)
  let todayChargeCount = ref<number>(1200)
  let todayRegisterCount = ref<number>(12520)
  let currOnlineCount = ref<number>(3215)

</script>

<style scoped lang="scss">
@import "./index";
</style>
