<template>
  <view class="page">
    <text class="title">异常上报</text>
    <view class="types">
      <view v-for="t in exceptionTypes" :key="t.value" @click="selected = t.value"
        :class="['type-item', selected === t.value ? 'active' : '']">{{ t.label }}</view>
    </view>
    <textarea v-model="desc" placeholder="请描述异常情况" class="textarea" />
    <button @click="submit" :loading="submitting" :disabled="!selected" class="btn">提交异常</button>
  </view>
</template>

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

const exceptionTypes = [
  { value: 'PATIENT_ABSENT', label: '对象不在家' }, { value: 'PATIENT_REFUSE', label: '对象拒绝服务' },
  { value: 'WRONG_ADDRESS', label: '地址错误' }, { value: 'CANNOT_CONTACT', label: '无法联系' },
  { value: 'CONDITION_NOT_READY', label: '服务条件不具备' }, { value: 'HEALTH_EMERGENCY', label: '身体突发异常' },
];

export default {
  data() { return { workOrderId: 0, selected: '', desc: '', submitting: false, exceptionTypes }; },
  onLoad(options) { this.workOrderId = parseInt(options.id) || 0; },
  methods: {
    async submit() {
      this.submitting = true;
      try {
        const res = await apiPost('/work-orders/' + this.workOrderId + '/report-exception', { exceptionType: this.selected, description: this.desc });
        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.submitting = false;
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.title { font-size: 36rpx; font-weight: 700; display: block; margin-bottom: 24rpx; }
.types { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 24rpx; }
.type-item { padding: 20rpx 28rpx; border-radius: 12rpx; background: #fff; border: 1px solid #ddd; font-size: 28rpx; }
.type-item.active { background: #FF4D4F; color: #fff; border-color: #FF4D4F; }
.textarea { width: 100%; height: 200rpx; border: 1px solid #ddd; border-radius: 12rpx; padding: 16rpx; font-size: 28rpx; margin-bottom: 24rpx; background: #fff; }
.btn { background: #FF4D4F; color: #fff; border-radius: 12rpx; padding: 24rpx; font-size: 32rpx; font-weight: 600; }
.btn[disabled] { opacity: 0.4; }
</style>
