hw/app/templates/csv/import_preview.html

{% extends "base.html" %}

{% block title %}HappyWedding{% endblock %}

{% block content %}
  <section class="mb-8">
    <div class="flex items-center gap-2">
      <h2 class="mb-0 text-2xl font-semibold text-warm-800">CSV 导入导出</h2>
      {% if preview %}
        <span class="status-badge status-badge-muted">预览中</span>
      {% endif %}
    </div>
  </section>

  <section class="mb-8">
    <div class="card shadow-soft">
      <div class="card-body space-y-4">
        <form action="{{ url_for('csv.preview_households_import') }}" method="post" enctype="multipart/form-data" class="space-y-4">
          <div>
            <label for="csv-file" class="form-label">上传 CSV 文件</label>
            <input id="csv-file" name="file" type="file" accept=".csv,text/csv" class="form-input">
            <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">UTF-8 / 5 MB 内 / 模板全字段</p>
          </div>
          <button type="submit" class="btn btn-primary">生成导入预览</button>
        </form>
      </div>
    </div>
  </section>

  {% if preview %}
    <section class="card mb-8 shadow-soft">
      <div class="card-body space-y-6">
        <div>
          <h3 class="text-xl font-semibold text-warm-800">导入预览</h3>
          <p class="mt-2 text-sm text-warm-600">{{ preview.file_name }} · {{ preview.total_rows }} 行</p>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
          <div class="rounded-2xl border border-green-200 bg-green-50 p-4 shadow-soft">
            <div class="text-sm text-green-700">可新增</div>
            <div class="mt-1 text-2xl font-bold text-green-800">{{ preview.summary.create_count }}</div>
          </div>
          <div class="rounded-2xl border border-blue-200 bg-blue-50 p-4 shadow-soft">
            <div class="text-sm text-blue-700">按编码可更新</div>
            <div class="mt-1 text-2xl font-bold text-blue-800">{{ preview.summary.update_count }}</div>
          </div>
          <div class="rounded-2xl border border-gold-200 bg-gold-50 p-4 shadow-soft">
            <div class="text-sm text-gold-700">冲突待处理</div>
            <div class="mt-1 text-2xl font-bold text-gold-700">{{ preview.summary.conflict_count }}</div>
          </div>
          <div class="rounded-2xl border border-festive-200 bg-festive-50 p-4 shadow-soft">
            <div class="text-sm text-festive-700">无效行</div>
            <div class="mt-1 text-2xl font-bold text-festive-700">{{ preview.summary.invalid_count }}</div>
          </div>
        </div>

        <form action="{{ url_for('csv.confirm_households_import') }}" method="post" class="space-y-4">
          <input type="hidden" name="preview_token" value="{{ preview.token }}">
          <div>
            <label for="conflict-mode" class="form-label">冲突处理方式</label>
            <select id="conflict-mode" name="conflict_mode" class="form-select">
              {% for mode_value, mode_label, mode_hint in conflict_modes %}
                <option value="{{ mode_value }}">{{ mode_label }}：{{ mode_hint }}</option>
              {% endfor %}
            </select>
          </div>
          <button type="submit" class="btn btn-primary">确认导入</button>
        </form>
      </div>
    </section>

    <section class="space-y-6">
      {% for row in preview.rows %}
        <article class="card shadow-soft {% if row.status == 'invalid' %}border-festive-300{% elif row.status == 'conflict' %}border-gold-300{% elif row.status == 'update' %}border-blue-300{% else %}border-green-300{% endif %}">
          <div class="card-body space-y-3">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <h4 class="text-lg font-semibold text-warm-800">第 {{ row.row_number }} 行</h4>
              <span class="rounded-full px-3 py-1 text-xs font-medium {% if row.status == 'invalid' %}bg-festive-100 text-festive-700{% elif row.status == 'conflict' %}bg-gold-100 text-gold-700{% elif row.status == 'update' %}bg-blue-100 text-blue-700{% else %}bg-green-100 text-green-700{% endif %}">
                {% if row.status == 'invalid' %}无效{% elif row.status == 'conflict' %}冲突{% elif row.status == 'update' %}更新候选{% else %}新增候选{% endif %}
              </span>
            </div>

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
              <div>
                <h5 class="mb-2 text-sm font-medium text-warm-700">CSV 原始数据</h5>
                <dl class="space-y-1 text-sm text-warm-600">
                  {% for key, value in row.raw.items() %}
                    <div><span class="font-medium text-warm-700">{{ key }}</span>：{{ value or '-' }}</div>
                  {% endfor %}
                </dl>
              </div>

              <div class="space-y-3">
                {% if row.matched_household %}
                  <div class="rounded-xl border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
                    已匹配现有户编码：{{ row.matched_household.household_code }} / {{ row.matched_household.head_name }}
                  </div>
                {% endif %}
                {% if row.conflict_household %}
                  <div class="rounded-xl border border-gold-200 bg-gold-50 p-3 text-sm text-gold-700">
                    检测到疑似冲突：{{ row.conflict_household.household_code }} / {{ row.conflict_household.head_name }} / {{ row.conflict_household.phone or '未登记电话' }}
                  </div>
                {% endif %}
                {% if row.errors %}
                  <div class="rounded-xl border border-festive-200 bg-festive-50 p-3 text-sm text-festive-700">
                    <div class="mb-2 font-medium">错误列表</div>
                    <ul class="list-inside list-disc space-y-1">
                      {% for error in row.errors %}
                        <li>{{ error }}</li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </article>
      {% endfor %}
    </section>
  {% endif %}
{% endblock %}