<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  adminApi,
  type AdminExpressCompanyItem,
  type AdminExpressCompanyRecognitionCandidate,
  type AdminManualOrderCreatePayload,
  type AdminManualOrderMeta,
  type AdminOrderDetail,
  type AdminOrderListItem,
  type AdminOrderWarehouseOption,
  type AdminServicePricePackage,
} from "../../api/admin";
import OrderStatusTag from "../../components/OrderStatusTag.vue";
import { recognizeReturnAddress } from "../../utils/address-recognition";

const loading = ref(false);
const detailLoading = ref(false);
const drawerVisible = ref(false);
const receiveSubmitting = ref(false);
const returnReceiveSubmitting = ref(false);
const warehouseSubmitting = ref(false);
const warehouseDialogVisible = ref(false);
const warehouseOptionsLoading = ref(false);
const warehouseOptions = ref<AdminOrderWarehouseOption[]>([]);
const selectedWarehouseId = ref(0);
const returnDialogVisible = ref(false);
const returnSubmitting = ref(false);
const returnExpressCompany = ref("");
const returnTrackingNo = ref("");
const returnRecognitionLoading = ref(false);
const returnRecognitionCandidates = ref<AdminExpressCompanyRecognitionCandidate[]>([]);
const expressCompanyLoading = ref(false);
const expressCompanyOptions = ref<AdminExpressCompanyItem[]>([]);
const defaultExpressCompany = ref("");
const manualDialogVisible = ref(false);
const manualSubmitting = ref(false);
const manualMetaLoading = ref(false);
const manualMeta = ref<AdminManualOrderMeta>({ categories: [], brands: [], service_price_packages: [] });
const manualForm = ref<AdminManualOrderCreatePayload>(createManualOrderForm());
const manualAddressRecognitionText = ref("");

const keyword = ref("");
const trackingNo = ref("");
const userMobile = ref("");
const serviceProvider = ref("");
const status = ref("");
const sourceChannel = ref("");

const orders = ref<AdminOrderListItem[]>([]);
const detail = ref<AdminOrderDetail | null>(null);

const providerOptions = [
  { label: "全部服务", value: "" },
  { label: "实物鉴定", value: "anxinyan" },
  { label: "中检鉴定", value: "zhongjian" },
];

const statusOptions = [
  { label: "全部状态", value: "" },
  { label: "待补资料", value: "pending_supplement" },
  { label: "待寄送", value: "pending_shipping" },
  { label: "鉴定中", value: "in_first_review" },
  { label: "待寄回", value: "report_published" },
  { label: "回寄途中", value: "returning" },
  { label: "已完成签收", value: "completed_signed" },
];

const sourceChannelOptions = [
  { label: "全部渠道", value: "" },
  { label: "小程序", value: "mini_program" },
  { label: "H5", value: "h5" },
  { label: "大客户推送订单", value: "enterprise_push" },
  { label: "后台补录订单", value: "manual_entry" },
];

const usageStatusMap: Record<string, string> = {
  new: "全新未使用",
  light_use: "轻微使用痕迹",
  used: "长期使用",
};

const usageStatusText = computed(() => {
  const value = detail.value?.extra_info.usage_status || "";
  return value ? usageStatusMap[value] || value : "-";
});

const productTitle = computed(() => {
  if (!detail.value) {
    return "待完善物品信息";
  }
  return detail.value.product_info.product_name || "待完善物品信息";
});

const productMetaText = computed(() => {
  if (!detail.value) {
    return "物品信息待完善";
  }
  const parts = [
    detail.value.product_info.category_name,
    detail.value.product_info.brand_name,
  ].filter(Boolean);

  return parts.length ? parts.join(" / ") : "物品信息待完善";
});

const canMarkReceived = computed(() => {
  if (!detail.value) {
    return false;
  }

  if (detail.value.order_info.can_mark_received) {
    return true;
  }

  return (
    detail.value.order_info.order_status === "pending_shipping" &&
    Boolean(detail.value.logistics_info?.tracking_no) &&
    detail.value.logistics_info?.tracking_status !== "received"
  );
});

const logisticsActionText = computed(() => {
  if (!detail.value?.logistics_info) {
    return "";
  }

  return canMarkReceived.value ? "用户已提交/寄出，待鉴定中心签收" : detail.value.logistics_info.tracking_status_text;
});

