admin-web/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Plus, Save, Trash2 } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { getApiErrorDetails } from '@/shared/api/http'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import PageToolbar from '@/shared/components/PageToolbar.vue'
import { CONTAINER_SPECIFICATIONS } from '@/shared/domain/containerSpecifications'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { listPlatformPartners, type PlatformPartnerResource } from '@/modules/master-data'
import { listSuppliers, type Supplier } from '@/modules/suppliers'
import { listPlatformWarehouses, type PlatformWarehouseResource } from '@/modules/warehouses'
import {
  createOceanBooking,
  getOceanBooking,
  performOceanBookingAction,
  releaseOceanBooking,
  requestOceanBookingChange,
  listWarehouseLogisticsChannels,
  type OceanLogisticsChannel,
  type OceanBookingAction,
} from '../api/platformOceanBookings'
import type {
  OceanBookingDetail,
  OceanBookingDraftData,
  OceanBookingParty,
  OceanBookingSaveRequest,
  OceanBookingStatus,
} from '../types'
import { oceanBookingStatusLabel } from '../status'
import { bookingContainerError, createBlankBookingContainer, selectBookingContainerType } from '../containerRequirements'
import { isActiveBookingAgent } from '../bookingAgents'

const partyTypes = [
  { value: 'SHIPPER', label: '发货人' },
  { value: 'CONSIGNEE', label: '收货人' },
  { value: 'NOTIFY_PARTY', label: '通知人' },
] as const
const containerTypeOptions = CONTAINER_SPECIFICATIONS
const containerKindOptions = [
  { value: 'FCL', label: '整箱 FCL' },
  { value: 'LCL', label: '拼箱 LCL' },
]
const actionLabels: Record<OceanBookingAction, string> = {
  release: '确认放舱', cancel: '取消订舱',
  'change-request': '申请改船', 'change-confirm': '确认改船', 'change-fail': '改船失败',
}
const actionPermissions: Record<OceanBookingAction, string> = {
  release: 'platform:firstleg:ocean-booking:release',
  cancel: 'platform:firstleg:ocean-booking:cancel', 'change-request': 'platform:firstleg:ocean-booking:change',
  'change-confirm': 'platform:firstleg:ocean-booking:change', 'change-fail': 'platform:firstleg:ocean-booking:change',
}
const actionsByStatus: Partial<Record<OceanBookingStatus, OceanBookingAction[]>> = {
  CONFIRMED: ['release', 'change-request', 'cancel'],
  CHANGE_PENDING: ['change-confirm', 'change-fail', 'cancel'],
}

const route = useRoute()
const router = useRouter()
const access = useAccessPreviewStore()
const id = computed(() => String(route.params.bookingId || ''))
const isNew = computed(() => route.name === 'ocean-booking-create' || id.value === 'new')
const detail = ref<OceanBookingDetail | null>(null)
const loading = ref(false)
const saving = ref(false)
const actionSaving = ref(false)
const error = ref<ReturnType<typeof getApiErrorDetails> | null>(null)
const actionError = ref<ReturnType<typeof getApiErrorDetails> | null>(null)
const formRef = ref<FormInstance>()
const customers = ref<PlatformTenantResource[]>([])
const partners = ref<PlatformPartnerResource[]>([])
const bookingSuppliers = ref<Supplier[]>([])
const warehouses = ref<PlatformWarehouseResource[]>([])
const optionsLoading = ref(false)
const optionsError = ref('')
const channels = ref<OceanLogisticsChannel[]>([])
const channelsLoading = ref(false)
const channelsError = ref('')
const selectedChannelName = ref('')
let channelRequestSerial = 0
const selectableCustomers = computed(() => customers.value.filter((customer) => (
  customer.status === 'ACTIVE' || String(customer.id) === String(form.data.customerId)
)))
const shippingCompanies = computed(() => partners.value.filter((partner) => partner.types.includes('CARRIER')))
const selectableBookingAgents = computed(() => bookingSuppliers.value.filter(isActiveBookingAgent))
const channelUnavailable = computed(() => Boolean(form.data.warehouseId) && !channelsLoading.value && !channelsError.value && channels.value.length === 0)

