<template>
  <div class="order-create">
    <el-page-header @back="$router.go(-1)" content="创建订单">
      <template #extra>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          <el-icon><Check /></el-icon>
          创建订单
        </el-button>
      </template>
    </el-page-header>

    <el-card class="form-card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="form.orderType" placeholder="请选择订单类型">
            <el-option label="AI服务" value="SERVICE" />
            <el-option label="AI订阅" value="SUBSCRIPTION" />
            <el-option label="数字商品" value="DIGITAL" />
            <el-option label="虚拟商品" value="VIRTUAL" />
          </el-select>
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>选择您要购买的虚拟商品类型：AI服务（如AI绘画、AI写作）、AI订阅（按月/年付费）、数字商品（如软件、电子书）、虚拟商品（如游戏道具、虚拟货币）</span>
          </div>
        </el-form-item>

        <el-form-item label="货币" prop="currency">
          <el-select v-model="form.currency" placeholder="请选择货币">
            <el-option label="人民币 (CNY)" value="CNY" />
            <el-option label="美元 (USD)" value="USD" />
            <el-option label="欧元 (EUR)" value="EUR" />
          </el-select>
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>选择支付货币类型，系统会根据您选择的货币进行计费和结算</span>
          </div>
        </el-form-item>

        <el-form-item label="订单描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请详细描述您的订单需求，如：需要AI绘画服务，风格为动漫风格，尺寸为1024x1024像素"
          />
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>详细描述您的订单需求，包括服务要求、特殊需求等，这将帮助服务提供方更好地理解您的需求</span>
          </div>
        </el-form-item>

        <el-form-item label="联系邮箱" prop="contactEmail">
          <el-input
            v-model="form.contactEmail"
            type="email"
            placeholder="请输入联系邮箱（用于接收虚拟商品）"
          />
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>必填项！虚拟商品将通过此邮箱发送给您，请确保邮箱地址正确且可正常接收邮件</span>
          </div>
        </el-form-item>

        <el-form-item label="联系电话" prop="contactPhone">
          <el-input
            v-model="form.contactPhone"
            placeholder="请输入联系电话（可选）"
          />
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>可选填写，用于紧急情况联系或重要通知，建议填写以便服务提供方在需要时联系您</span>
          </div>
        </el-form-item>

        <!-- 虚拟商品不需要收货地址 -->
        <template v-if="isPhysicalOrder">
          <el-form-item label="收货地址" prop="shippingAddress">
            <el-input
              v-model="form.shippingAddress"
              type="textarea"
              :rows="3"
              placeholder="请输入收货地址"
            />
          </el-form-item>

          <el-form-item label="账单地址" prop="billingAddress">
            <el-input
              v-model="form.billingAddress"
              type="textarea"
              :rows="3"
              placeholder="请输入账单地址"
            />
          </el-form-item>
        </template>

        <!-- 订单项 -->
        <el-form-item label="虚拟商品">
          <div class="field-description">
            <el-icon><InfoFilled /></el-icon>
            <span>添加您要购买的虚拟商品，包括商品名称、单价和数量。支持添加多个商品。</span>
          </div>
          <div class="order-items">
            <div
              v-for="(item, index) in form.orderItems"
              :key="index"
              class="order-item"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input
                    v-model="item.productName"
                    placeholder="商品名称（如：AI绘画服务、AI写作助手、AI翻译服务等）"
                    @input="calculateSubtotal(index)"
                  />
                </el-col>
                <el-col :span="4">
                  <el-input-number
                    v-model="item.unitPrice"
                    :precision="2"
                    :min="0"
                    placeholder="单价"
                    @change="calculateSubtotal(index)"
                  />
                </el-col>
                <el-col :span="4">
                  <el-input-number
                    v-model="item.quantity"
                    :min="1"
                    placeholder="数量"
                    @change="calculateSubtotal(index)"
                  />
                </el-col>
                <el-col :span="4">
                  <el-input
                    v-model="item.subtotal"
                    readonly
                    placeholder="小计"
                  />
                </el-col>
                <el-col :span="4">
                  <el-button
                    type="danger"
                    :icon="Delete"
                    circle
                    @click="removeItem(index)"
                    v-if="form.orderItems.length > 1"
                  />
                </el-col>
              </el-row>
            </div>
            
            <el-button
              type="primary"
              :icon="Plus"
              @click="addItem"
              class="add-item-btn"
            >
              添加虚拟商品
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="total-amount">
            <span class="total-label">订单总计：</span>
            <span class="total-value">{{ form.currency }} {{ totalAmount }}</span>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '@/stores/orders'
