<template>
  <div class="dashboard">
    <section class="hero">
      <div>
        <h1>库存管理系统</h1>
        <p>面向库区、产品、入库、出库和盘库的日常库存作业台。</p>
      </div>
      <el-button type="primary" icon="el-icon-mobile-phone" @click="$router.push('/mobile')">移动端入口</el-button>
    </section>

    <section class="summary-grid">
      <div class="summary-card">
        <span>库存品项</span>
        <strong>{{ summary.stockTotal }}</strong>
      </div>
      <div class="summary-card warning">
        <span>待入库</span>
        <strong>{{ summary.pendingIn }}</strong>
      </div>
      <div class="summary-card danger">
        <span>待盘库确认</span>
        <strong>{{ summary.pendingCheck }}</strong>
      </div>
      <div class="summary-card">
        <span>出库记录</span>
        <strong>{{ summary.outTotal }}</strong>
      </div>
    </section>

    <el-row :gutter="16">
      <el-col :xs="24" :lg="14">
        <el-card shadow="never">
          <div slot="header" class="card-header">
            <span>库存概览</span>
            <el-button type="text" @click="$router.push('/warehouse/stock')">查看全部</el-button>
          </div>
          <el-table :data="stockList" size="small" height="360">
            <el-table-column label="库区" prop="areaName" width="130" />
            <el-table-column label="产品信息" min-width="260">
              <template slot-scope="scope">
                <div class="product-name">{{ scope.row.productName || '-' }}</div>
                <div class="product-meta">{{ productMeta(scope.row) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存" prop="stockNum" align="right" width="120" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="10">
        <el-card shadow="never">
          <div slot="header" class="card-header">
            <span>待处理事项</span>
          </div>
          <div class="todo-list">
            <button @click="$router.push('/warehouse/inRecord')">
              <i class="el-icon-bottom-left"></i>
              <span>确认待入库记录</span>
              <strong>{{ summary.pendingIn }}</strong>
            </button>
            <button @click="$router.push('/warehouse/stockCheck')">
              <i class="el-icon-document-checked"></i>
              <span>审核盘库记录</span>
              <strong>{{ summary.pendingCheck }}</strong>
            </button>
            <button @click="$router.push('/warehouse/product')">
              <i class="el-icon-goods"></i>
              <span>维护产品资料</span>
              <strong>产品</strong>
            </button>
            <button @click="$router.push('/warehouse/area')">
              <i class="el-icon-office-building"></i>
              <span>维护库区资料</span>
              <strong>库区</strong>
            </button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listStock } from '@/api/warehouse/stock'
import { listInRecord } from '@/api/warehouse/inRecord'
import { listOutRecord } from '@/api/warehouse/outRecord'
import { listStockCheck } from '@/api/warehouse/stockCheck'

export default {
  name: 'Index',
  data() {
    return {
      summary: {
        stockTotal: 0,
        pendingIn: 0,
        pendingCheck: 0,
        outTotal: 0
      },
      stockList: []
    }
  },
  created() {
    this.loadDashboard()
  },
  methods: {
    loadDashboard() {
      listStock({ pageNum: 1, pageSize: 8 }).then(res => {
        this.stockList = res.rows || []
        this.summary.stockTotal = res.total || 0
      })
      listInRecord({ pageNum: 1, pageSize: 1, inStatus: 0 }).then(res => {
        this.summary.pendingIn = res.total || 0
      })
      listStockCheck({ pageNum: 1, pageSize: 1, checkStatus: 0 }).then(res => {
        this.summary.pendingCheck = res.total || 0
      })
      listOutRecord({ pageNum: 1, pageSize: 1 }).then(res => {
        this.summary.outTotal = res.total || 0
      })
    },
    productMeta(row) {
      return [row.brand && '品牌：' + row.brand, row.category && '类别：' + row.category, row.spec && '规格：' + row.spec, row.unit && '单位：' + row.unit].filter(Boolean).join('  ')
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  padding: 18px;
}
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
}
.hero h1 {
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  color: #1f2d3d;
}
.hero p {
  margin: 6px 0 0;
  color: #7a8794;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.summary-card {
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
}
.summary-card span {
  display: block;
  color: #7a8794;
}
.summary-card strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  color: #1f7aec;
}
.summary-card.warning strong {
  color: #e6a23c;
}
.summary-card.danger strong {
  color: #f56c6c;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.product-name {
  font-weight: 600;
  line-height: 20px;
}
.product-meta {
  color: #909399;
  line-height: 18px;
}
.todo-list {
  display: grid;
  gap: 10px;
}
.todo-list button {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
  background: #ffffff;
  color: #2f4056;
  text-align: left;
  cursor: pointer;
}
.todo-list i {
  color: #1f7aec;
  font-size: 20px;
}
.todo-list strong {
  color: #1f7aec;
}
@media (max-width: 900px) {
  .hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>
