<template>
  <a-card :bordered="false">
    <a-grid :cols="24" :col-gap="12" :row-gap="12">
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="总商机数"
          quota="visitors"
          chart-type="line"
          suffix="个"
          :value="23"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        >
        </ChainItem>
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="商机总额"
          suffix="万元"
          quota="published"
          chart-type="bar"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="A类"
          suffix="个"
          quota="comment"
          chart-type="line"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="A类金额"
          quota="share"
          suffix="万元"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="B类"
          quota="share"
          suffix="个"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
        <ChainItem
          title="B类金额"
          quota="share"
          suffix="万元"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(rgb(80 144 254 / 75%) 0%, rgb(80 144 254 / 78%) 100%)'
              : 'linear-gradient(rgb(80 144 254 / 5%) 0%, rgb(80 144 254 / 8%) 100%)'
          }"
        />
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script lang="ts" setup>
import useThemes from '@/hooks/themes'
import ChainItem from './chain-item.vue'

const { isDark } = useThemes()
</script>
