<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { createReusableTemplate } from '@vueuse/core';
import { $t } from '@/locales';
import { NCard } from 'naive-ui';
// // api_pointsCount api_taskCount
import { api_pointsCount, api_taskCount } from '@/api/index.ts'

defineOptions({
  name: 'CardData'
});

interface CardData {
  key: string;
  title: string;
  value: number;
  unit: string;
  color: {
    start: string;
    end: string;
  };
  icon: string;
}

const cardData = ref([
  {
    key: 'visitCount',
    title: "在线数量",
    value: 0,
    unit: '',
    color: {
      start: '#ec4786',
      end: '#b955a4'
    },
    icon: 'ant-design:bar-chart-outlined'
  },
  {
    key: 'turnover',
    title: `离线数量`,
    value: 0,
    color: {
      start: '#865ec0',
      end: '#5144b4'
    },
    icon: 'ant-design:bar-chart-outlined'
  }
]);

const form = ref([]);

const getCardData = async () => {

  await api_pointsCount().then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(item => {
        form.value.push(item.count)
      })
    };
  })

  await api_taskCount().then(res => {
    if (res.data.code === 200) {
      res.data.data.forEach(item => {
        form.value.push(item.count)
      })

      setTimeout(() => {
        cardData.value = [
          {
            key: 'visitCount',
            title: "在线数量",
            value: Number(form.value[0]),
            unit: '',
            color: {
              start: '#ec4786',
              end: '#b955a4'
            },
            icon: 'ant-design:bar-chart-outlined'
          },
          {
            key: 'turnover',
            title: `离线数量`,
            value: Number(form.value[1]),
            color: {
              start: '#865ec0',
              end: '#5144b4'
            },
            icon: 'ant-design:bar-chart-outlined'
          },
          // {
          //   key: 'downloadCount',
          //   title: '任务启动数量',
          //   value: Number(form.value[2]),
          //   unit: '',
          //   color: {
          //     start: '#56cdf3',
          //     end: '#719de3'
          //   },
          //   icon: 'ant-design:bar-chart-outlined'
          // },
          // {
          //   key: 'dealCount',
          //   title: '任务停用数量',
          //   value: Number(form.value[3]),
          //   unit: '',
          //   color: {
          //     start: '#fcbc25',
          //     end: '#f68057'
          //   },
          //   icon: 'ant-design:bar-chart-outlined'
          // }
        ]
      });
    };
  });
}

interface GradientBgProps {
  gradientColor: string;
}

const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();

function getGradientColor(color: CardData['color']) {
  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
};


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

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <DefineGradientBg v-slot="{ $slots, gradientColor }">
      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
        <component :is="$slots.default" />
      </div>
    </DefineGradientBg>

    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
      <NGi v-for="item in cardData" :key="item.key">
        <GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
          <h3 class="text-16px">{{ item.title }}</h3>
          <div class="flex justify-between pt-12px">
            <SvgIcon :icon="item.icon" class="text-32px" />
            <CountTo :prefix="item.unit" :start-value="0" :end-value="item.value"
              class="text-30px text-white dark:text-dark" />
          </div>
        </GradientBg>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
