<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ReNormalCountTo } from "@/components/ReCountTo";
const params = defineProps({
  title: {
    type: String,
    default: ""
  },
  bgColor: {
    type: String,
    default: "#fff"
  },
  icon: {
    type: String
  },
  prefix: {
    type: String,
    default: ""
  },
  data: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    default: 100
  },
  loading: {
    type: Boolean,
    default: false
  }
});
</script>

<template>
  <ElCard shadow="hover" class="mb-20px mb-3">
    <ElSkeleton :loading="params.loading" animated :rows="2">
      <template #default>
        <div :class="` flex justify-between`">
          <div>
            <div :class="` p-16px inline-block rounded-6px`">
              <SvgIcon
                :icon-class="params.icon"
                icon="svg-icon:peoples"
                size="70px"
              />
            </div>
          </div>
          <div class="flex flex-col justify-between">
            <div :class="`text-16px text-gray-500 text-right`">
              {{ params.title }}
            </div>
            <ReNormalCountTo
              :prefix="params.prefix"
              :duration="params.duration"
              :color="'#409EFF'"
              :fontSize="'2em'"
              :startVal="0"
              :endVal="params.data"
            />
          </div>
        </div>
      </template>
    </ElSkeleton>
  </ElCard>
</template>

<style scoped lang="scss">
.grid-content {
  border-radius: 10px;
  min-height: 130px;
}

.ep-bg-purple {
  background: #fff;
}
</style>
