<template>
  <a-grid :cols="24" :row-gap="16" class="panel">
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-statistic
          title="总量"
          :value="props.totalCount"
          :precision="2"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">次</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-statistic
          title="总金额"
          :value="props.totalAmount"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">元</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-statistic
          title="今日总量"
          :value="props.todayCount"
          :precision="2"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">元</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
      style="border-right: none"
    >
      <a-space>
        <a-statistic
          title="今日总金额"
          :value="props.todayAmount"
          :precision="2"
          :value-from="0"
          animation
        >
          <template #suffix>
            <span class="unit">元</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script lang="ts" setup>
const props = defineProps<{
  totalAmount: number;
  totalCount: number;
  todayCount: number;
  todayAmount: number;
}>();
</script>

<style lang="less" scoped>
.arco-grid.panel {
  padding: 16px 20px 0;
  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;
  font-size: 12px;
  color: rgb(var(--gray-8));
}

:deep(.panel-border) {
  margin: 4px 0 0;
}
</style>
