<template>
  <div class="h-full flex flex-col">
    <div class="flex justify-between p-4">
      <div class="text-[#999] text-sm">数据概览</div>
    </div>
    <div class="flex-1 grid grid-cols-2 py-5">
      <div class="text-center">
        <div class="text-2xl font-medium">门店总数</div>
        <div class="my-5">
          <!-- <CountTo class="text-2xl" :endVal="deta?.stores_count || 0" /> -->
          <div class="flex justify-center space-x-1">
            <div class="w-8 h-15 text-4xl font-600 bg-[#0E7CE2] text-white flex justify-center items-center" v-for="(item, i) in arrNum(deta?.stores_count)" :key="i">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-medium">员工总数</div>
        <div class="my-5">
          <!-- <CountTo class="text-2xl" :endVal="deta?.employees_count || 0" /> -->
          <div class="flex justify-center space-x-1">
            <div class="w-8 h-15 text-4xl font-600 bg-[#0E7CE2] text-white flex justify-center items-center" v-for="(item, i) in arrNum(deta?.employees_count)" :key="i">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CountTo from '@/components/CountTo/index.vue'
import http from '@/utils/request'
import { onMounted, ref, computed } from 'vue'

const deta = ref({})

onMounted(() => {
  getData()
})

const arrNum = (e) => {
  return e?.toString()?.split('') ?? []
}

const getData = async () => {
  const resData = await http.get('/admin-api/api/cockpit/basic')
  deta.value = resData
}
</script>
