<script setup lang="ts">
import type { AdminFulfillmentLookupItem, AdminFulfillmentLookupResult } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'

defineProps<{
  lookupLoading: boolean
  lookupErrorMessage: string
  lookupResult: AdminFulfillmentLookupResult | null
  lookupForm: {
    shopId: string
    platformOrderId: string
  }
  isLookupProductImported: (lineId: string) => boolean
}>()

const emit = defineEmits<{
  lookup: []
  importProduct: [item: AdminFulfillmentLookupItem]
}>()
</script>

<template>
  <section class="table-card table-card--dense">
    <div class="section-title-row section-title-row--tight">
      <div>
        <h3>手动补查订单商品</h3>
        <p>新商品还没配规则时，可以按店铺 ID 和平台订单号临时补查，查完直接导入规则草稿。</p>
      </div>
      <span class="section-note-chip">仅支持 Agiso 咸鱼订单</span>
    </div>

    <div class="lookup-toolbar">
      <label class="field-block">
        <span>渠道</span>
        <el-input class="text-input" model-value="agiso" disabled />
      </label>

      <label class="field-block">
        <span>平台</span>
        <el-input class="text-input" model-value="xianyu" disabled />
      </label>

      <label class="field-block">
        <span>店铺 ID</span>
        <el-input
          v-model="lookupForm.shopId"
          class="text-input"
          placeholder="例如 252609"
          @keydown.enter.prevent="emit('lookup')"
        />
      </label>

      <label class="field-block">
        <span>平台订单号</span>
        <el-input
          v-model="lookupForm.platformOrderId"
          class="text-input"
          placeholder="输入需要补查的订单号"
          @keydown.enter.prevent="emit('lookup')"
        />
      </label>

      <div class="field-block field-block--action">
        <span>操作</span>
        <el-button :loading="lookupLoading" round type="primary" @click="emit('lookup')"
          >查询订单商品</el-button
        >
      </div>
    </div>

    <p class="toolbar-hint">查询结果只用于补配置，不会写入订单库，也不会影响现有订单数据。</p>

    <p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p>
    <div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情…</div>
    <template v-else-if="lookupResult">
      <div class="lookup-summary">
        <div class="lookup-summary-item">
          <span class="summary-label">订单</span>
          <strong>{{ lookupResult.order.platformOrderId }}</strong>
          <span class="cell-subtle">{{
            lookupResult.order.shopName || lookupResult.order.shopId || '-'
          }}</span>
        </div>
        <div class="lookup-summary-item">
          <span class="summary-label">买家</span>
          <strong>{{ lookupResult.order.buyerName || '-' }}</strong>
          <span class="cell-subtle"
            >支付时间：{{ formatAdminDateTime(lookupResult.order.paidAt) }}</span
          >
        </div>
        <div class="lookup-summary-item">
          <span class="summary-label">金额</span>
          <strong>{{ lookupResult.order.totalAmount || '0.00' }}</strong>
          <span class="cell-subtle"
            >补查结果：{{
              lookupResult.order.enriched ? '已补全' : lookupResult.order.enrichReason || '已返回'
            }}</span
          >
        </div>
      </div>

      <el-table
        :data="lookupResult.items"
        class="data-table element-data-table"
        empty-text="暂无订单商品"
      >
        <el-table-column label="外部商品" min-width="260">
          <template #default="{ row: item }">
            <div class="cell-stack">
              <strong>{{
                item.externalSkuName ||
                item.itemTitle ||
                item.externalSkuCode ||
                item.externalItemId ||
                '-'
              }}</strong>
              <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
              <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="90" />
        <el-table-column label="识别结果" min-width="220">
          <template #default="{ row: item }">
            <div class="cell-stack">
              <strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
              <span v-if="item.matchedBinding" class="cell-subtle">
                {{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} /
                {{ item.matchedBinding.profileKey || '-' }}
              </span>
              <span v-else class="cell-subtle">可直接导入成新规则草稿</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template #default="{ row: item }">
            <el-button
              v-if="!item.configured && !isLookupProductImported(item.lineId)"
              link
              type="primary"
              @click="emit('importProduct', item)"
            >
              导入到规则
            </el-button>
            <span v-else-if="item.configured" class="cell-subtle">已存在</span>
            <span v-else class="cell-subtle">已导入草稿</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </section>
</template>

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