function blankParties(): OceanBookingParty[] {
  return partyTypes.map(({ value }) => ({ partyType: value, partyName: '', contactName: '', contactPhone: '', address: '' }))
}
function blankData(): OceanBookingDraftData {
  return {
    customerId: null, customerName: null, channelCode: '', warehouseId: '', serviceTerm: null, freightTerm: null, parties: blankParties(),
    billOfLadingNo: '', vesselName: '', voyageNo: '', estimatedSailingAt: null, estimatedArrivalAt: null,
    containers: [createBlankBookingContainer()],
  }
}
const form = reactive<OceanBookingSaveRequest>({ expectedVersion: 0, data: blankData() })
const rules: FormRules = {
  warehouseId: [{ required: true, message: '请选择装柜仓库', trigger: 'change' }],
  channelCode: [{ required: true, message: '请选择物流渠道', trigger: 'change' }],
  billOfLadingNo: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
  vesselName: [{ required: true, message: '请输入船名', trigger: 'blur' }],
  voyageNo: [{ required: true, message: '请输入航次', trigger: 'blur' }],
  estimatedSailingAt: [{ required: true, message: '请选择预计开船时间', trigger: 'change' }],
  estimatedArrivalAt: [{ required: true, message: '请选择预计到港时间', trigger: 'change' }],
  serviceTerm: [{ required: true, message: '请输入主要运输条款 Service Term', trigger: 'blur' }],
  freightTerm: [{ required: true, message: '请输入运费条款 Freight Term', trigger: 'blur' }],
}
const editable = computed(() => isNew.value)
const canSave = computed(() => isNew.value && access.can('platform:firstleg:ocean-booking:create'))
const availableActions = computed(() => (actionsByStatus[detail.value?.status || 'CONFIRMED'] || [])
  .filter((action) => access.can(actionPermissions[action])))

const changeDialogOpen = ref(false)
const changeForm = reactive({ vesselName: '', voyageNo: '', estimatedSailingAt: null as string | null, estimatedArrivalAt: null as string | null, reason: '' })
const releaseDialogOpen = ref(false)
const releaseReason = ref('')

