<template>
  <div class="payment-create">
    <a-page-header @back="$router.go(-1)" :content="$t('paymentCreate.title')">
      <template #extra>
        <a-button type="primary" @click="handleSubmit" :loading="loading">
          <CreditCardOutlined />
          {{ $t('paymentCreate.createButton') }}
        </a-button>
      </template>
    </a-page-header>

    <a-card class="form-card">
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        @submit.prevent="handleSubmit"
      >
        <a-form-item :label="$t('paymentCreate.orderIdLabel')" prop="orderId">
          <a-input
            v-model="form.orderId"
            :placeholder="$t('paymentCreate.orderIdPlaceholder')"
            clearable
          />
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.amountLabel')" prop="amount">
          <a-input-number
            v-model="form.amount"
            :precision="2"
            :min="0.01"
            :placeholder="$t('paymentCreate.amountPlaceholder')"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.currencyLabel')" prop="currency">
          <a-select v-model:value="form.currency" :placeholder="$t('paymentCreate.currencyPlaceholder')">
            <a-select-option value="CNY">{{ $t('paymentCreate.currencyCNY') }}</a-select-option>
            <a-select-option value="USD">{{ $t('paymentCreate.currencyUSD') }}</a-select-option>
            <a-select-option value="EUR">EUR (Euro)</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.paymentMethodLabel')" prop="paymentMethod">
          <a-radio-group v-model:value="form.paymentMethod">
            <a-radio value="ALIPAY">
              <CreditCardOutlined />
              {{ $t('orders.alipay') }}
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.descriptionLabel')" prop="description">
          <a-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            :placeholder="$t('paymentCreate.descriptionPlaceholder')"
          />
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.callbackUrlLabel')" prop="callbackUrl">
          <a-input
            v-model="form.callbackUrl"
            :placeholder="$t('paymentCreate.callbackUrlPlaceholder')"
          />
        </a-form-item>

        <a-form-item :label="$t('paymentCreate.returnUrlLabel')" prop="returnUrl">
          <a-input
            v-model="form.returnUrl"
            :placeholder="$t('paymentCreate.returnUrlPlaceholder')"
          />
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 支付方式说明 -->
    <a-card class="info-card">
      <template #header>
        <h4>{{ $t('paymentCreate.paymentMethodLabel') }}</h4>
      </template>
      
      <a-row :gutter="20">
        <a-col :xs="24" :sm="12" :md="6">
          <div class="payment-method-info">
            <CreditCardOutlined :style="{ fontSize: 'var(--text-3xl)', color: 'var(--primary-500)' }" />
            <h5>{{ $t('orders.alipay') }}</h5>
            <p>{{ $t('paymentCreate.alipayDesc') }}</p>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import {
  DollarOutlined,
  CreditCardOutlined,
  WalletOutlined,
  PlusOutlined,
  CheckOutlined,
  CloseOutlined,
  LeftOutlined,
  RightOutlined,
  UploadOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue'

const { t } = useI18n()
const router = useRouter()

const formRef = ref()
const loading = ref(false)

const form = reactive({
  orderId: '',
  amount: 0,
  currency: 'CNY',
  paymentMethod: 'ALIPAY',
  description: '',
  callbackUrl: '',
  returnUrl: ''
})

const rules = {
  orderId: [
    { required: true, message: '请输入订单号', trigger: 'blur' }
  ],
  amount: [
    { required: true, message: '请输入支付金额', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '支付金额必须大于0', trigger: 'blur' }
  ],
  currency: [
    { required: true, message: '请选择货币', trigger: 'change' }
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    const valid = await formRef.value.validate()
    if (!valid) return

    loading.value = true

    // 调用真实支付API
    await new Promise(resolve => setTimeout(resolve, 1000))

    message.success(t('common.paymentCreateSuccess'))
    router.push('/payments')
  } catch (error) {
    console.error('Create payment error:', error)
    message.error(t('common.paymentCreateFailed'))
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.payment-create {
  max-width: 1200px;
  margin: 0 auto;
}

.form-card {
  margin-top: var(--space-5);
}

.info-card {
  margin-top: var(--space-5);
}

.info-card h4 {
  margin: 0;
  color: var(--text-primary);
}

.payment-method-info {
  text-align: center;
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  transition: var(--transition-all);
}

.payment-method-info:hover {
  background-color: var(--bg-elevated);
  border-color: var(--primary-500);
}

.payment-method-info h5 {
  margin: var(--space-3) 0 var(--space-2) 0;
  color: var(--text-primary);
}

.payment-method-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@media (max-width: 768px) {
  .payment-method-info {
    margin-bottom: var(--space-4);
  }
}
</style>












