<script setup lang="ts">
import {reactive} from "vue";

defineOptions({
  name: "Welcome"
});

const data = reactive({
  today: {
    // 数量
    quantity: {
      total: 0,
      valid: 0
    },
    // 金额
    amount: {
      total: 0,
      valid: 0
    },
    // 盈利
    earnings: {
      total: 0,
      valid: 0
    }
  },
  yesterday: {
    // 数量
    quantity: {
      total: 0,
      valid: 0
    },
    // 金额
    amount: {
      total: 0,
      valid: 0
    },
    // 盈利
    earnings: {
      total: 0,
      valid: 0
    }
  },
  lastWeek: {
    // 数量
    quantity: {
      total: 0,
      valid: 0
    },
    // 金额
    amount: {
      total: 0,
      valid: 0
    },
    // 盈利
    earnings: {
      total: 0,
      valid: 0
    }
  },
  lastMonth: {
    // 数量
    quantity: {
      total: 0,
      valid: 0
    },
    // 金额
    amount: {
      total: 0,
      valid: 0
    },
    // 盈利
    earnings: {
      total: 0,
      valid: 0
    }
  }
});

</script>

<template>
  <el-space direction="vertical">
    <el-space class="my-4" wrap>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>今日笔数</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.quantity.valid }}</span>
                / {{ data.today.quantity.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>今日金额</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.amount.valid }}</span> /
                {{ data.today.amount.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>今日利润</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.earnings.valid }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <el-space class="my-4" wrap>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>昨日笔数</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.yesterday.quantity.valid
                }}</span> / {{ data.yesterday.quantity.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>昨日金额</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.yesterday.amount.valid
                }}</span> / {{ data.yesterday.amount.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>昨日利润</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.yesterday.earnings.valid
                }}</span></div>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <el-space class="my-4" wrap>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本周笔数</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.lastWeek.quantity.valid
                }}</span> / {{ data.lastWeek.quantity.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本周金额</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.lastWeek.amount.valid }}</span>
                / {{ data.lastWeek.amount.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本周利润</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.lastWeek.earnings.valid
                }}</span></div>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
    <el-space class="my-4" wrap>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本月笔数</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.lastMonth.quantity.valid
                }}</span> / {{ data.lastMonth.quantity.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本月金额</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.lastMonth.amount.valid
                }}</span> / {{ data.lastMonth.amount.total }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 350px; border-radius: 8px" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>本月利润</span>
          </div>
        </template>
        <div class="ep-bg-purple">
          <div class="text">
            <div class="text-center h-[40px]">
              <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
                  data.lastMonth.earnings.valid
                }}</span></div>
            </div>
          </div>
        </div>
      </el-card>
    </el-space>
  </el-space>
</template>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 130px;
}

.ep-bg-purple {
  background: #fff;
}
</style>
