<template>
  <a-card :bordered="false">
    <a-grid :cols="24" :col-gap="12" :row-gap="12">
      <a-grid-item
        v-for="item in statList"
        :key="item.name"
        :span="{
          xs: 12,
          sm: 12,
          md: Math.round(24 / statList.length),
          lg: Math.round(24 / statList.length),
          xl: Math.round(24 / statList.length),
          xxl: Math.round(24 / statList.length)
        }"
      >
        <ChainItem
          :title="item.name"
          :suffix="item.unit"
          :color="item.color"
          :value="item.value"
          :card-style="{
            background: isDark ? getBackground().dark : getBackground().light
            // ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
            // : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)'
          }"
        />
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script lang="ts" setup>
import useThemes from '@/hooks/themes'
import { onMounted, ref } from 'vue'
import { StatList } from '@/types/work'
import { getWorkDoneStat } from '@/api/project/work'
import ChainItem from '../../components/chain-item.vue'

const getBackground = () => {
  return {
    dark: 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)',
    light: 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
  }
}
const { isDark } = useThemes()
const statList = ref<StatList[]>([])
onMounted(async () => {
  const { list } = await getWorkDoneStat()
  statList.value = list
})
</script>
