<template>
  <view class="page">
    <view class="tabs">
      <view v-for="t in tabs" :key="t.key" @click="activeTab = t.key"
        :class="['tab', activeTab === t.key ? 'active' : '']">{{ t.label }}</view>
    </view>
    <view v-if="loading" class="loading">加载中...</view>
    <view v-for="o in filteredOrders" :key="o.id" class="order-card" @click="navToDetail(o.id)">
      <view class="top"><text class="name">{{ o.patient_name || '服务对象' }}</text><text :class="['status', statusCls(o.status)]">{{ statusMap[o.status] || o.status }}</text></view>
      <text class="time">{{ o.time_window_start }} - {{ o.time_window_end }}</text>
    </view>
    <view v-if="!loading && filteredOrders.length === 0" class="empty">暂无工单</view>
  </view>
</template>

<script>
import { apiGet } from '@/common/api.js';

const statusMap = { ORDER_CREATED:'待派单', ORDER_ASSIGNED:'待接单', ORDER_ACCEPTED:'待签到', ORDER_CHECKED_IN:'待服务', ORDER_IN_SERVICE:'服务中', ORDER_COMPLETED:'已完成', ORDER_EXCEPTION:'异常', ACCEPTED:'已验收' };
const tabs = [
  { key:'all', label:'全部' }, { key:'ORDER_ASSIGNED', label:'待接单' }, { key:'ORDER_ACCEPTED', label:'待签到' },
  { key:'ORDER_IN_SERVICE', label:'服务中' }, { key:'ORDER_COMPLETED', label:'已完成' },
];

export default {
  data() { return { orders: [], loading: true, activeTab: 'all', statusMap, tabs }; },
  computed: {
    filteredOrders() { return this.activeTab === 'all' ? this.orders : this.orders.filter(o => o.status === this.activeTab); }
  },
  async onShow() { this.loading = true; try { const res = await apiGet('/delivery/work-orders/today'); this.orders = res.data?.data || []; } catch(e) {} this.loading = false; },
  methods: {
    statusCls(s) { return s === 'ORDER_EXCEPTION' ? 'red' : s === 'ORDER_COMPLETED' || s === 'ACCEPTED' ? 'green' : ''; },
    navToDetail(id) { uni.navigateTo({ url: '/pages/delivery/order-detail/order-detail?id=' + id }); }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.tabs { display: flex; gap: 8rpx; margin-bottom: 20rpx; overflow-x: auto; white-space: nowrap; }
.tab { padding: 12rpx 24rpx; border-radius: 20rpx; font-size: 24rpx; background: #fff; border: 1px solid #ddd; }
.tab.active { background: #155EEF; color: #fff; border-color: #155EEF; }
.order-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
.top { display: flex; justify-content: space-between; margin-bottom: 8rpx; }
.name { font-size: 30rpx; font-weight: 600; }
.status { font-size: 24rpx; } .status.green { color: #18A999; } .status.red { color: #FF4D4F; }
.time { font-size: 24rpx; color: #999; }
.empty, .loading { text-align: center; padding: 80rpx; color: #999; }
</style>