import { ElMessage } from 'element-plus'
import { Plus, Delete, Check, InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()
const orderStore = useOrderStore()

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

const form = reactive({
  orderType: 'SERVICE',
  currency: 'CNY',
  description: '',
  contactEmail: '',
  contactPhone: '',
  shippingAddress: '',
  billingAddress: '',
  orderItems: [
    {
      productName: '',
      unitPrice: 0,
      quantity: 1,
      subtotal: 0
    }
  ]
})

const rules = {
  orderType: [
    { required: true, message: '请选择订单类型', trigger: 'change' }
  ],
  currency: [
    { required: true, message: '请选择货币', trigger: 'change' }
  ],
  contactEmail: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

// 检查是否为实体商品订单
const isPhysicalOrder = computed(() => {
  return form.orderType === 'PHYSICAL'
})

// 计算总金额
const totalAmount = computed(() => {
  return form.orderItems.reduce((total, item) => {
    return total + parseFloat(item.subtotal || 0)
  }, 0).toFixed(2)
})

// 计算小计
const calculateSubtotal = (index) => {
  const item = form.orderItems[index]
  if (item.unitPrice && item.quantity) {
    item.subtotal = parseFloat((item.unitPrice * item.quantity).toFixed(2))
  } else {
    item.subtotal = 0
  }
}

// 添加商品项
const addItem = () => {
  form.orderItems.push({
    productName: '',
    unitPrice: 0,
    quantity: 1,
    subtotal: 0
  })
}

// 删除商品项
const removeItem = (index) => {
  if (form.orderItems.length > 1) {
    form.orderItems.splice(index, 1)
  }
}

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

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

    // 验证订单项
    const validItems = form.orderItems.filter(item => 
      item.productName && item.unitPrice > 0 && item.quantity > 0
    )

    if (validItems.length === 0) {
      ElMessage.error('请至少添加一个有效虚拟商品')
      return
    }

    loading.value = true

    // 准备提交数据
    const orderData = {
      orderType: form.orderType,
      currency: form.currency,
      description: form.description,
      contactEmail: form.contactEmail,
      contactPhone: form.contactPhone,
      shippingAddress: form.shippingAddress,
      billingAddress: form.billingAddress,
      totalAmount: parseFloat(totalAmount.value),
      status: 'PENDING', // 新创建的订单状态为待支付
      orderItems: validItems.map(item => ({
        productName: item.productName,
        unitPrice: parseFloat(item.unitPrice),
        quantity: parseInt(item.quantity),
        subtotal: parseFloat(item.subtotal)
      }))
    }

    const response = await orderStore.createNewOrder(orderData)

    if (response.success) {
      ElMessage.success('虚拟商品订单创建成功！商品将发送到您的邮箱')
      router.push('/orders')
    } else {
      ElMessage.error(response.message || '创建订单失败')
    }
  } catch (error) {
    console.error('Create order error:', error)
    ElMessage.error('创建订单失败')
  } finally {
    loading.value = false
  }
}
</script>

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

.form-card {
  margin-top: 20px;
}

.order-items {
  width: 100%;
}

.order-item {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.add-item-btn {
  margin-top: 16px;
}

.total-amount {
  text-align: right;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.total-label {
  font-size: 16px;
  color: #606266;
}

.field-description {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  font-size: 13px;
  color: #409eff;
  line-height: 1.4;
}

.field-description .el-icon {
  margin-right: 6px;
  margin-top: 1px;
  flex-shrink: 0;
}

.field-description span {
  flex: 1;
}
</style>


