<template>
  <view class="page">
    <view class="card"><text class="title">工单 #{{ workOrderId }}</text><text class="info">请在确认接单前查看服务详情</text></view>
    <view class="actions">
      <button @click="doAccept" :loading="loading" class="btn-accept">确认接单</button>
      <button @click="showReject = true" class="btn-reject">拒单</button>
    </view>
    <view v-if="showReject" class="card">
      <text class="label">拒单原因</text>
      <textarea v-model="reason" placeholder="请填写拒单原因" class="textarea" />
      <button @click="doReject" :loading="loading" class="btn-reject">确认拒单</button>
    </view>
  </view>
</template>

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

export default {
  data() { return { workOrderId: 0, loading: false, showReject: false, reason: '' }; },
  onLoad(options) { this.workOrderId = parseInt(options.id) || 0; },
  methods: {
    async doAccept() {
      this.loading = true;
      try {
        const res = await apiPost('/work-orders/' + this.workOrderId + '/accept');
        if (res.data.code === 200) { uni.showToast({ title: '接单成功' }); setTimeout(() => uni.navigateBack(), 800); }
        else { uni.showToast({ title: res.data.message, icon: 'none' }); }
      } catch(e) { uni.showToast({ title: '网络错误', icon: 'none' }); }
      this.loading = false;
    },
    async doReject() {
      if (!this.reason.trim()) { uni.showToast({ title: '请填写拒单原因', icon: 'none' }); return; }
      this.loading = true;
      try {
        const res = await apiPost('/work-orders/' + this.workOrderId + '/reject', { reason: this.reason });
        if (res.data.code === 200) { uni.showToast({ title: '已拒单' }); setTimeout(() => uni.navigateBack(), 800); }
        else { uni.showToast({ title: res.data.message, icon: 'none' }); }
      } catch(e) { uni.showToast({ title: '网络错误', icon: 'none' }); }
      this.loading = false;
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.card { background: #fff; border-radius: 16rpx; padding: 32rpx; margin-bottom: 20rpx; }
.title { font-size: 34rpx; font-weight: 700; display: block; margin-bottom: 8rpx; }
.info { font-size: 26rpx; color: #999; }
.actions { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.btn-accept { flex: 1; background: #155EEF; color: #fff; border-radius: 12rpx; padding: 24rpx; font-size: 30rpx; font-weight: 600; }
.btn-reject { flex: 1; background: #fff; color: #FF4D4F; border: 1px solid #FF4D4F; border-radius: 12rpx; padding: 24rpx; font-size: 30rpx; }
.label { font-size: 26rpx; color: #666; display: block; margin-bottom: 12rpx; }
.textarea { width: 100%; height: 150rpx; border: 1px solid #ddd; border-radius: 12rpx; padding: 16rpx; font-size: 28rpx; }
</style>
