<script setup lang="ts">
/**
 * 文件职责：交易流水详情抽屉。
 */
import type { FinanceTransactionDetailDto } from '#/api/finance';

import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';

import {
  formatCurrency,
  formatSignedAmount,
  resolveTransactionTypeTagColor,
} from '../composables/transaction-page/helpers';

interface Props {
  detail: FinanceTransactionDetailDto | null;
  loading: boolean;
  open: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'orderDetail', orderNo: string): void;
}>();

function handleOpenRelatedOrder() {
  const orderNo = String(props.detail?.orderNo ?? '').trim();
  if (!orderNo) {
    return;
  }
  emit('orderDetail', orderNo);
}
</script>

<template>
  <Drawer
    :open="props.open"
    width="580"
    :title="`交易详情 ${props.detail?.transactionNo ?? ''}`"
    @close="emit('close')"
  >
    <Spin :spinning="props.loading">
      <template v-if="props.detail">
        <div class="ft-section">
          <div class="ft-section-title">基本信息</div>
          <div class="ft-info-grid">
            <div>
              <span class="label">流水号：</span>
              <span class="ft-mono">{{ props.detail.transactionNo }}</span>
            </div>
            <div>
              <span class="label">交易类型：</span>
              <Tag :color="resolveTransactionTypeTagColor(props.detail.type)">
                {{ props.detail.typeText }}
              </Tag>
            </div>
            <div>
              <span class="label">交易金额：</span>
              <span
                class="ft-detail-amount"
                :class="[props.detail.amount >= 0 ? 'income' : 'expense']"
              >
                {{
                  formatSignedAmount(
                    props.detail.amount,
                    props.detail.amount >= 0,
                  )
                }}
              </span>
            </div>
            <div>
              <span class="label">交易时间：</span>
              <span>{{ props.detail.occurredAt }}</span>
            </div>
            <div>
              <span class="label">渠道：</span>
              <span>{{ props.detail.channel || '--' }}</span>
            </div>
            <div>
              <span class="label">支付方式：</span>
              <span>{{ props.detail.paymentMethod || '--' }}</span>
            </div>
          </div>
        </div>

        <div class="ft-section">
          <div class="ft-section-title">关联信息</div>
          <div class="ft-info-grid">
            <div>
              <span class="label">关联订单：</span>
              <Button
                v-if="props.detail.orderNo"
                type="link"
                class="ft-order-link ft-mono"
                @click="handleOpenRelatedOrder"
              >
                #{{ props.detail.orderNo }}
              </Button>
              <span v-else class="ft-mono">--</span>
            </div>
            <div>
              <span class="label">顾客：</span>
              <span>{{ props.detail.customerName || '--' }}</span>
            </div>
            <div>
              <span class="label">手机号：</span>
              <span>{{ props.detail.customerPhone || '--' }}</span>
            </div>
          </div>
        </div>

        <div
          v-if="props.detail.refundNo || props.detail.refundReason"
          class="ft-section"
        >
          <div class="ft-section-title">退款信息</div>
          <div class="ft-info-grid">
            <div>
              <span class="label">退款单号：</span>
              <span class="ft-mono">{{ props.detail.refundNo || '--' }}</span>
            </div>
            <div class="full">
              <span class="label">退款原因：</span>
              <span>{{ props.detail.refundReason || '--' }}</span>
            </div>
          </div>
        </div>

        <div
          v-if="
            props.detail.rechargeAmount !== undefined ||
            props.detail.giftAmount !== undefined ||
            props.detail.arrivedAmount !== undefined
          "
          class="ft-section"
        >
          <div class="ft-section-title">储值充值信息</div>
          <div class="ft-info-grid">
            <div>
              <span class="label">会员：</span>
              <span>{{ props.detail.memberName || '--' }}</span>
            </div>
            <div>
              <span class="label">手机号：</span>
              <span>{{ props.detail.memberMobileMasked || '--' }}</span>
            </div>
            <div>
              <span class="label">充值金额：</span>
              <span>{{
                formatCurrency(props.detail.rechargeAmount ?? 0)
              }}</span>
            </div>
            <div>
              <span class="label">赠送金额：</span>
              <span>{{ formatCurrency(props.detail.giftAmount ?? 0) }}</span>
            </div>
            <div>
              <span class="label">到账金额：</span>
              <span>{{ formatCurrency(props.detail.arrivedAmount ?? 0) }}</span>
            </div>
          </div>
        </div>

        <div
          v-if="
            props.detail.pointChangeAmount !== undefined ||
            props.detail.pointBalanceAfterChange !== undefined
          "
          class="ft-section"
        >
          <div class="ft-section-title">积分抵扣信息</div>
          <div class="ft-info-grid">
            <div>
              <span class="label">会员：</span>
              <span>{{ props.detail.memberName || '--' }}</span>
            </div>
            <div>
              <span class="label">手机号：</span>
              <span>{{ props.detail.memberMobileMasked || '--' }}</span>
            </div>
            <div>
              <span class="label">积分变动：</span>
              <span>{{ props.detail.pointChangeAmount ?? '--' }}</span>
            </div>
            <div>
              <span class="label">变动后余额：</span>
              <span>{{ props.detail.pointBalanceAfterChange ?? '--' }}</span>
            </div>
          </div>
        </div>

        <div class="ft-section">
          <div class="ft-section-title">备注</div>
          <div class="ft-remark-box">{{ props.detail.remark || '无' }}</div>
        </div>
      </template>
      <Empty v-else description="暂无详情" />
    </Spin>

    <template #footer>
      <Button @click="emit('close')">关闭</Button>
    </template>
  </Drawer>
</template>
