﻿<template>
  <div class="space-y-6">
    <!-- 页面头部 -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">创建订单</h1>
        <p class="text-gray-600 mt-1">创建新的翻译订单</p>
      </div>
      <div class="flex space-x-3">
        <button
          @click="$router.back()"
          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
        >
          返回
        </button>
      </div>
    </div>

    <!-- 订单表单 -->
    <div class="bg-white shadow rounded-lg">
      <form @submit.prevent="handleSubmit" class="p-6 space-y-6">
        <!-- 客户信息 -->
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">客户信息</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="clientName" class="block text-sm font-medium text-gray-700 mb-2">
                客户姓名 *
              </label>
              <input
                id="clientName"
                v-model="orderForm.clientName"
                type="text"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请输入客户姓名"
              />
            </div>

            <div>
              <label for="clientPhone" class="block text-sm font-medium text-gray-700 mb-2">
                联系电话 *
              </label>
              <input
                id="clientPhone"
                v-model="orderForm.clientPhone"
                type="tel"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请输入联系电话"
              />
            </div>

            <div>
              <label for="clientEmail" class="block text-sm font-medium text-gray-700 mb-2">
                邮箱地址
              </label>
              <input
                id="clientEmail"
                v-model="orderForm.clientEmail"
                type="email"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请输入邮箱地址"
              />
            </div>

            <div>
              <label for="clientCompany" class="block text-sm font-medium text-gray-700 mb-2">
                公司名称
              </label>
              <input
                id="clientCompany"
                v-model="orderForm.clientCompany"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请输入公司名称"
              />
            </div>
          </div>
        </div>

        <!-- 翻译需求 -->
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">翻译需求</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="sourceLanguage" class="block text-sm font-medium text-gray-700 mb-2">
                源语言 *
              </label>
              <select
                id="sourceLanguage"
                v-model="orderForm.sourceLanguage"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="">请选择源语言</option>
                <option value="zh">中文</option>
                <option value="en">英文</option>
                <option value="ja">日文</option>
                <option value="ko">韩文</option>
                <option value="fr">法文</option>
                <option value="de">德文</option>
                <option value="es">西班牙文</option>
                <option value="ru">俄文</option>
              </select>
            </div>

            <div>
              <label for="targetLanguage" class="block text-sm font-medium text-gray-700 mb-2">
                目标语言 *
              </label>
              <select
                id="targetLanguage"
                v-model="orderForm.targetLanguage"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="">请选择目标语言</option>
                <option value="zh">中文</option>
                <option value="en">英文</option>
                <option value="ja">日文</option>
                <option value="ko">韩文</option>
                <option value="fr">法文</option>
                <option value="de">德文</option>
                <option value="es">西班牙文</option>
                <option value="ru">俄文</option>
              </select>
            </div>

            <div>
              <label for="serviceType" class="block text-sm font-medium text-gray-700 mb-2">
                服务类型 *
              </label>
              <select
                id="serviceType"
                v-model="orderForm.serviceType"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="">请选择服务类型</option>
                <option value="document">文档翻译</option>
                <option value="interpretation">口译服务</option>
                <option value="localization">本地化</option>
                <option value="proofreading">校对服务</option>
              </select>
            </div>

            <div>
              <label for="urgency" class="block text-sm font-medium text-gray-700 mb-2">
                紧急程度 *
              </label>
              <select
                id="urgency"
                v-model="orderForm.urgency"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="normal">普通</option>
                <option value="urgent">紧急</option>
                <option value="rush">加急</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 项目详情 -->
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">项目详情</h3>
          <div class="space-y-6">
            <div>
              <label for="projectTitle" class="block text-sm font-medium text-gray-700 mb-2">
                项目标题 *
              </label>
              <input
                id="projectTitle"
                v-model="orderForm.projectTitle"
                type="text"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请输入项目标题"
              />
            </div>

            <div>
              <label for="projectDescription" class="block text-sm font-medium text-gray-700 mb-2">
                项目描述 *
              </label>
              <textarea
                id="projectDescription"
                v-model="orderForm.projectDescription"
                rows="4"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="请详细描述翻译需求、专业领域、特殊要求等"
              ></textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="expectedDelivery" class="block text-sm font-medium text-gray-700 mb-2">
                  期望交付时间 *
                </label>
                <input
                  id="expectedDelivery"
                  v-model="orderForm.expectedDelivery"
                  type="datetime-local"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              <div>
                <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
                  预算（元）
                </label>
                <input
                  id="budget"
                  v-model.number="orderForm.budget"
                  type="number"
                  min="0"
                  step="0.01"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="请输入预算金额"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 附件上传 -->
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">附件上传</h3>
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-6">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <div class="mt-4">
                <label for="file-upload" class="cursor-pointer">
                  <span class="mt-2 block text-sm font-medium text-gray-900">
                    点击上传文件或拖拽文件到此处
                  </span>
                  <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple @change="handleFileUpload" />
                </label>
                <p class="mt-1 text-xs text-gray-500">
                  支持 PDF, DOC, DOCX, TXT 等格式，单个文件最大 10MB
                </p>
              </div>
            </div>
          </div>
          
          <!-- 已上传文件列表 -->
          <div v-if="uploadedFiles.length > 0" class="mt-4">
            <h4 class="text-sm font-medium text-gray-900 mb-2">已上传文件</h4>
            <ul class="space-y-2">
              <li v-for="(file, index) in uploadedFiles" :key="index" class="flex items-center justify-between p-2 bg-gray-50 rounded">
                <span class="text-sm text-gray-700">{{ file.name }}</span>
                <button @click="removeFile(index)" class="text-red-600 hover:text-red-800">
                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                  </svg>
                </button>
              </li>
            </ul>
          </div>
        </div>

        <!-- 备注信息 -->
        <div>
          <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
            备注信息
          </label>
          <textarea
            id="notes"
            v-model="orderForm.notes"
            rows="3"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="其他需要说明的信息"
          ></textarea>
        </div>

        <!-- 提交按钮 -->
        <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
          <button
            type="button"
            @click="$router.back()"
            class="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
          >
            取消
          </button>
          <button
            type="submit"
            :disabled="isSubmitting"
            class="px-6 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {{ isSubmitting ? '创建中...' : '创建订单' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
