<template>
  <a-card :bordered="false">
    <a-grid :cols="24" :col-gap="12" :row-gap="12">
      <a-grid-item
        v-for="(item, index) 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"
          chart-type="line"
          :value="item.value"
          :card-style="{
            background: isDark
              ? getBackground(index).dark
              : getBackground(index).light
          }"
        />
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

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

const color = [
  {
    dark: 'linear-gradient(180deg, rgb(79 97 123) 0%, rgb(145 151 159) 100%)',
    light: 'linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%)'
  },
  {
    dark: 'linear-gradient(rgb(89 114 170 / 85%) 0%, rgb(89 114 170 / 98%) 100%)',
    light:
      'linear-gradient(rgb(51 106 228 / 10%) 0%, rgb(51 106 228 / 20%) 100%)'
  },
  {
    dark: 'linear-gradient(rgb(202 175 108 / 75%) 0%, rgb(202 175 108 / 78%) 100%)',
    light:
      'linear-gradient(rgb(202 175 108 / 16%) 0%, rgb(202 175 108 / 18%) 100%)'
  },
  {
    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 getBackground = (index: number) => {
  return color.length >= index
    ? color[index]
    : {
        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 getCustomerStat()
  statList.value = list
})
</script>
