<template>
  <el-row :gutter="24" class="mb-10">
    <el-col :span="6">
      <el-statistic title="浏览" :value="38"/>
    </el-col>
    <el-col :span="6">
      <el-statistic title="销量" :value="2"/>
    </el-col>
    <el-col :span="6">
      <el-statistic title="下载次数" :value="54" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="营业额(元)" :value="outputValue"/>
    </el-col>
  </el-row>
  <el-divider />
  <el-row :gutter="24" class="mb-10">
    <el-col :span="6">
      <el-statistic title="总浏览" :value="268500"/>
    </el-col>
    <el-col :span="6">
      <el-statistic title="总销量" :value="1253"/>
    </el-col>
    <el-col :span="6">
      <el-statistic title="总下载次数" :value="outputValue*128"/>
    </el-col>
    <el-col :span="6">
      <el-statistic title="总销售额(元)" :value="562" />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import type {CmsArticle} from "~/api/cms/cmsArticle/model";

const i18n = useI18n();

const props = withDefaults(
  defineProps<{
    title?: string;
    desc?: string;
    buyUrl?: string;
    form?: CmsArticle;
    value?: number;
  }>(),
  {}
);

const emit = defineEmits<{
  (e: 'done', where: any): void
}>()

// 搜索表单
const where = reactive<any>({
  keywords: '',
  page: 1,
  limit: 20,
  status: 0,
  parentId: undefined,
  categoryId: undefined,
  lang: i18n.locale.value
});

const reload = () => {
  navigateTo(`/search/${where.keywords}`)
}
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500,
})
source.value = 1720
</script>
