<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        v-for="(item, index) in statisticsCards"
        :key="index"
        class="mb15"
      >
        <el-card shadow="hover" class="home-card-item">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-3xl font-bold">{{ item.value }}</div>
              <div class="mt-2 text-gray-500">{{ item.label }}</div>
            </div>
            <div
              class="w-12 h-12 rounded-full flex items-center justify-center"
              :style="{ backgroundColor: item.bgColor }"
            >
              <IconifyIconOnline
                :icon="item.icon"
                class="text-2xl"
                :style="{ color: item.iconColor }"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-lg font-medium">欢迎使用 Yeswash 管理后台</span>
            </div>
          </template>
          <div class="text-center py-10">
            <IconifyIconOnline
              icon="ep:data-analysis"
              class="text-6xl text-primary mb-4"
            />
            <div class="text-xl text-gray-600">
              管理系统已成功迁移至 超级进化 v6.3.0
            </div>
            <div class="text-gray-400 mt-2">
              后续将逐步迁移各业务模块
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Home">
import { ref, onMounted } from "vue";

defineOptions({
  name: "Home"
});

const statisticsCards = ref([
  {
    label: "今日订单",
    value: "0",
    icon: "ep:shopping-cart",
    bgColor: "#e6f7ff",
    iconColor: "#1890ff"
  },
  {
    label: "今日收益",
    value: "¥0",
    icon: "ep:money",
    bgColor: "#f6ffed",
    iconColor: "#52c41a"
  },
  {
    label: "站点数量",
    value: "0",
    icon: "ep:office-building",
    bgColor: "#fff7e6",
    iconColor: "#fa8c16"
  },
  {
    label: "用户数量",
    value: "0",
    icon: "ep:user",
    bgColor: "#fff0f6",
    iconColor: "#eb2f96"
  }
]);

onMounted(() => {
  // TODO: 加载统计数据
});
</script>

<style scoped lang="scss">
.home-container {
  .home-card-item {
    transition: all 0.3s;
    &:hover {
      transform: translateY(-3px);
    }
  }
}
</style>