// 页面元数据
definePageMeta({
  middleware: 'auth'
})

// 页面标题
useHead({
  title: '创建订单 - 翻译管理系统'
})

// 路由
const router = useRouter()

// 表单数据
const orderForm = ref({
  clientName: '',
  clientPhone: '',
  clientEmail: '',
  clientCompany: '',
  sourceLanguage: '',
  targetLanguage: '',
  serviceType: '',
  urgency: 'normal',
  projectTitle: '',
  projectDescription: '',
  expectedDelivery: '',
  budget: 0,
  notes: ''
})

// 上传文件列表
const uploadedFiles = ref([])

// 提交状态
const isSubmitting = ref(false)

// 处理文件上传
const handleFileUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    if (file.size <= 10 * 1024 * 1024) { // 10MB限制
      uploadedFiles.value.push(file)
    } else {
      alert(`文件 ${file.name} 超过10MB限制`)
    }
  })
}

// 移除文件
const removeFile = (index) => {
  uploadedFiles.value.splice(index, 1)
}

// 处理表单提交
const handleSubmit = async () => {
  try {
    isSubmitting.value = true
    
    // 基本验证
    if (!orderForm.value.clientName || !orderForm.value.clientPhone || 
        !orderForm.value.sourceLanguage || !orderForm.value.targetLanguage ||
        !orderForm.value.serviceType || !orderForm.value.projectTitle ||
        !orderForm.value.projectDescription || !orderForm.value.expectedDelivery) {
      throw new Error('请填写所有必填字段')
    }

    // 语言验证
    if (orderForm.value.sourceLanguage === orderForm.value.targetLanguage) {
      throw new Error('源语言和目标语言不能相同')
    }

    // 时间验证
    const deliveryTime = new Date(orderForm.value.expectedDelivery)
    const now = new Date()
    if (deliveryTime <= now) {
      throw new Error('交付时间必须晚于当前时间')
    }

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 创建订单数据
    const newOrder = {
      id: `order_${Date.now()}`,
      ...orderForm.value,
      files: uploadedFiles.value.map(file => ({
        name: file.name,
        size: file.size,
        type: file.type
      })),
      status: 'pending',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    }
    
    console.log('创建订单:', newOrder)
    
    // 显示成功消息
    alert('订单创建成功')
    
    // 返回订单列表页面
    router.push('/orders')
    
  } catch (error) {
    alert(error.message || '创建订单失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