const canSubmitReturnLogistics = computed(() => Boolean(detail.value?.order_info.can_submit_return_logistics));
const returnLogisticsBlockReason = computed(() => detail.value?.order_info.return_logistics_block_reason || "");
const canMarkReturnReceived = computed(() => Boolean(detail.value?.order_info.can_mark_return_received));
const expressCompanySelectOptions = computed(() => {
  if (!returnExpressCompany.value || expressCompanyOptions.value.some((item) => item.company_name === returnExpressCompany.value)) {
    return expressCompanyOptions.value;
  }

  return [
    {
      id: 0,
      company_name: returnExpressCompany.value,
      company_code: returnExpressCompany.value,
      status: "enabled",
      status_text: "启用中",
      is_default: false,
      sort_order: 0,
      remark: "",
      created_at: "",
      updated_at: "",
    },
    ...expressCompanyOptions.value,
  ];
});
const manualServicePackages = computed<AdminServicePricePackage[]>(() =>
  manualMeta.value.service_price_packages.find((item) => item.service_provider === manualForm.value.service_provider)?.packages.filter((item) => item.is_enabled) || [],
);
let returnRecognitionTimer: ReturnType<typeof setTimeout> | undefined;

function createManualOrderForm(): AdminManualOrderCreatePayload {
  return {
    service_provider: "anxinyan",
    price_package_id: 0,
    price_package_code: "",
    product_info: {
      category_id: 0,
      brand_id: 0,
      brand_name: "",
      product_name: "",
      color: "",
      size_spec: "",
      serial_no: "",
    },
    extra_info: {
      purchase_channel: "",
      purchase_price: 0,
      usage_status: "",
      condition_desc: "",
      remark: "",
    },
    return_address: {
      consignee: "",
      mobile: "",
      province: "",
      city: "",
      district: "",
      detail_address: "",
    },
    materials: [
      {
        item_code: "manual_initial",
        item_name: "补录资料",
        is_required: false,
        files: [],
      },
    ],
  };
}

async function fetchOrders() {
  loading.value = true;
  try {
    const response = await adminApi.getOrders({
      keyword: keyword.value,
      tracking_no: trackingNo.value,
      user_mobile: userMobile.value,
      service_provider: serviceProvider.value,
      status: status.value,
      source_channel: sourceChannel.value,
    });
    orders.value = response.data.list;
  } catch (error) {
    console.error(error);
    ElMessage.error("订单列表加载失败");
  } finally {
    loading.value = false;
  }
}

async function ensureManualMeta() {
  if (manualMeta.value.categories.length) return;
  manualMetaLoading.value = true;
  try {
    const response = await adminApi.getManualOrderMeta();
    manualMeta.value = response.data;
    applyManualDefaultPackage(true);
  } catch (error) {
    console.error(error);
    ElMessage.error("补录订单选项加载失败");
  } finally {
    manualMetaLoading.value = false;
  }
}

function applyManualDefaultPackage(force = false) {
  const current = manualServicePackages.value.find((item) => item.id === manualForm.value.price_package_id);
  if (current && !force) {
    manualForm.value.price_package_code = current.package_code;
    return;
  }

  const target = manualServicePackages.value.find((item) => item.is_default) || manualServicePackages.value[0];
  manualForm.value.price_package_id = target?.id || 0;
  manualForm.value.price_package_code = target?.package_code || "";
}

async function openManualDialog() {
  manualForm.value = createManualOrderForm();
  manualAddressRecognitionText.value = "";
  manualDialogVisible.value = true;
  await ensureManualMeta();
  applyManualDefaultPackage(true);
}

async function ensureExpressCompanyOptions() {
  if (expressCompanyOptions.value.length) return;
  expressCompanyLoading.value = true;
  try {
    const response = await adminApi.getExpressCompanies({ enabled_only: 1 });
    expressCompanyOptions.value = response.data.list;
    defaultExpressCompany.value = response.data.default_company;
  } catch (error) {
    console.error(error);
    ElMessage.error("快递公司列表加载失败");
  } finally {
    expressCompanyLoading.value = false;
  }
}

function applyRecognizedManualAddress() {
  const result = recognizeReturnAddress(manualAddressRecognitionText.value);
  if (!result.ok || !result.address) {
    ElMessage.warning(result.message || "寄回地址识别失败");
    return;
  }

  manualForm.value.return_address = {
    ...manualForm.value.return_address,
    ...result.address,
  };
  ElMessage.success("寄回地址已识别并填入");
}

function validateManualForm() {
  const form = manualForm.value;
  if (!form.price_package_id) {
    ElMessage.warning("请选择价格套餐");
    return false;
  }
  if (!form.product_info.category_id) {
    ElMessage.warning("请选择品类");
    return false;
  }
  const address = form.return_address;
  if (!address.consignee.trim() || !address.mobile.trim() || !address.province.trim() || !address.city.trim() || !address.district.trim() || !address.detail_address.trim()) {
    ElMessage.warning("请完整填写寄回收件信息");
    return false;
  }
  return true;
}

async function submitManualOrder() {
  if (!validateManualForm()) return;
  manualSubmitting.value = true;
  try {
    const payload: AdminManualOrderCreatePayload = JSON.parse(JSON.stringify(manualForm.value));
    payload.product_info.brand_id = 0;
    payload.product_info.brand_name = payload.product_info.brand_name.trim();
    const response = await adminApi.createManualOrder(payload);
    ElMessage.success(`补录订单已创建：${response.data.order_no} / ${response.data.appraisal_no}`);
    manualDialogVisible.value = false;
    await fetchOrders();
  } catch (error) {
    console.error(error);
    ElMessage.error(error instanceof Error ? error.message : "补录订单创建失败");
  } finally {
    manualSubmitting.value = false;
  }
}

