<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Plus, Van, Box, EditPen } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import request from '@/api/request'

const router = useRouter()

const loading = ref(true)
const stats = ref({
  orders_count: 0,
  pending_shipping: 0,
  warning_skus: 0,
  monthly_revenue: 0,
})

const fetchStats = async () => {
  loading.value = true
  try {
    const data: any = await request.get('/api/dashboard/stats')
    if (data) Object.assign(stats.value, data)
  } catch {}
  finally { loading.value = false }
}

const formatMoney = (v: number) => v >= 10000 ? `${(v / 10000).toFixed(1)}万` : `¥${v.toLocaleString()}`

onMounted(fetchStats)
</script>

<template>
  <div class="dashboard-container">
    <!-- 顶部快捷操作 -->
    <div class="quick-actions">
      <el-button type="primary" :icon="Plus" @click="router.push('/orders')">新建订单</el-button>
      <el-button type="success" :icon="Van" @click="router.push('/shipping')">安排发货</el-button>
      <el-button type="warning" :icon="Box" @click="router.push('/products')">库存入库</el-button>
      <el-button type="info" :icon="EditPen" @click="router.push('/logs')">写销售日志</el-button>
    </div>

    <!-- 中部核心数据 KPI -->
    <el-row :gutter="20" class="kpi-cards">
      <el-col :span="6">
        <el-card shadow="hover" class="kpi-card" v-loading="loading">
          <div class="kpi-title">本月新增订单</div>
          <div class="kpi-value">{{ stats.orders_count }} <span class="kpi-unit">单</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="kpi-card" v-loading="loading">
          <div class="kpi-title">待出库发货</div>
          <div class="kpi-value" style="color: #e6a23c;">{{ stats.pending_shipping }} <span class="kpi-unit">单</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="kpi-card" v-loading="loading">
          <div class="kpi-title">库存预警 SKU</div>
          <div class="kpi-value" style="color: #f56c6c;">{{ stats.warning_skus }} <span class="kpi-unit">个</span></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="kpi-card" v-loading="loading">
          <div class="kpi-title">本月预计营收</div>
          <div class="kpi-value" style="color: #67c23a;">{{ formatMoney(stats.monthly_revenue) }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部最新动态 -->
    <el-card shadow="never" class="recent-activities">
      <template #header>
        <div class="card-header">
          <span>近期业务动态</span>
        </div>
      </template>
      <el-empty description="暂无业务动态数据，请先录入订单和日志" />
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quick-actions {
  display: flex;
  gap: 12px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.kpi-cards .el-col {
  margin-bottom: 20px;
}

.kpi-card {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  border: none;
}

.kpi-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.kpi-unit {
  font-size: 14px;
  font-weight: normal;
  color: #606266;
}

.recent-activities {
  border-radius: 8px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}
</style>
