<script setup lang="ts">
import type { AdminNinetyoneOrderItem } from '@/types/admin'

defineProps<{
  ninetyoneLookupLoading: boolean
  ninetyoneLookupErrorMessage: string
  ninetyoneLookupResults: AdminNinetyoneOrderItem[]
  ninetyoneLookupMetrics: {
    total: number
    importedCount: number
    availableCount: number
    pendingCount: number
  }
  ninetyoneLookupForm: {
    status: 'pending_config' | 'all' | 'manual_failed'
    page: number
    pageSize: number
  }
  isImported: (item: AdminNinetyoneOrderItem) => boolean
}>()

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

<template>
  <section class="table-card table-card--dense">
    <div class="section-title-row section-title-row--tight">
      <div>
        <h3>91卡券订单取样导入</h3>
        <p>查询已接收的 91卡券订单，把 productNo 导入为规则草稿，再补齐内部 SKU 和 cloud 资源。</p>
      </div>
      <div class="section-mini-stats">
        <span class="mini-stat-chip">结果 {{ ninetyoneLookupMetrics.total }}</span>
        <span class="mini-stat-chip">待补 {{ ninetyoneLookupMetrics.pendingCount }}</span>
        <span class="mini-stat-chip">待导入 {{ ninetyoneLookupMetrics.availableCount }}</span>
      </div>
    </div>

    <div class="lookup-toolbar">
      <label class="field-block">
        <span>订单状态</span>
        <el-select v-model="ninetyoneLookupForm.status" class="text-input">
          <el-option label="待补全" value="pending_config" />
          <el-option label="已失败" value="manual_failed" />
          <el-option label="全部" value="all" />
        </el-select>
      </label>
      <label class="field-block">
        <span>页码</span>
        <el-input-number
          v-model="ninetyoneLookupForm.page"
          class="text-input"
          :min="1"
          controls-position="right"
        />
      </label>
      <label class="field-block">
        <span>每页条数</span>
        <el-input-number
          v-model="ninetyoneLookupForm.pageSize"
          class="text-input"
          :max="100"
          :min="1"
          controls-position="right"
        />
      </label>
      <div class="field-block field-block--action">
        <span>操作</span>
        <el-button :loading="ninetyoneLookupLoading" round type="primary" @click="emit('lookup')"
          >查询 91卡券订单</el-button
        >
      </div>
    </div>

    <p class="toolbar-hint">
      导入后会创建 provider=91kaquan、platform=kuaishou、外部 SKU=productNo
      的规则草稿；保存规则后，回到"平台配置 -> 91卡券接入"重试订单。
    </p>

    <p v-if="ninetyoneLookupErrorMessage" class="error-copy lookup-error">
      {{ ninetyoneLookupErrorMessage }}
    </p>
    <div v-else-if="ninetyoneLookupLoading" class="empty-inline">正在查询 91卡券订单…</div>

    <el-table
      v-else
      :data="ninetyoneLookupResults"
      class="data-table element-data-table"
      empty-text="还没有 91卡券查询结果。"
    >
      <el-table-column label="订单" min-width="180">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{ item.orderNo || '-' }}</strong>
            <span class="cell-subtle">{{ item.outTradeNo || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="来源" min-width="180">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{ item.shopName || '91卡券' }}</strong>
            <span class="cell-subtle">provider: 91kaquan</span>
            <span class="cell-subtle">shopId: {{ item.shopId || '91kaquan' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品" min-width="240">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{ item.productName || item.productNo || '-' }}</strong>
            <span class="cell-subtle">productNo: {{ item.productNo || '-' }}</span>
            <span class="cell-subtle">数量：{{ item.buyNum || 0 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="120">
        <template #default="{ row: item }">
          <div class="cell-stack">
            <strong>{{ item.orderStatus || '-' }}</strong>
            <span class="cell-subtle">任务 {{ item.taskCount || 0 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="{ row: item }">
          <el-button
            v-if="!isImported(item)"
            link
            type="primary"
            @click="emit('importProduct', item)"
          >
            导入到规则
          </el-button>
          <span v-else class="cell-subtle">已导入草稿</span>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

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