async function openDetail(row: AdminOrderListItem) {
  detailLoading.value = true;
  drawerVisible.value = true;
  try {
    const response = await adminApi.getOrderDetail(row.id);
    detail.value = response.data;
  } catch (error) {
    console.error(error);
    ElMessage.error("订单详情加载失败");
  } finally {
    detailLoading.value = false;
  }
}

async function reloadDetail() {
  if (!detail.value) return;
  detailLoading.value = true;
  try {
    const response = await adminApi.getOrderDetail(detail.value.order_info.id);
    detail.value = response.data;
  } catch (error) {
    console.error(error);
    ElMessage.error("订单详情刷新失败");
  } finally {
    detailLoading.value = false;
  }
}

async function markReceived() {
  if (!detail.value) return;
  receiveSubmitting.value = true;
  try {
    const response = await adminApi.receiveOrderLogistics(detail.value.order_info.id);
    ElMessage.success(response.message || "已标记签收");
    await reloadDetail();
    await fetchOrders();
  } catch (error) {
    console.error(error);
    ElMessage.error("标记签收失败");
  } finally {
    receiveSubmitting.value = false;
  }
}

async function openWarehouseDialog() {
  if (!detail.value) return;
  warehouseOptionsLoading.value = true;
  warehouseDialogVisible.value = true;
  selectedWarehouseId.value = detail.value.shipping_target?.warehouse_id || 0;
  try {
    const response = await adminApi.getOrderWarehouseOptions(detail.value.order_info.id);
    warehouseOptions.value = response.data.list;
  } catch (error) {
    console.error(error);
    ElMessage.error("仓库列表加载失败");
  } finally {
    warehouseOptionsLoading.value = false;
  }
}

async function submitWarehouseReassign() {
  if (!detail.value || !selectedWarehouseId.value) {
    ElMessage.warning("请先选择一个目标仓库");
    return;
  }

  try {
    await ElMessageBox.confirm("改派后，用户寄送页将展示新的收货仓库地址。确定继续吗？", "改派仓库", {
      type: "warning",
      confirmButtonText: "确认改派",
      cancelButtonText: "取消",
    });
  } catch {
    return;
  }

  warehouseSubmitting.value = true;
  try {
    const response = await adminApi.reassignOrderWarehouse(detail.value.order_info.id, selectedWarehouseId.value);
    ElMessage.success(response.message || "仓库已改派");
    warehouseDialogVisible.value = false;
    await reloadDetail();
  } catch (error) {
    console.error(error);
    ElMessage.error("仓库改派失败");
  } finally {
    warehouseSubmitting.value = false;
  }
}

async function openReturnDialog() {
  if (!detail.value) return;
  if (!canSubmitReturnLogistics.value) {
    ElMessage.warning(returnLogisticsBlockReason.value || "当前订单暂不支持登记回寄运单");
    return;
  }
  await ensureExpressCompanyOptions();
  returnExpressCompany.value = detail.value.return_logistics?.express_company || defaultExpressCompany.value || expressCompanyOptions.value[0]?.company_name || "";
  returnTrackingNo.value = detail.value.return_logistics?.tracking_no || "";
  returnRecognitionCandidates.value = [];
  returnDialogVisible.value = true;
  if (returnTrackingNo.value) {
    scheduleReturnRecognition();
  }
}

async function recognizeReturnExpressCompany() {
  const trackingNo = returnTrackingNo.value.trim();
  if (!returnDialogVisible.value || !trackingNo) {
    returnRecognitionCandidates.value = [];
    return;
  }

  returnRecognitionLoading.value = true;
  try {
    const response = await adminApi.recognizeExpressCompany({
      tracking_no: trackingNo,
      company_name: returnExpressCompany.value.trim(),
    });
    const result = response.data;
    returnRecognitionCandidates.value = result.candidates || [];
    if (result.resolved) {
      returnExpressCompany.value = result.resolved.company_name;
    } else if (result.candidates.length === 1) {
      returnExpressCompany.value = result.candidates[0].company_name;
    }
  } catch (error) {
    console.error(error);
    returnRecognitionCandidates.value = [];
  } finally {
    returnRecognitionLoading.value = false;
  }
}

function scheduleReturnRecognition() {
  if (returnRecognitionTimer) {
    clearTimeout(returnRecognitionTimer);
  }
  returnRecognitionTimer = setTimeout(() => {
    void recognizeReturnExpressCompany();
  }, 500);
}

