<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { useI18n } from 'vue-i18n';
import { AlipayOutlined, WechatOutlined } from '@ant-design/icons-vue';

const { t } = useI18n();

interface Props {
  visible: boolean;
  orderInfo: {
    orderId: string;
    orderType: number; // 0: 购买套餐, 1: 余额充值
    orderAmount: number;
  };
}

const props = defineProps<Props>();
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

const orderTypeMap = {
  0: t('page.order.packagePurchase'),
  1: t('page.order.balanceRecharge')
} as const;

const handleConfirm = (paymentMethod: 'alipay' | 'wxpay') => {
  emit('confirm', paymentMethod);
};

const handleCancel = () => {
  emit('update:visible', false);
  emit('cancel');
};
</script>

<template>
  <a-modal
    :visible="visible"
    :title="t('page.order.confirmOrder')"
    :footer="null"
    @cancel="handleCancel"
    width="460px"
    :maskClosable="false"
  >
    <div class="order-info">
      <div class="info-item">
        <span class="label">{{ t('page.order.orderType') }}：</span>
        <span class="value">{{ orderTypeMap[orderInfo.orderType] }}</span>
      </div>
      <div class="info-item">
        <span class="label">{{ t('page.order.orderAmount') }}：</span>
        <span class="value highlight">¥{{ orderInfo.orderAmount.toFixed(2) }}</span>
      </div>
      <div class="info-item">
        <span class="label">{{ t('page.order.orderId') }}：</span>
        <span class="value">{{ orderInfo.orderId }}</span>
      </div>
    </div>

    <div class="payment-methods">
      <h4>{{ t('page.order.selectPayment') }}</h4>
      <div class="methods-container">
        <div class="method-item" @click="handleConfirm('alipay')">
          <AlipayOutlined class="payment-icon alipay-icon" />
          <span>{{ t('page.order.alipay') }}</span>
        </div>
        <div class="method-item" @click="handleConfirm('wxpay')">
          <WechatOutlined class="payment-icon wxpay-icon" />
          <span>{{ t('page.order.wxpay') }}</span>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style scoped>
.order-info {
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  line-height: 24px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 84px;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.value.highlight {
  color: #ff4d4f;
  font-size: 16px;
  font-weight: 500;
}

.payment-methods {
  padding: 0 4px;
}

.payment-methods h4 {
  margin-bottom: 16px;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.methods-container {
  display: flex;
  gap: 12px;
}

.method-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.method-item:hover {
  border-color: #1890ff;
  background: #f0f5ff;
}

.payment-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.alipay-icon {
  color: #1677ff;
}

.wxpay-icon {
  color: #07c160;
}
</style>
