<template>
  <ConfigPageBase
    section="location"
    title="库位管理"
    description="出入库、库存、库位可视化（LocationManagement）"
    :defaults="DEFAULT_LOCATION">
    <template #default="{ payload }">
      <el-tabs model-value="locs">
        <el-tab-pane name="locs" label="库位">
          <el-table :data="payload.locations" size="small" border>
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="编码" prop="code" width="120" />
            <el-table-column label="名称" prop="name" />
            <el-table-column label="站点" prop="siteId" width="100" />
            <el-table-column label="容量" prop="capacity" width="100" />
            <el-table-column label="占用">
              <template #default="s">
                <el-progress :percentage="Math.round((s.row.occupied / s.row.capacity) * 100)" :stroke-width="10" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="rules" label="库存规则">
          <el-table :data="payload.inventoryRules" size="small" border>
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="物料类型" prop="itemType" />
            <el-table-column label="下限" prop="minQty" width="100" />
            <el-table-column label="上限" prop="maxQty" width="100" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ConfigPageBase>
</template>

<script setup lang="ts">
import ConfigPageBase from '@/components/ConfigPageBase.vue'
import { DEFAULT_LOCATION } from '@/mock/data/configs'
</script>