function chooseReturnRecognitionCandidate(candidate: AdminExpressCompanyRecognitionCandidate) {
  returnExpressCompany.value = candidate.company_name;
  returnRecognitionCandidates.value = [candidate];
}

async function submitReturnLogistics() {
  if (!canSubmitReturnLogistics.value) {
    ElMessage.warning(returnLogisticsBlockReason.value || "当前订单暂不支持登记回寄运单");
    return;
  }
  if (!detail.value || !returnExpressCompany.value.trim() || !returnTrackingNo.value.trim()) {
    ElMessage.warning("请完整填写回寄快递公司和运单号");
    return;
  }

  returnSubmitting.value = true;
  try {
    const response = await adminApi.saveOrderReturnLogistics({
      id: detail.value.order_info.id,
      express_company: returnExpressCompany.value.trim(),
      tracking_no: returnTrackingNo.value.trim(),
    });
    ElMessage.success(response.message || "回寄运单已登记");
    returnDialogVisible.value = false;
    await reloadDetail();
    await fetchOrders();
  } catch (error) {
    console.error(error);
    ElMessage.error(error instanceof Error ? error.message : "回寄运单登记失败");
  } finally {
    returnSubmitting.value = false;
  }
}

watch(returnTrackingNo, () => {
  if (returnDialogVisible.value) {
    scheduleReturnRecognition();
  }
});

watch(() => manualForm.value.service_provider, () => {
  applyManualDefaultPackage(true);
});

onBeforeUnmount(() => {
  if (returnRecognitionTimer) {
    clearTimeout(returnRecognitionTimer);
  }
});

async function markReturnReceived() {
  if (!detail.value) return;
  returnReceiveSubmitting.value = true;
  try {
    const response = await adminApi.receiveOrderReturnLogistics(detail.value.order_info.id);
    ElMessage.success(response.message || "已标记用户签收");
    await reloadDetail();
    await fetchOrders();
  } catch (error) {
    console.error(error);
    ElMessage.error("标记用户签收失败");
  } finally {
    returnReceiveSubmitting.value = false;
  }
}

onMounted(fetchOrders);
</script>

