<template>
  <view class="page">
    <view class="header"><text class="title">服务执行</text><text class="sub">逐项记录完成情况与证据</text></view>
    <view v-for="(item, i) in items" :key="i" class="item-card">
      <view class="item-header">
        <text class="item-name">{{ item.item_name }}</text>
        <text :class="['status', item.status === 'COMPLETED' ? 'done' : item.status === 'PENDING' ? 'pending' : '']">
          {{ item.status === 'COMPLETED' ? '✓ 已完成' : item.status === 'SKIPPED' ? '已跳过' : '待执行' }}
        </text>
      </view>
      <view v-if="item.evidence_required" class="tag">需拍照留证</view>
      <view v-if="item.status !== 'COMPLETED'" class="actions">
        <button @click="recordItem(item, 'COMPLETED')" class="btn-sm done-btn">标记完成</button>
        <button @click="recordItem(item, 'SKIPPED')" class="btn-sm skip-btn">跳过</button>
      </view>
      <view v-if="item.photoPath" class="evidence">
        <image :src="item.photoPath" class="ev-photo" mode="aspectFill" />
      </view>
    </view>
    <view v-if="allDone" class="tip"><text>所有项目已完成，可前往签退</text></view>
  </view>
</template>

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

export default {
  data() { return { workOrderId: 0, items: [] }; },
  computed: {
    allDone() { return this.items.length > 0 && this.items.every(i => i.status === 'COMPLETED' || i.status === 'SKIPPED'); }
  },
  async onLoad(options) {
    this.workOrderId = parseInt(options.id) || 0;
    try {
      const res = await apiGet('/delivery/work-orders/' + this.workOrderId + '/detail');
      if (res.data.code === 200) {
        this.items = (res.data.data.items || []).map(i => ({ ...i, photoPath: '' }));
      }
    } catch(e) { uni.showToast({ title: '加载失败', icon: 'none' }); }
  },
  methods: {
    async recordItem(item, status) {
      if (item.evidence_required && status === 'COMPLETED') {
        try {
          const img = await chooseImage(1);
          uni.showLoading({ title: '上传证据' });
          const ev = await uploadEvidence(img.tempFilePaths[0], 'execution', this.workOrderId);
          item.photoPath = img.tempFilePaths[0];
          uni.hideLoading();
        } catch(e) { uni.hideLoading(); uni.showToast({ title: '请拍照留证', icon: 'none' }); return; }
      }
      item.status = status;
      // 持久化到后端
      try {
        await apiPost('/work-orders/' + this.workOrderId + '/execution-records', { planItemId: item.id, status, notes: '' });
      } catch(e) { try { const { OfflineQueue } = require('@/common/offline.js'); new OfflineQueue().add({ path: '/work-orders/' + this.workOrderId + '/execution-records', data: { planItemId: item.id, status, notes: '' } }); } catch(_) {} }

      uni.showToast({ title: status === 'COMPLETED' ? '已标记完成' : '已跳过', icon: 'success' });
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.header { margin-bottom: 24rpx; } .title { font-size: 36rpx; font-weight: 700; display: block; } .sub { font-size: 26rpx; color: #999; }
.item-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
.item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
.item-name { font-size: 30rpx; font-weight: 600; }
.status { font-size: 24rpx; padding: 4rpx 12rpx; border-radius: 8rpx; }
.status.done { background: #E6F9F5; color: #18A999; }
.status.pending { background: #FFF3E0; color: #FF8A3D; }
.tag { font-size: 22rpx; color: #FF8A3D; background: #FFF3E0; display: inline-block; padding: 4rpx 12rpx; border-radius: 4rpx; margin-bottom: 12rpx; }
.actions { display: flex; gap: 16rpx; }
.btn-sm { flex: 1; padding: 16rpx; border-radius: 10rpx; font-size: 26rpx; }
.done-btn { background: #E6F9F5; color: #18A999; border: 1px solid #18A999; }
.skip-btn { background: #F5F5F5; color: #999; border: 1px solid #ddd; }
.ev-photo { width: 200rpx; height: 200rpx; border-radius: 12rpx; margin-top: 12rpx; }
.tip { text-align: center; padding: 32rpx; color: #18A999; font-size: 28rpx; }
</style>
