<template>
  <div class="w-full mx-auto">
    <a-row :gutter="20" :row-gap="16" class="pb-2 pl-0 pr-0" v-for="(item, index) in data" :key="index">
      <a-col :span="6">
        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
          <div class="flex justify-between items-center">
            <span>{{ item.name }}</span>
            <a-tag color="blue">今天</a-tag>
          </div>
          <a-statistic :value="item.tday | 0" :value-from="0" animation show-group-separator />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
          <div class="flex justify-between items-center">
            <span>{{ item.name }}</span>
            <a-tag color="black">昨天</a-tag>
          </div>
          <a-statistic :value="item.lday | 0" :value-from="0" animation show-group-separator />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
          <div class="flex justify-between items-center">
            <span>{{ item.name }}</span>
            <a-tag color="orange">本月</a-tag>
          </div>
          <a-statistic :value="item.tmon | 0" :value-from="0" animation show-group-separator />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
          <div class="flex justify-between items-center">
            <span>{{ item.name }}</span>
            <a-tag color="green">上月</a-tag>
          </div>
          <a-statistic :value="item.lmon | 0" :value-from="0" animation show-group-separator />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import welcome from '@/views/v1/api/welcome'

const data = ref({
  user: 0,
  attach: 0,
  login: 0,
  operate: 0,
})

const getWelcomeData = async () => {
  const res = await welcome.indexApi()
  data.value = res.data.data
}

onMounted(() => {
  getWelcomeData()
})
</script>

<style scoped lang="less">
.arco-grid.panel {
  margin-bottom: 0;
}
.panel-col {
  padding-left: 43px;
  border-right: 1px solid rgb(var(--gray-2));
}
.col-avatar {
  margin-right: 12px;
  background-color: var(--color-fill-2);
}
.up-icon {
  color: rgb(var(--red-6));
}
.unit {
  margin-left: 8px;
  color: rgb(var(--gray-8));
  font-size: 12px;
}
:deep(.panel-border) {
  margin: 4px 0 0 0;
}
</style>
