<template>
  <view class="page">
    <view v-if="loading" class="loading">加载中...</view>
    <block v-else>
      <view class="card"><text class="card-title">服务对象</text><text class="name">{{ detail.patient_name || '-' }}</text><text class="addr">{{ detail.patient_address || '-' }}</text></view>
      <view class="card"><text class="card-title">服务时间</text><text>{{ detail.time_window_start }} - {{ detail.time_window_end }}</text></view>
      <view class="card"><text class="card-title">风险等级</text><text>{{ detail.risk_level || '低' }}</text></view>
      <view class="card"><text class="card-title">服务项目</text>
        <view v-for="item in detail.items" :key="item.id" class="item"><text>{{ item.item_name }}</text><text class="req">{{ item.required ? '必做' : '选做' }}</text></view>
      </view>
      <view class="actions">
        <button v-if="detail.status === 'ORDER_ASSIGNED'" @click="navTo('/pages/delivery/accept/accept?id=' + detail.id)" class="btn">接单</button>
        <button v-if="detail.status === 'ORDER_ACCEPTED'" @click="navTo('/pages/delivery/checkin/checkin?id=' + detail.id)" class="btn">GPS签到</button>
        <button v-if="detail.status === 'ORDER_CHECKED_IN'" @click="doStart" class="btn">开始服务</button>
        <button v-if="detail.status === 'ORDER_IN_SERVICE'" @click="navTo('/pages/delivery/execute/execute?id=' + detail.id)" class="btn">服务执行</button>
        <button v-if="detail.status === 'ORDER_IN_SERVICE'" @click="navTo('/pages/delivery/exception/exception?id=' + detail.id)" class="btn-outline">上报异常</button>
        <button v-if="detail.status === 'ORDER_IN_SERVICE'" @click="navTo('/pages/delivery/finish/finish?id=' + detail.id)" class="btn">签退完成</button>
      </view>
    </block>
  </view>
</template>

<script>
import { apiGet, apiPost } from '@/common/api.js';
export default {
  data() { return { detail: {}, loading: true }; },
  async onLoad(options) {
    const id = parseInt(options.id) || 0;
    try { const res = await apiGet('/delivery/work-orders/' + id + '/detail'); this.detail = res.data?.data || {}; }
    catch(e) { uni.showToast({ title: '加载失败', icon: 'none' }); }
    this.loading = false;
  },
  methods: {
    navTo(url) { uni.navigateTo({ url }); },
    async doStart() {
      try {
        const res = await apiPost('/work-orders/' + this.detail.id + '/start-service');
        if (res.data.code === 200) { uni.showToast({ title: '已开始服务' }); this.detail.status = 'ORDER_IN_SERVICE'; }
      } catch(e) { uni.showToast({ title: '网络错误', icon: 'none' }); }
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
.card-title { font-size: 24rpx; color: #999; display: block; margin-bottom: 8rpx; }
.name { font-size: 32rpx; font-weight: 700; display: block; }
.addr { font-size: 26rpx; color: #666; margin-top: 4rpx; }
.item { display: flex; justify-content: space-between; padding: 12rpx 0; border-bottom: 1px solid #f0f0f0; }
.req { font-size: 22rpx; color: #FF8A3D; background: #FFF3E0; padding: 2rpx 10rpx; border-radius: 4rpx; }
.actions { display: flex; flex-direction: column; gap: 16rpx; margin-top: 24rpx; }
.btn { background: #155EEF; color: #fff; border-radius: 12rpx; padding: 24rpx; font-size: 30rpx; font-weight: 600; text-align: center; }
.btn-outline { background: #fff; color: #FF4D4F; border: 1px solid #FF4D4F; border-radius: 12rpx; padding: 24rpx; font-size: 30rpx; text-align: center; }
.loading { text-align: center; padding: 100rpx; color: #999; }
</style>
