<script setup lang="ts">
type Props = {
  form: {
    proofValue: string
    skuCode: string
    remark: string
  }
  suggestions: { credentialType: string; inventoryGroupCode: string; skuCode: string; availableCount: number; totalCount: number }[]
  canCreateTask: boolean
  createLoading: boolean
  createTaskNow: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <section class="create-card">
    <div class="card-head">
      <div>
        <h2>1. 创建人工兑换任务</h2>
        <p>先录入唯一凭据并锁定库存，后续二维码、角色确认和兑换都基于这条任务继续。</p>
      </div>
    </div>

    <div class="form-grid">
      <div class="field">
        <span>唯一凭据</span>
        <el-input
          v-model="form.proofValue"
          placeholder="输入订单号、客户名或其他唯一可追踪信息"
        />
      </div>

      <div class="field">
        <span>内部履约 SKU</span>
        <el-input
          v-model="form.skuCode"
          list="manual-redeem-sku-suggestions"
          placeholder="选择或输入内部履约 SKU"
        />
        <datalist id="manual-redeem-sku-suggestions">
          <option
            v-for="item in suggestions"
            :key="`${item.credentialType}-${item.inventoryGroupCode}-${item.skuCode}`"
            :value="item.skuCode"
            :label="`${item.skuCode} · ${item.inventoryGroupCode || '未分组'} · 可用 ${item.availableCount} / 共 ${item.totalCount}`"
          />
        </datalist>
      </div>

      <div class="field field-remark">
        <span>备注</span>
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="3"
          placeholder="可选：记录客户补充信息、兑换要求或客服备注"
        />
      </div>
    </div>

    <div class="action-row">
      <el-button
        :disabled="!canCreateTask"
        :loading="createLoading"
        round
        type="primary"
        @click="createTaskNow"
      >
        创建任务并预占库存
      </el-button>
    </div>
  </section>
</template>

<style scoped>
.create-card {
  padding: 22px var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.card-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.card-head p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.form-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.field-remark {
  grid-column: 1 / -1;
}

.action-row {
  margin-top: 18px;
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>