<template>
  <el-card class="panel-card" shadow="never">
    <div class="filters-row">
      <el-input v-model="keyword" placeholder="搜索订单号 / 鉴定单号 / 商品名称" clearable style="width: 320px" />
      <el-input v-model="trackingNo" placeholder="搜索快递单号" clearable style="width: 180px" />
      <el-input v-model="userMobile" placeholder="搜索用户电话" clearable style="width: 180px" />
      <el-select v-model="serviceProvider" placeholder="服务类型" style="width: 160px">
        <el-option v-for="item in providerOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="status" placeholder="订单状态" style="width: 160px">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="sourceChannel" placeholder="下单渠道" style="width: 170px">
        <el-option v-for="item in sourceChannelOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" @click="fetchOrders">查询</el-button>
      <el-button @click="openManualDialog">补录订单</el-button>
    </div>
  </el-card>

  <el-card class="panel-card orders-table" shadow="never">
    <el-table v-loading="loading" :data="orders" stripe>
      <el-table-column prop="order_no" label="订单号" min-width="170" />
      <el-table-column prop="appraisal_no" label="鉴定单号" min-width="180" />
      <el-table-column prop="product_name" label="商品名称" min-width="220" />
      <el-table-column prop="service_provider_text" label="服务类型" min-width="120" />
      <el-table-column prop="price_package_name" label="价格套餐" min-width="150">
        <template #default="{ row }">{{ row.price_package_name || "-" }}</template>
      </el-table-column>
      <el-table-column label="下单渠道" min-width="150">
        <template #default="{ row }">
          <span>{{ row.source_channel_text }}</span>
          <div v-if="row.source_customer_id" class="table-subtext">客户ID：{{ row.source_customer_id }}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" min-width="150">
        <template #default="{ row }">
          <OrderStatusTag :status="row.display_status" />
        </template>
      </el-table-column>
      <el-table-column prop="estimated_finish_time" label="预计完成时间" min-width="170" />
      <el-table-column prop="pay_amount" label="金额" min-width="100">
        <template #default="{ row }">¥{{ row.pay_amount }}</template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="170" />
      <el-table-column label="操作" fixed="right" width="110">
        <template #default="{ row }">
          <el-button link type="primary" @click="openDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-drawer v-model="drawerVisible" size="68%" title="订单详情">
    <div v-loading="detailLoading" v-if="detail" class="order-detail-shell">
      <div class="detail-card order-detail-hero">
        <div class="order-detail-hero__main">
          <div class="order-detail-hero__eyebrow">订单履约工作区</div>
          <div class="order-detail-hero__title">{{ productTitle }}</div>
          <div class="order-detail-hero__meta">{{ productMetaText }}</div>
        </div>
        <div class="order-detail-hero__side">
          <div class="order-detail-hero__tags">
            <OrderStatusTag :status="detail.order_info.display_status" />
            <span class="order-detail-chip">{{ detail.order_info.service_provider_text }}</span>
          </div>
          <div class="order-detail-hero__actions">
            <el-button
              v-if="canMarkReceived"
              type="primary"
              :loading="receiveSubmitting"
              @click="markReceived"
            >
              标记鉴定中心签收
            </el-button>
            <el-button
              v-if="detail.order_info.can_reassign_warehouse"
              type="primary"
              plain
              :loading="warehouseOptionsLoading"
              @click="openWarehouseDialog"
            >
              手动改派仓库
            </el-button>
            <el-button
              v-if="canSubmitReturnLogistics || returnLogisticsBlockReason"
              type="primary"
              plain
              :disabled="!canSubmitReturnLogistics"
              @click="openReturnDialog"
            >
              {{ detail.return_logistics?.tracking_no ? '更新回寄运单' : '登记回寄运单' }}
            </el-button>
            <el-button
              v-if="canMarkReturnReceived"
              type="primary"
              :loading="returnReceiveSubmitting"
              @click="markReturnReceived"
            >
              标记用户签收
            </el-button>
          </div>
        </div>
      </div>

      <div class="detail-grid">
      <div class="detail-card">
        <div class="detail-card__title">订单概览</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">订单号</div>
            <div class="order-detail-item__value">{{ detail.order_info.order_no }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">鉴定单号</div>
            <div class="order-detail-item__value">{{ detail.order_info.appraisal_no }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">服务类型</div>
            <div class="order-detail-item__value">{{ detail.order_info.service_provider_text }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">价格套餐</div>
            <div class="order-detail-item__value">{{ detail.order_info.price_package_name || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">下单渠道</div>
            <div class="order-detail-item__value">{{ detail.order_info.source_channel_text || "-" }}</div>
          </div>
          <div class="order-detail-item" v-if="detail.order_info.source_customer_id">
            <div class="order-detail-item__label">大客户客户 ID</div>
            <div class="order-detail-item__value">{{ detail.order_info.source_customer_id }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">当前状态</div>
            <div class="order-detail-item__value"><OrderStatusTag :status="detail.order_info.display_status" /></div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">订单金额</div>
            <div class="order-detail-item__value">¥{{ detail.order_info.pay_amount }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">预计完成</div>
            <div class="order-detail-item__value">{{ detail.order_info.estimated_finish_time || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card">
        <div class="detail-card__title">商品信息</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">商品名称</div>
            <div class="order-detail-item__value">{{ detail.product_info.product_name || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">品类 / 品牌</div>
            <div class="order-detail-item__value">{{ detail.product_info.category_name || "-" }} / {{ detail.product_info.brand_name || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">颜色 / 规格</div>
            <div class="order-detail-item__value">{{ detail.product_info.color || "-" }} / {{ detail.product_info.size_spec || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card">
        <div class="detail-card__title">补充信息</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">购买渠道</div>
            <div class="order-detail-item__value">{{ detail.extra_info.purchase_channel || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">购买价格</div>
            <div class="order-detail-item__value">¥{{ detail.extra_info.purchase_price }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">使用情况</div>
            <div class="order-detail-item__value">{{ usageStatusText }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">补充说明</div>
            <div class="order-detail-item__value">{{ detail.extra_info.condition_desc || detail.extra_info.remark || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card" v-if="detail.shipping_target">
        <div class="detail-card__title">收货仓库</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">仓库名称 / 编码</div>
            <div class="order-detail-item__value">{{ detail.shipping_target.warehouse_name }} / {{ detail.shipping_target.warehouse_code }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">收件人 / 联系电话</div>
            <div class="order-detail-item__value">{{ detail.shipping_target.receiver_name }} / {{ detail.shipping_target.receiver_mobile }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">收件地址</div>
            <div class="order-detail-item__value">{{ detail.shipping_target.full_address }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">服务时间</div>
            <div class="order-detail-item__value">{{ detail.shipping_target.service_time }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card">
        <div class="detail-card__title">寄回地址</div>
        <div v-if="detail.return_address" class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">收件人 / 联系电话</div>
            <div class="order-detail-item__value">{{ detail.return_address.consignee }} / {{ detail.return_address.mobile }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">寄回地址</div>
            <div class="order-detail-item__value">{{ detail.return_address.full_address }}</div>
          </div>
        </div>
        <el-empty v-else description="用户暂未确认寄回地址" :image-size="64" />
      </div>

      <div class="detail-card" v-if="detail.logistics_info">
        <div class="detail-card__title">物流信息</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">快递公司 / 运单号</div>
            <div class="order-detail-item__value">{{ detail.logistics_info.express_company || "-" }} / {{ detail.logistics_info.tracking_no || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">物流状态</div>
            <div class="order-detail-item__value">{{ logisticsActionText }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">快递100状态</div>
            <div class="order-detail-item__value">{{ detail.logistics_info.provider_status_text || detail.logistics_info.sync_status_text || "-" }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">最新节点</div>
            <div class="order-detail-item__value">{{ detail.logistics_info.latest_desc || "-" }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full" v-if="detail.logistics_info.sync_error">
            <div class="order-detail-item__label">同步异常</div>
            <div class="order-detail-item__value">{{ detail.logistics_info.sync_error }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full" v-if="detail.logistics_info.latest_time">
            <div class="order-detail-item__label">最新更新时间</div>
            <div class="order-detail-item__value">{{ detail.logistics_info.latest_time }}</div>
          </div>
        </div>
        <div v-if="canMarkReceived" class="detail-card__desc" style="margin-top: 16px;">
          <el-alert title="待签收操作" description="物流信息已提交，确认鉴定中心实际收货后再执行签收。" type="warning" :closable="false" show-icon />
        </div>
      </div>

      <div class="detail-card" v-if="detail.return_logistics">
        <div class="detail-card__title">回寄物流</div>
        <div class="order-detail-grid">
          <div class="order-detail-item">
            <div class="order-detail-item__label">快递公司 / 运单号</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.express_company || "-" }} / {{ detail.return_logistics.tracking_no || "-" }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">物流状态</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.tracking_status_text }}</div>
          </div>
          <div class="order-detail-item">
            <div class="order-detail-item__label">快递100状态</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.provider_status_text || detail.return_logistics.sync_status_text || "-" }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full">
            <div class="order-detail-item__label">最新节点</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.latest_desc || "-" }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full" v-if="detail.return_logistics.sync_error">
            <div class="order-detail-item__label">同步异常</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.sync_error }}</div>
          </div>
          <div class="order-detail-item order-detail-item--full" v-if="detail.return_logistics.latest_time">
            <div class="order-detail-item__label">最新更新时间</div>
            <div class="order-detail-item__value">{{ detail.return_logistics.latest_time }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card" v-if="detail.report_summary">
        <div class="detail-card__title">报告信息</div>
        <el-alert
          v-if="returnLogisticsBlockReason"
          type="warning"
          :closable="false"
          show-icon
          :title="returnLogisticsBlockReason"
          description="请先在报告中心发布订单报告，发布后再登记回寄运单。"
          style="margin-top: 12px;"
        />
        <div class="detail-card__desc">
          <div class="detail-label">报告编号</div>
          <div class="detail-value">{{ detail.report_summary.report_no }}</div>
        </div>
        <div class="detail-card__desc">
          <div class="detail-label">报告标题</div>
          <div class="detail-value">{{ detail.report_summary.report_title }}</div>
        </div>
        <div class="detail-card__desc">
          <div class="detail-label">发布时间</div>
          <div class="detail-value">{{ detail.report_summary.publish_time }}</div>
        </div>
      </div>

      <div class="detail-card" style="grid-column: 1 / -1">
        <div class="detail-card__title">时间轴</div>
        <div class="timeline-list" style="margin-top: 14px">
          <div v-for="item in detail.timeline" :key="`${item.node_text}-${item.occurred_at}`" class="timeline-node">
            <div class="timeline-node__title">{{ item.node_text }}</div>
            <div class="timeline-node__time">{{ item.occurred_at }}</div>
            <div class="timeline-node__desc">{{ item.node_desc }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card" v-if="detail.logistics_info" style="grid-column: 1 / -1">
        <div class="detail-card__title">物流轨迹</div>
        <div class="timeline-list" style="margin-top: 14px">
          <div v-for="item in detail.logistics_info.nodes" :key="`${item.node_time}-${item.node_desc}`" class="timeline-node">
            <div class="timeline-node__title">{{ item.node_desc }}</div>
            <div class="timeline-node__time">{{ item.node_time }}</div>
            <div class="timeline-node__desc">{{ item.node_location || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="detail-card" v-if="detail.return_logistics" style="grid-column: 1 / -1">
        <div class="detail-card__title">回寄物流轨迹</div>
        <div v-if="detail.return_logistics.nodes.length" class="timeline-list" style="margin-top: 14px">
          <div v-for="item in detail.return_logistics.nodes" :key="`${item.node_time}-${item.node_desc}`" class="timeline-node">
            <div class="timeline-node__title">{{ item.node_desc }}</div>
            <div class="timeline-node__time">{{ item.node_time }}</div>
            <div class="timeline-node__desc">{{ item.node_location || "-" }}</div>
          </div>
        </div>
        <el-empty v-else description="暂无回寄物流轨迹" :image-size="64" />
      </div>

      <div class="detail-card" v-if="detail.supplement_task" style="grid-column: 1 / -1">
        <div class="detail-card__title">补图任务</div>
        <div class="detail-card__desc">
          <div class="detail-label">补图原因</div>
          <div class="detail-value">{{ detail.supplement_task.reason }}</div>
        </div>
        <div class="detail-card__desc">
          <div class="detail-label">截止时间</div>
          <div class="detail-value">{{ detail.supplement_task.deadline }}</div>
        </div>
        <div class="timeline-list" style="margin-top: 14px">
          <div v-for="item in detail.supplement_task.items" :key="item.item_name" class="timeline-node">
            <div class="timeline-node__title">{{ item.item_name }}</div>
            <div class="timeline-node__desc">{{ item.guide_text }}</div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </el-drawer>

  <el-dialog v-model="warehouseDialogVisible" title="改派收货仓库" width="720px">
    <div v-loading="warehouseOptionsLoading" style="display: grid; gap: 14px;">
      <div
        v-for="item in warehouseOptions"
        :key="item.id"
        :style="{
          border: selectedWarehouseId === item.id ? '1px solid #c8a45d' : '1px solid var(--admin-border)',
          borderRadius: '14px',
          padding: '16px 18px',
          cursor: 'pointer',
          background: selectedWarehouseId === item.id ? 'rgba(200, 164, 93, 0.08)' : '#fff',
        }"
        @click="selectedWarehouseId = item.id"
      >
        <div style="display:flex; justify-content:space-between; gap: 16px; align-items:center;">
          <div style="font-weight:700;">{{ item.warehouse_name }}</div>
          <div style="color: var(--admin-text-subtle);">{{ item.is_default ? '默认仓库' : '可选仓库' }}</div>
        </div>
        <div style="margin-top: 8px; color: var(--admin-text-subtle);">{{ item.service_provider_text }} / {{ item.warehouse_code }}</div>
        <div style="margin-top: 8px;">{{ item.receiver_name }} / {{ item.receiver_mobile }}</div>
        <div style="margin-top: 8px;">{{ item.full_address }}</div>
        <div style="margin-top: 8px; color: var(--admin-text-subtle);">{{ item.service_time }}</div>
      </div>
    </div>
    <template #footer>
      <el-button @click="warehouseDialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="warehouseSubmitting" @click="submitWarehouseReassign">确认改派</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="returnDialogVisible" title="登记回寄运单" width="520px">
    <el-form label-position="top">
      <el-form-item label="回寄快递公司">
        <el-select
          v-model="returnExpressCompany"
          :loading="expressCompanyLoading"
          filterable
          placeholder="请选择回寄快递公司"
          style="width: 100%"
        >
          <el-option
            v-for="item in expressCompanySelectOptions"
            :key="`${item.id}-${item.company_name}`"
            :label="item.company_name"
            :value="item.company_name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="回寄运单号">
        <el-input v-model="returnTrackingNo" placeholder="请输入回寄运单号" />
      </el-form-item>
      <div v-if="returnRecognitionLoading" style="margin: -8px 0 12px; color: var(--admin-text-subtle); font-size: 12px;">
        正在识别快递公司...
      </div>
      <div v-if="returnRecognitionCandidates.length" style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;">
        <el-tag
          v-for="candidate in returnRecognitionCandidates"
          :key="`${candidate.company_code}-${candidate.company_name}`"
          effect="plain"
          style="cursor: pointer;"
          @click="chooseReturnRecognitionCandidate(candidate)"
        >
          {{ candidate.company_name }}
        </el-tag>
      </div>
      <el-alert
        v-if="detail?.return_address"
        type="info"
        :closable="false"
        show-icon
        title="当前寄回地址"
        :description="`${detail.return_address.consignee} / ${detail.return_address.mobile} / ${detail.return_address.full_address}`"
      />
      <el-alert
        v-else
        type="warning"
        :closable="false"
        show-icon
        title="用户尚未确认寄回地址"
        description="请先提醒用户在订单详情中确认寄回地址，再登记回寄运单。"
      />
    </el-form>
    <template #footer>
      <el-button @click="returnDialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="returnSubmitting" :disabled="!canSubmitReturnLogistics" @click="submitReturnLogistics">确认登记</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="manualDialogVisible" title="补录订单" width="860px" destroy-on-close>
    <div v-loading="manualMetaLoading" class="manual-order-form">
      <el-alert
        type="info"
        :closable="false"
        show-icon
        title="补录订单创建后为待入库状态"
        description="创建成功后，可在入库台使用订单号或鉴定单号匹配并绑定内部流转挂牌，不需要填写寄入快递单号。"
      />

      <div class="manual-section">
        <div class="manual-section__title">订单与商品</div>
        <el-form label-position="top">
          <div class="manual-grid">
            <el-form-item label="服务类型">
              <el-select v-model="manualForm.service_provider" style="width: 100%">
                <el-option label="实物鉴定" value="anxinyan" />
                <el-option label="中检鉴定" value="zhongjian" />
              </el-select>
            </el-form-item>
            <el-form-item label="价格套餐">
              <el-select
                v-model="manualForm.price_package_id"
                style="width: 100%"
                :disabled="manualServicePackages.length === 0"
                @change="applyManualDefaultPackage(false)"
              >
                <el-option
                  v-for="item in manualServicePackages"
                  :key="item.id"
                  :label="`${item.package_name} / ¥${item.price}`"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="品类">
              <el-select v-model="manualForm.product_info.category_id" filterable style="width: 100%">
                <el-option v-for="item in manualMeta.categories" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="品牌（选填）">
              <el-input v-model="manualForm.product_info.brand_name" maxlength="128" placeholder="请输入品牌名称，可不填" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="manualForm.product_info.product_name" placeholder="可选，例如：Classic Flap 手袋" />
            </el-form-item>
            <el-form-item label="颜色">
              <el-input v-model="manualForm.product_info.color" placeholder="可选" />
            </el-form-item>
            <el-form-item label="规格 / 尺寸">
              <el-input v-model="manualForm.product_info.size_spec" placeholder="可选" />
            </el-form-item>
            <el-form-item label="序列号">
              <el-input v-model="manualForm.product_info.serial_no" placeholder="可选" />
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="manual-section">
        <div class="manual-section__title">寄回信息</div>
        <el-form label-position="top">
          <el-form-item label="自动识别寄回地址">
            <div class="manual-address-recognition">
              <el-input
                v-model="manualAddressRecognitionText"
                type="textarea"
                :rows="5"
                resize="none"
                placeholder="粘贴收货人、收货电话、收货地址，自动识别后填入下方字段"
              />
              <el-button @click="applyRecognizedManualAddress">识别并填入</el-button>
            </div>
          </el-form-item>
          <div class="manual-grid">
            <el-form-item label="收件人">
              <el-input v-model="manualForm.return_address.consignee" placeholder="用于匹配或创建用户" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="manualForm.return_address.mobile" placeholder="按手机号复用已有用户" />
            </el-form-item>
            <el-form-item label="省份">
              <el-input v-model="manualForm.return_address.province" placeholder="例如：广东省" />
            </el-form-item>
            <el-form-item label="城市">
              <el-input v-model="manualForm.return_address.city" placeholder="例如：深圳市" />
            </el-form-item>
            <el-form-item label="区县">
              <el-input v-model="manualForm.return_address.district" placeholder="例如：南山区" />
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="manualForm.return_address.detail_address" placeholder="街道、门牌号" />
            </el-form-item>
          </div>
        </el-form>
      </div>

    </div>
    <template #footer>
      <el-button @click="manualDialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="manualSubmitting" :disabled="manualMetaLoading" @click="submitManualOrder">创建补录订单</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.order-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(200, 164, 93, 0.12), transparent 30%),
    linear-gradient(135deg, #fffdfa 0%, #fbf8f1 100%);
}

.order-detail-hero__main {
  min-width: 0;
}

.order-detail-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(200, 164, 93, 0.12);
  color: #7a5a21;
  font-size: 12px;
  font-weight: 700;
}

.order-detail-hero__title {
  margin-top: 14px;
  color: var(--admin-text-main);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

.order-detail-hero__meta {
  margin-top: 10px;
  color: var(--admin-text-subtle);
  font-size: 14px;
  line-height: 1.6;
}

.order-detail-hero__side {
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.order-detail-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.order-detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.order-detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(72, 104, 133, 0.1);
  color: var(--admin-progress);
  font-size: 12px;
  font-weight: 700;
}

.table-subtext {
  margin-top: 4px;
  color: var(--admin-text-subtle);
  font-size: 12px;
  line-height: 1.4;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.order-detail-item {
  padding: 14px 16px;
  border: 1px solid #efe8d9;
  border-radius: 16px;
  background: #fcfaf5;
}

.order-detail-item--full {
  grid-column: 1 / -1;
}

.order-detail-item__label {
  color: var(--admin-text-subtle);
  font-size: 12px;
}

.order-detail-item__value {
  margin-top: 8px;
  color: var(--admin-text-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.manual-order-form {
  display: grid;
  gap: 18px;
}

.manual-section {
  display: grid;
  gap: 14px;
}

.manual-section__title {
  color: var(--admin-text-main);
  font-size: 16px;
  font-weight: 800;
}

.manual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.manual-address-recognition {
  display: grid;
  gap: 10px;
}

.manual-address-recognition .el-button {
  justify-self: flex-start;
}

.manual-upload-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.manual-upload-hint {
  color: var(--admin-text-subtle);
  font-size: 13px;
}

.manual-file-list {
  display: grid;
  gap: 10px;
}

.manual-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #fffdfa;
}

.manual-file-item span {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text-main);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .order-detail-hero {
    grid-template-columns: 1fr;
    display: grid;
  }

  .order-detail-hero__side {
    min-width: 0;
    align-items: flex-start;
  }

  .order-detail-hero__tags,
  .order-detail-hero__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .manual-grid {
    grid-template-columns: 1fr;
  }
}
</style>