function statusLabel(status: OceanBookingStatus | string | null | undefined) {
  return oceanBookingStatusLabel(status)
}
async function loadOptions() {
  optionsLoading.value = true
  optionsError.value = ''
  try {
    const [customerResult, partnerResult, supplierResult, warehouseResult] = await Promise.all([
      listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' }),
      listPlatformPartners({ page: 1, size: 200, status: 'ACTIVE' }),
      listSuppliers({ page: 1, size: 200, category: 'BOOKING', status: 'ACTIVE' }),
      listPlatformWarehouses({ page: 1, size: 200, warehouseType: 'DOMESTIC', status: 'ACTIVE' }),
    ])
    customers.value = customerResult.records.filter((customer) => customer.status === 'ACTIVE')
    partners.value = partnerResult.records
    bookingSuppliers.value = supplierResult.records.filter(isActiveBookingAgent)
    warehouses.value = warehouseResult.records.filter((warehouse) => warehouse.status === 'ACTIVE' && warehouse.warehouseType === 'DOMESTIC')
  } catch (cause) {
    optionsError.value = getApiErrorDetails(cause, '客户、船公司或订舱代理选项加载失败').message
  } finally {
    optionsLoading.value = false
  }
}
function selectCustomer(value: unknown) {
  const customerId = value == null || value === '' ? null : String(value)
  form.data.customerId = customerId
  const customer = customerId == null ? null : customers.value.find((item) => String(item.id) === customerId)
  form.data.customerName = customer?.tenantName || null
}
function normalizeDraftData() {
  form.data.customerId = form.data.customerId || null
  form.data.customerName = form.data.customerId ? form.data.customerName : null
  form.data.serviceTerm = form.data.serviceTerm?.trim() || null
  form.data.freightTerm = form.data.freightTerm?.trim() || null
  form.data.billOfLadingNo = form.data.billOfLadingNo.trim()
  form.data.vesselName = form.data.vesselName.trim()
  form.data.voyageNo = form.data.voyageNo.trim()
  form.data.containers.forEach((container) => { container.containerNo = container.containerNo.trim() })
}
function selectWarehouse(value: unknown) {
  const warehouseId = String(value || '')
  form.data.warehouseId = warehouseId
  form.data.channelCode = ''
  selectedChannelName.value = ''
  channels.value = []
  channelsError.value = ''
  if (warehouseId) void loadChannels(warehouseId)
}
async function loadChannels(warehouseId: string) {
  const serial = ++channelRequestSerial
  channelsLoading.value = true
  channelsError.value = ''
  try {
    const result = await listWarehouseLogisticsChannels(warehouseId)
    if (serial === channelRequestSerial && warehouseId === form.data.warehouseId) channels.value = result
  } catch (cause) {
    if (serial === channelRequestSerial) channelsError.value = getApiErrorDetails(cause, '物流渠道加载失败').message
  } finally {
    if (serial === channelRequestSerial) channelsLoading.value = false
  }
}
function selectChannel(channelCode: string) {
  const channel = channels.value.find((item) => item.channelCode === channelCode)
  form.data.channelCode = channelCode
  selectedChannelName.value = channel?.channelName || ''
}
function selectShippingCompany(partnerId: string) {
  const partner = partners.value.find((item) => String(item.id) === partnerId)
  form.data.shippingCompanyId = partnerId || null
  form.data.shippingCompanyName = partner?.partnerName || null
}
function selectBookingAgent(supplierId: string) {
  const supplier = selectableBookingAgents.value.find((item) => String(item.id) === supplierId)
  form.data.bookingAgentId = supplier ? String(supplier.id) : null
  form.data.bookingAgentName = supplier?.name || null
}
function applyDetail(value: OceanBookingDetail) {
  detail.value = value
  form.expectedVersion = value.version
  form.data = {
    customerId: value.customerId ?? null, customerName: value.customerName ?? null, channelCode: value.channelCode || '', warehouseId: value.warehouseId || '',
    billOfLadingNo: value.billOfLadingNo || '', vesselName: value.vesselName || '', voyageNo: value.voyageNo || '',
    estimatedSailingAt: value.estimatedSailingAt || null, estimatedArrivalAt: value.estimatedArrivalAt || null,
    shippingCompanyId: value.shippingCompanyId, shippingCompanyName: value.shippingCompanyName,
    bookingAgentId: value.bookingAgentId, bookingAgentName: value.bookingAgentName,
    departurePortCode: value.departurePortCode, departurePortName: value.departurePortName,
    destinationPortCode: value.destinationPortCode, destinationPortName: value.destinationPortName,
    placeOfDelivery: value.placeOfDelivery, serviceTerm: value.serviceTerm, freightTerm: value.freightTerm,
    remark: value.remark,
    parties: value.parties.length ? value.parties.map(({ partyType, partyName, contactName, contactPhone, address }) => ({ partyType, partyName, contactName, contactPhone, address })) : blankParties(),
    containers: value.containers.length ? value.containers.map(({ containerNo, containerType, containerKind, capacityCbm, maxWeightKg }) => ({ containerNo, containerType, containerKind, capacityCbm, maxWeightKg })) : [createBlankBookingContainer()],
  }
  selectedChannelName.value = value.channelName || ''
  channels.value = []
  if (form.data.warehouseId) void loadChannels(form.data.warehouseId)
}
async function load() {
  if (!id.value || isNew.value) return
  loading.value = true
  error.value = null
  try { applyDetail(await getOceanBooking(id.value)) }
  catch (cause) { error.value = getApiErrorDetails(cause) }
  finally { loading.value = false }
}
async function save() {
  if (!canSave.value) return
  actionError.value = null
  normalizeDraftData()
  if (!await formRef.value?.validate().catch(() => false)) {
    actionError.value = { message: '请完善装柜仓库、物流渠道、真实运输资料和运输条款等必填信息' }
    return
  }
  if (form.data.estimatedArrivalAt! < form.data.estimatedSailingAt!) {
    actionError.value = { message: '预计到港时间不能早于预计开船时间' }
    return
  }
  if (form.data.parties.some((party) => !party.partyName.trim())) {
    actionError.value = { message: '发货人、收货人和通知人名称均为必填项' }
    return
  }
  if (!validateBookingContainers()) return
  saving.value = true
  actionError.value = null
  try {
    const payload = { ...form.data }
    const created = await createOceanBooking({ expectedVersion: 0, data: payload })
    ElMessage.success('线下订舱资料已登记并确认')
    await router.replace(`/ocean-bookings/${created.id}`)
    applyDetail(created)
  } catch (cause) { actionError.value = getApiErrorDetails(cause) }
  finally { saving.value = false }
}
async function requiredReason(action: OceanBookingAction) {
  if (!['cancel', 'change-fail'].includes(action)) return null
  const result = await ElMessageBox.prompt(`请填写“${actionLabels[action]}”原因，服务端将写入状态历史。`, actionLabels[action], {
    inputValidator: (value) => Boolean(value?.trim()) || '原因不能为空',
    confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',
  })
  return result.value.trim()
}
function openChangeDialog() {
  changeForm.vesselName = detail.value?.vesselName || ''
  changeForm.voyageNo = detail.value?.voyageNo || ''
  changeForm.estimatedSailingAt = detail.value?.estimatedSailingAt || null
  changeForm.estimatedArrivalAt = detail.value?.estimatedArrivalAt || null
  changeForm.reason = ''
  changeDialogOpen.value = true
}
function openReleaseDialog() {
  releaseReason.value = ''
  releaseDialogOpen.value = true
}
async function submitRelease() {
  if (!detail.value) return
  const billOfLadingNo = detail.value.billOfLadingNo?.trim()
  const vesselName = detail.value.vesselName?.trim()
  const voyageNo = detail.value.voyageNo?.trim()
  const estimatedSailingAt = detail.value.estimatedSailingAt
  const estimatedArrivalAt = detail.value.estimatedArrivalAt
  if (!billOfLadingNo || !vesselName || !voyageNo || !estimatedSailingAt || !estimatedArrivalAt) {
    actionError.value = getApiErrorDetails(new Error('当前订舱缺少已确认运输资料，无法放舱'))
    return
  }
  if (estimatedArrivalAt < estimatedSailingAt) {
    actionError.value = getApiErrorDetails(new Error('预计到港时间不能早于预计开船时间'))
    return
  }
  actionSaving.value = true
  actionError.value = null
  try {
    applyDetail(await releaseOceanBooking(id.value, { expectedVersion: detail.value.version, billOfLadingNo, vesselName, voyageNo, estimatedSailingAt, estimatedArrivalAt, reason: releaseReason.value.trim() || null }))
    releaseDialogOpen.value = false
    ElMessage.success('确认放舱成功')
  } catch (cause) { actionError.value = getApiErrorDetails(cause) }
  finally { actionSaving.value = false }
}
async function submitChange() {
  if (!detail.value || !changeForm.vesselName.trim() || !changeForm.voyageNo.trim() || !changeForm.reason.trim()) return
  actionSaving.value = true
  actionError.value = null
  try {
    applyDetail(await requestOceanBookingChange(id.value, { expectedVersion: detail.value.version, ...changeForm }))
    changeDialogOpen.value = false
    ElMessage.success('改船申请已提交')
  } catch (cause) { actionError.value = getApiErrorDetails(cause) }
  finally { actionSaving.value = false }
}
async function runAction(action: OceanBookingAction) {
  if (!detail.value || action === 'change-request') { if (action === 'change-request') openChangeDialog(); return }
  if (action === 'release') { openReleaseDialog(); return }
  actionError.value = null
  try {
    const reason = await requiredReason(action)
    await ElMessageBox.confirm(`确认执行“${actionLabels[action]}”吗？`, actionLabels[action], { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
    actionSaving.value = true
    applyDetail(await performOceanBookingAction(id.value, action, { expectedVersion: detail.value.version, reason }))
    ElMessage.success(`${actionLabels[action]}成功`)
  } catch (cause) {
    if (cause !== 'cancel' && !(cause instanceof Error && cause.message === 'cancel')) actionError.value = getApiErrorDetails(cause)
  } finally { actionSaving.value = false }
}
function validateBookingContainers() {
  const message = bookingContainerError(form.data.containers)
  if (message) {
    actionError.value = { message }
    return false
  }
  return true
}
function addContainer() {
  if (form.data.containers.length < 20) form.data.containers.push(createBlankBookingContainer())
}
function removeContainer(index: number) { if (form.data.containers.length > 1) form.data.containers.splice(index, 1) }

onMounted(() => { void load(); void loadOptions() })
</script>

<template>
  <AdminPage as="div" class="booking-detail">
    <DetailPageLayout aria-label="订舱详情">
      <template #header>
        <div class="detail-heading">
          <el-button @click="router.push('/ocean-bookings')"><ArrowLeft :size="16" />返回列表</el-button>
          <PageToolbar class="booking-page-toolbar" as="section" :title="detail?.bookingNo || '订舱资料'" :description="detail ? `${detail.customerName || '未关联客户'} · ${detail.pol || '—'} → ${detail.pod || '—'}` : '登记线下已确认的真实订舱资料'">
            <template v-if="detail" #actions><div class="heading-status"><StatusBadge :status="statusLabel(detail.status)" /></div></template>
          </PageToolbar>
        </div>
      </template>

      <LoadErrorState v-if="error" title="订舱详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
      <template v-else>
      <el-alert v-if="actionError" type="error" :closable="false" show-icon :title="actionError.message"><ApiErrorMeta :details="actionError" /></el-alert>
      <section class="surface-panel">
        <div class="section-title">
          <div><h2>订舱信息</h2><p v-if="detail && !editable">已确认订舱资料仅可查看，船期变更请使用“申请改船”。</p></div>
          <div class="actions">
            <el-button v-for="item in availableActions" :key="item" :loading="actionSaving" @click="runAction(item)">{{ actionLabels[item] }}</el-button>
            <el-button v-if="canSave" type="primary" :loading="saving" @click="save"><Save :size="16" />登记订舱</el-button>
          </div>
        </div>
        <el-alert v-if="optionsError" type="warning" :closable="false" show-icon :title="optionsError"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions">重新加载选项</el-button></el-alert>
        <el-form ref="formRef" :model="form.data" :rules="rules" label-position="top" :disabled="!editable" class="booking-groups">
          <section class="booking-group" aria-label="基本信息">
            <h3>基本信息</h3><div class="booking-group__body booking-group__body--fields">
            <el-form-item label="订舱号"><el-input :model-value="detail?.bookingNo || '保存后生成'" disabled /></el-form-item>
            <el-form-item label="客户（可选）"><el-select :model-value="form.data.customerId" filterable clearable placeholder="请选择客户（可选）" no-data-text="暂无可选客户" :loading="optionsLoading" style="width:100%" @update:model-value="selectCustomer"><el-option v-if="form.data.customerId && !selectableCustomers.some((customer) => String(customer.id) === String(form.data.customerId))" :label="form.data.customerName || '客户名称缺失'" :value="String(form.data.customerId)" /><el-option v-for="customer in selectableCustomers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></el-form-item>
            <el-form-item label="状态"><el-input :model-value="detail ? statusLabel(detail.status) : '登记后直接确认'" disabled /></el-form-item>
            <el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="form.data.warehouseId" filterable placeholder="请选择装柜仓库" :loading="optionsLoading" style="width:100%" @update:model-value="selectWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item>
            <el-form-item label="物流渠道" prop="channelCode"><el-select :model-value="form.data.channelCode" filterable :disabled="!form.data.warehouseId || channelsLoading || !!channelsError || channelUnavailable" :loading="channelsLoading" :placeholder="form.data.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="该仓库暂无有效物流渠道" style="width:100%" @update:model-value="selectChannel(String($event || ''))"><el-option v-if="form.data.channelCode && !channels.some((channel) => channel.channelCode === form.data.channelCode)" :label="selectedChannelName || form.data.channelCode" :value="form.data.channelCode" /><el-option v-for="channel in channels" :key="channel.channelCode" :label="channel.channelName" :value="channel.channelCode"><span>{{ channel.channelName }}</span><small class="channel-code">{{ channel.channelCode }}</small></el-option></el-select><div v-if="channelsError" class="field-error"><span>{{ channelsError }}</span><el-button link type="primary" :loading="channelsLoading" @click="loadChannels(form.data.warehouseId)">重新加载</el-button></div><div v-else-if="channelUnavailable" class="field-hint">该仓库暂无有效物流渠道，请更换仓库或联系管理员。</div></el-form-item>
            <el-form-item label="提单号" prop="billOfLadingNo"><el-input v-model="form.data.billOfLadingNo" maxlength="128" placeholder="请输入提单号" /></el-form-item>
            <el-form-item label="船公司"><el-select :model-value="form.data.shippingCompanyId" filterable clearable placeholder="请选择船公司" :loading="optionsLoading" style="width:100%" @update:model-value="selectShippingCompany(String($event || ''))"><el-option v-if="form.data.shippingCompanyId && !shippingCompanies.some((partner) => String(partner.id) === String(form.data.shippingCompanyId))" :label="form.data.shippingCompanyName || '船公司名称缺失'" :value="String(form.data.shippingCompanyId)" /><el-option v-for="partner in shippingCompanies" :key="String(partner.id)" :label="partner.partnerName" :value="String(partner.id)" /></el-select></el-form-item>
            <el-form-item label="订舱代理"><el-select :model-value="form.data.bookingAgentId" filterable clearable placeholder="请选择订舱代理" :loading="optionsLoading" no-data-text="暂无启用的订舱代理" style="width:100%" @update:model-value="selectBookingAgent(String($event || ''))"><el-option v-if="!editable && form.data.bookingAgentId && !selectableBookingAgents.some((supplier) => String(supplier.id) === String(form.data.bookingAgentId))" :label="form.data.bookingAgentName || '订舱代理名称缺失'" :value="String(form.data.bookingAgentId)" /><el-option v-for="supplier in selectableBookingAgents" :key="String(supplier.id)" :label="supplier.name" :value="String(supplier.id)" /></el-select></el-form-item>
            </div>
          </section>
          <section class="booking-group" aria-label="航线船期">
            <h3>航线船期</h3><div class="booking-group__body booking-group__body--fields">
            <el-form-item label="船名" prop="vesselName"><el-input v-model="form.data.vesselName" maxlength="128" placeholder="请输入船名" /></el-form-item>
            <el-form-item label="航次" prop="voyageNo"><el-input v-model="form.data.voyageNo" maxlength="64" placeholder="请输入航次" /></el-form-item>
            <el-form-item label="起运港代码"><el-input v-model="form.data.departurePortCode" placeholder="例如：CNNGB" /></el-form-item>
            <el-form-item label="起运港"><el-input v-model="form.data.departurePortName" placeholder="例如：宁波港" /></el-form-item>
            <el-form-item label="目的港代码"><el-input v-model="form.data.destinationPortCode" placeholder="例如：USLAX" /></el-form-item>
            <el-form-item label="目的港"><el-input v-model="form.data.destinationPortName" placeholder="例如：洛杉矶港" /></el-form-item>
            <el-form-item class="booking-field--wide" label="交货地点"><el-input v-model="form.data.placeOfDelivery" placeholder="请输入最终交货地点" /></el-form-item>
            <el-form-item label="预计开船" prop="estimatedSailingAt"><el-date-picker v-model="form.data.estimatedSailingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计开船时间" style="width:100%" /></el-form-item>
            <el-form-item label="预计到港" prop="estimatedArrivalAt"><el-date-picker v-model="form.data.estimatedArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计到港时间" style="width:100%" /></el-form-item>
            </div>
          </section>
          <section class="booking-group" aria-label="条款与真实柜">
            <h3>条款与真实柜</h3><div class="booking-group__body">
            <div class="booking-terms">
              <el-form-item label="主要运输条款 Service Term" prop="serviceTerm"><el-input v-model="form.data.serviceTerm" clearable maxlength="32" placeholder="请输入 Service Term" /></el-form-item>
              <el-form-item label="运费条款 Freight Term" prop="freightTerm"><el-input v-model="form.data.freightTerm" clearable maxlength="32" placeholder="请输入 Freight Term" /></el-form-item>
            </div>
            <div class="container-table-wrap" aria-label="真实柜登记">
              <table class="container-table">
                <thead><tr><th scope="col">操作</th><th scope="col">集装箱号</th><th scope="col">柜型</th><th scope="col">箱种</th><th scope="col">容量</th><th scope="col">限重</th><th v-if="detail" scope="col">柜次号</th></tr></thead>
                <tbody>
                  <tr v-for="(container, index) in form.data.containers" :key="detail?.containers[index]?.containerBookingId || index">
                    <td class="container-table__action">
                      <el-tooltip v-if="editable" :content="form.data.containers.length === 1 ? '至少保留一个真实柜' : '删除该真实柜'" placement="top">
                        <span><el-button circle plain size="small" type="danger" :aria-label="`删除真实柜 ${index + 1}`" :disabled="form.data.containers.length === 1" @click="removeContainer(index)"><Trash2 :size="14" /></el-button></span>
                      </el-tooltip>
                      <span v-else aria-hidden="true">—</span>
                    </td>
                    <td><el-input v-model="container.containerNo" :disabled="!editable" maxlength="64" placeholder="请输入真实集装箱号" /></td>
                    <td><el-select :model-value="container.containerType" :disabled="!editable" placeholder="请选择柜型" @update:model-value="selectBookingContainerType(container, String($event || ''))"><el-option v-for="item in containerTypeOptions" :key="item.type" :label="item.type" :value="item.type" /></el-select></td>
                    <td><el-select v-model="container.containerKind" :disabled="!editable" placeholder="请选择箱种"><el-option v-for="item in containerKindOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></td>
                    <td class="container-table__specification"><span>{{ container.capacityCbm }} m³</span></td>
                    <td class="container-table__specification"><span>{{ container.maxWeightKg }} kg</span></td>
                    <td v-if="detail"><span>{{ detail.containers[index]?.cabinetNo || '—' }}</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div v-if="editable" class="container-actions"><el-button class="add-container" size="small" :disabled="form.data.containers.length >= 20" @click="addContainer"><Plus :size="15" />新增真实柜</el-button><span>{{ form.data.containers.length }} / 20 个</span></div>
            <el-form-item label="备注"><el-input v-model="form.data.remark" type="textarea" :rows="3" placeholder="请输入订舱备注（可选）" /></el-form-item>
            </div>
          </section>
        </el-form>
      </section>

      <section class="surface-panel">
        <h2>订舱关系方</h2>
        <div class="party-grid">
          <div v-for="(party, index) in form.data.parties" :key="party.partyType" class="subsection">
            <h3><span class="required-mark" aria-hidden="true">*</span>{{ partyTypes[index]?.label || party.partyType }}</h3>
            <el-input v-model="party.partyName" :disabled="!editable" :aria-label="`${partyTypes[index]?.label || party.partyType}单位名称（必填）`" placeholder="单位名称（必填）" />
            <el-input v-model="party.contactName" :disabled="!editable" placeholder="联系人" />
            <el-input v-model="party.contactPhone" :disabled="!editable" placeholder="联系电话" />
            <el-input v-model="party.address" :disabled="!editable" placeholder="地址" />
          </div>
        </div>
      </section>

      <section v-if="detail" class="surface-panel history-panel">
        <div class="section-title"><div><h2>状态历史</h2><p>当前进度：{{ statusLabel(detail.status) }}</p></div></div>
        <el-timeline><el-timeline-item v-for="event in detail.histories" :key="event.id" :timestamp="event.occurredAt"><strong>{{ statusLabel(event.fromStatus) }} → {{ statusLabel(event.toStatus) }}</strong><p>{{ event.operatorName || '系统' }}<span v-if="event.reason"> · {{ event.reason }}</span></p></el-timeline-item></el-timeline>
      </section>
      </template>
    </DetailPageLayout>

    <AppDialog v-model="changeDialogOpen" title="申请改船" width="min(560px, 94vw)" :confirm-loading="actionSaving" :confirm-disabled="!changeForm.vesselName.trim() || !changeForm.voyageNo.trim() || !changeForm.reason.trim()" confirm-text="提交申请" @confirm="submitChange">
      <el-form label-position="top">
        <el-form-item label="新船名" required><el-input v-model="changeForm.vesselName" placeholder="请输入新船名" /></el-form-item>
        <el-form-item label="新航次" required><el-input v-model="changeForm.voyageNo" placeholder="请输入新航次" /></el-form-item>
        <el-form-item label="预计开船"><el-date-picker v-model="changeForm.estimatedSailingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计开船时间" style="width:100%" /></el-form-item>
        <el-form-item label="预计到港"><el-date-picker v-model="changeForm.estimatedArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计到港时间" style="width:100%" /></el-form-item>
        <el-form-item label="变更原因" required><el-input v-model="changeForm.reason" type="textarea" placeholder="请说明改船原因" /></el-form-item>
      </el-form>
      <LoadErrorState v-if="actionError" compact title="提交失败" :message="actionError.message" :show-retry="false"><template #details><ApiErrorMeta :details="actionError" /></template></LoadErrorState>
    </AppDialog>
    <AppDialog v-model="releaseDialogOpen" title="确认放舱" width="min(560px, 94vw)" :confirm-loading="actionSaving" confirm-text="确认放舱" cancel-text="取消" @confirm="submitRelease">
      <el-form label-position="top">
        <el-alert title="请复核已登记的真实订舱资料。放舱不会重新采集或修改这些信息。" type="info" :closable="false" show-icon />
        <el-descriptions class="release-summary" :column="2" border>
          <el-descriptions-item label="提单号">{{ detail?.billOfLadingNo || '—' }}</el-descriptions-item>
          <el-descriptions-item label="船名">{{ detail?.vesselName || '—' }}</el-descriptions-item>
          <el-descriptions-item label="航次">{{ detail?.voyageNo || '—' }}</el-descriptions-item>
          <el-descriptions-item label="预计开船">{{ detail?.estimatedSailingAt || '—' }}</el-descriptions-item>
          <el-descriptions-item label="预计到港">{{ detail?.estimatedArrivalAt || '—' }}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="备注"><el-input v-model="releaseReason" type="textarea" maxlength="1000" placeholder="请输入放舱备注（可选）" /></el-form-item>
      </el-form>
      <LoadErrorState v-if="actionError" compact title="放舱失败" :message="actionError.message" :show-retry="false"><template #details><ApiErrorMeta :details="actionError" /></template></LoadErrorState>
    </AppDialog>
  </AdminPage>
</template>

<style scoped>
.channel-code{display:block;margin-left:8px;color:var(--cc-muted);font-size:11px}.field-error,.field-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;color:var(--cc-muted);font-size:12px;line-height:20px}.field-error{color:var(--el-color-danger)}
.booking-detail{min-width:0;max-width:1880px}.detail-heading{display:flex;min-width:0;align-items:flex-start;gap:16px}.booking-page-toolbar{min-width:0;flex:1}.section-title p,.history-panel p{margin:5px 0 0;color:var(--cc-muted);font-size:13px}.heading-status{display:flex;align-items:center;gap:8px}.surface-panel{padding:16px}.surface-panel h2{margin:0;font-size:16px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}.actions{display:flex;flex-wrap:wrap;gap:8px}.booking-groups{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:14px}.booking-group{min-width:0;overflow:hidden;border:1px solid #e8edf3;border-radius:10px;background:#fff}.booking-group>h3{margin:0;padding:12px 14px;border-bottom:1px solid #eef2f6;color:#1f2937;font-size:14px}.booking-group__body{padding:12px 14px}.booking-group__body--fields,.booking-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:8px}.booking-field--wide{grid-column:1/-1}.booking-terms :deep(.el-select){width:100%}.party-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.subsection{display:grid;gap:10px;padding:12px;border:1px solid var(--cc-border);border-radius:6px}.subsection h3{margin:0;font-size:14px}.required-mark{margin-right:4px;color:var(--el-color-danger)}.container-table-wrap{overflow-x:auto;margin-bottom:10px}.container-table{width:100%;min-width:780px;table-layout:fixed;border-collapse:collapse;font-size:12px}.container-table th,.container-table td{padding:7px 6px;border-bottom:1px solid #eef2f6;text-align:left;vertical-align:middle}.container-table th{background:#fafafa;color:var(--cc-muted);font-weight:650;white-space:nowrap}.container-table th:first-child,.container-table td:first-child{width:56px}.container-table th:nth-child(2),.container-table td:nth-child(2){width:180px}.container-table th:nth-child(3),.container-table td:nth-child(3){width:90px}.container-table th:nth-child(4),.container-table td:nth-child(4){width:110px}.container-table th:nth-child(5),.container-table td:nth-child(5),.container-table th:nth-child(6),.container-table td:nth-child(6){width:100px}.container-table td :deep(.el-select),.container-table td :deep(.el-input){width:100%;min-width:0}.container-table__action{text-align:center!important}.container-table__action :deep(.el-button){width:28px;height:28px}.container-table__specification{color:var(--cc-muted);white-space:nowrap}.container-actions{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--cc-muted);font-size:12px}.add-container{margin:0}.history-panel strong{font-size:14px}@media(max-width:1599px){.booking-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-group:last-child{grid-column:1/-1}}@media(max-width:720px){.booking-groups,.party-grid{grid-template-columns:1fr}.booking-group:last-child{grid-column:auto}.detail-heading{flex-direction:column}.booking-page-toolbar{width:100%}.section-title{flex-direction:column}.actions{width:100%}}@media(max-width:520px){.booking-group__body--fields,.booking-terms{grid-template-columns:1fr}.booking-field--wide{grid-column:auto}}@media(max-width:420px){.surface-panel{padding:12px}.booking-group__body{padding:12px}.actions :deep(.el-button){min-height:44px}}
</style>