<script setup>
defineProps({ orders: { type: Array, default: () => [] }, readonly: Boolean, actionLabel: Function });
defineEmits(["open", "action"]);
</script>

<template>
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr><th>序号</th><th>12398工单编号</th><th>工单环节</th><th>信息来源</th><th>客户致电12398日期</th><th>转办日期</th><th>客户名称</th><th>联系方式</th><th>用户地址</th><th v-if="!readonly">操作</th></tr></thead>
      <tbody>
        <tr v-for="(order,index) in orders" :key="order.id"><td>{{ index + 1 }}</td><td><button class="link-button" @click="$emit('open',order)">{{ order.no }}</button></td><td><span class="status" :class="order.stage === '已办结' ? 'done' : order.stage.includes('待') || order.stage.includes('分派') ? 'pending' : 'progress'">{{ order.stage }}</span></td><td>{{ order.source }}</td><td>{{ order.calledAt }}</td><td>{{ order.transferredAt }}</td><td>{{ order.customerName }}</td><td>{{ order.phone }}</td><td class="address">{{ order.address }}</td><td v-if="!readonly"><button class="action-button" @click="$emit('action',order)">{{ actionLabel ? actionLabel(order) : '处理' }}</button></td></tr>
        <tr v-if="!orders.length"><td :colspan="readonly ? 9 : 10" class="empty-cell">暂无符合条件的工单</td></tr>
      </tbody>
    </table>
    <div class="pagination"><span>共 {{ orders.length }} 条</span><button disabled>‹</button><button class="active">1</button><button>2</button><button>›</button></div>
  </div>
</template>
