<script setup lang="ts">
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminTaskDetail } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'

import type { ManualDispatchForm } from '../composables/types'

interface Props {
  detail: AdminTaskDetail
  form: ManualDispatchForm
  canManageTaskLifecycle: boolean
  actionLoading: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:form': [form: ManualDispatchForm]
  submit: [outcome: 'delivered' | 'failed']
}>()

function updateField(field: keyof ManualDispatchForm, value: string) {
  emit('update:form', { ...props.form, [field]: value })
}
</script>

<template>
  <section class="info-card">
    <h3>人工履约回写</h3>
    <div class="manual-grid">
      <label class="field-block">
        <span>外部流水 / 单号</span>
        <el-input
          :model-value="form.deliveryReference"
          :disabled="!canManageTaskLifecycle"
          maxlength="120"
          placeholder="例如快递单号、平台消息回执号"
          @update:model-value="updateField('deliveryReference', $event)"
        />
      </label>
      <label class="field-block">
        <span>已交付内容</span>
        <el-input
          :model-value="form.deliveredCredential"
          :disabled="!canManageTaskLifecycle"
          maxlength="500"
          placeholder="可填写人工发送的卡密、链接或关键信息"
          type="textarea"
          :rows="3"
          @update:model-value="updateField('deliveredCredential', $event)"
        />
      </label>
      <label class="field-block">
        <span>处理备注</span>
        <el-input
          :model-value="form.resultMessage"
          :disabled="!canManageTaskLifecycle"
          maxlength="500"
          placeholder="说明实际履约结果，失败时建议写清原因"
          type="textarea"
          :rows="4"
          @update:model-value="updateField('resultMessage', $event)"
        />
      </label>
    </div>
    <p class="manual-hint">回写后会直接更新任务终态，不再走旧式领取链接流程。</p>
    <div v-if="detail.manualDispatch" class="manual-summary">
      <p>
        最近回写：<AdminStatusTag
          :status="detail.manualDispatch.outcome || detail.task.deliveryStatus"
        />
        · {{ formatAdminDateTime(detail.manualDispatch.completedAt) }}
      </p>
      <p>
        处理人：{{ detail.manualDispatch.completedBy?.username || '-' }} /
        {{ detail.manualDispatch.completedBy?.role || '-' }}
      </p>
      <p>流水号：{{ detail.manualDispatch.deliveryReference || '-' }}</p>
      <p>交付内容：{{ detail.manualDispatch.deliveredCredential || '-' }}</p>
      <p>备注：{{ detail.manualDispatch.resultMessage || '-' }}</p>
    </div>
  </section>
</template>

<style scoped src="../AdminTaskDetail.css"></style>
