<script setup>
import { Location, Search, Sort } from '@element-plus/icons-vue'
import { getRiskClass, orderRows } from '../../data/showcaseData'
import DemoBlock from '../docs/DemoBlock.vue'

defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
})

defineEmits(['update:currentPage'])

const tableCode = `<el-table :data="orderRows" class="erp-table" stripe>
  <el-table-column fixed prop="orderId" label="单据号" width="126" />
  <el-table-column prop="customer" label="客户 / 对象" min-width="180" />
  <el-table-column prop="status" label="状态" width="120">
    <template #default="{ row }">
      <el-tag :type="row.statusType" effect="light">{{ row.status }}</el-tag>
    </template>
  </el-table-column>
  <el-table-column prop="amount" label="金额" width="140" align="right" />
  <el-table-column fixed="right" label="操作" width="152" />
</el-table>`
</script>

<template>
  <DemoBlock
    :code="tableCode"
    description="ERP 表格优先保证扫描效率、状态清晰、数字右对齐和固定操作列。"
    eyebrow="Data Table"
    title="订单工作台表格"
  >
    <div class="section-heading">
      <div class="table-tools">
        <el-input class="table-search" placeholder="搜索订单、客户、负责人" :prefix-icon="Search" />
        <el-button :icon="Sort">列设置</el-button>
      </div>
    </div>

    <el-table :data="orderRows" class="erp-table" stripe>
      <el-table-column fixed prop="orderId" label="单据号" width="126" />
      <el-table-column prop="customer" label="客户 / 对象" min-width="180" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.statusType" effect="light">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="140" align="right" />
      <el-table-column prop="warehouse" label="业务地点" min-width="150">
        <template #default="{ row }">
          <span class="icon-cell">
            <el-icon><Location /></el-icon>
            {{ row.warehouse }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="负责人" width="130" />
      <el-table-column prop="due" label="计划日期" width="124" />
      <el-table-column prop="risk" label="风险" width="90">
        <template #default="{ row }">
          <span :class="['risk-dot', getRiskClass(row.risk)]">{{ row.risk }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="152">
        <template #default>
          <el-button link type="primary">查看</el-button>
          <el-button link>流转</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-footer">
      <span>共 4 条样例数据，后续接 OFBiz 真实实体。</span>
      <el-pagination
        :current-page="currentPage"
        layout="prev, pager, next, sizes"
        :page-size="20"
        :page-sizes="[20, 50, 100]"
        :total="128"
        @update:current-page="$emit('update:currentPage', $event)"
      />
    </div>
  </DemoBlock>
</template>
