<script setup lang="ts">
/**
 * 文件职责：交易流水导出确认弹窗。
 */
import type { QuickDateRangeKey } from '../types';

import { computed } from 'vue';

import { Modal } from 'ant-design-vue';

import {
  QUICK_RANGE_OPTIONS,
  TRANSACTION_CHANNEL_OPTIONS,
  TRANSACTION_PAYMENT_OPTIONS,
  TRANSACTION_TYPE_OPTIONS,
} from '../composables/transaction-page/constants';

interface FilterState {
  channel: string;
  endDate: string;
  keyword: string;
  paymentMethod: string;
  quickRange: QuickDateRangeKey;
  startDate: string;
  type: string;
}

interface Props {
  filters: FilterState;
  open: boolean;
  selectedStoreName: string;
  submitting: boolean;
  totalCount: number;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'confirm'): void;
}>();

function resolveOptionLabel(
  options: Array<{ label: string; value: string }>,
  value: string,
) {
  return options.find((item) => item.value === value)?.label || '--';
}

const dateRangeText = computed(() => {
  if (!props.filters.startDate && !props.filters.endDate) {
    return '不限';
  }
  return `${props.filters.startDate || '--'} 至 ${props.filters.endDate || '--'}`;
});

const typeText = computed(() =>
  resolveOptionLabel(TRANSACTION_TYPE_OPTIONS, props.filters.type),
);

const channelText = computed(() =>
  resolveOptionLabel(TRANSACTION_CHANNEL_OPTIONS, props.filters.channel),
);

const paymentText = computed(() =>
  resolveOptionLabel(TRANSACTION_PAYMENT_OPTIONS, props.filters.paymentMethod),
);

const quickRangeText = computed(() =>
  resolveOptionLabel(QUICK_RANGE_OPTIONS, props.filters.quickRange || ''),
);

const keywordText = computed(() => props.filters.keyword.trim() || '未填写');
</script>

<template>
  <Modal
    :open="props.open"
    title="导出交易流水"
    ok-text="确认导出"
    cancel-text="取消"
    :confirm-loading="props.submitting"
    @ok="emit('confirm')"
    @cancel="emit('close')"
  >
    <div class="ft-export-modal">
      <p class="ft-export-desc">
        将按当前筛选条件导出交易流水 CSV 文件，请确认以下信息：
      </p>

      <div class="ft-export-list">
        <div class="ft-export-line">
          <span class="ft-export-label">门店</span>
          <span class="ft-export-value">{{ props.selectedStoreName }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">日期范围</span>
          <span class="ft-export-value">{{ dateRangeText }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">快捷日期</span>
          <span class="ft-export-value">{{ quickRangeText }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">交易类型</span>
          <span class="ft-export-value">{{ typeText }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">渠道</span>
          <span class="ft-export-value">{{ channelText }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">支付方式</span>
          <span class="ft-export-value">{{ paymentText }}</span>
        </div>
        <div class="ft-export-line">
          <span class="ft-export-label">关键词</span>
          <span class="ft-export-value">{{ keywordText }}</span>
        </div>
        <div class="ft-export-line is-total">
          <span class="ft-export-label">预计导出</span>
          <span class="ft-export-value">{{ props.totalCount }} 条</span>
        </div>
      </div>
    </div>
  </Modal>
</template>
