﻿<template>
  <div class="space-y-6">
    <!-- 页面头部 -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
      <h1 class="text-2xl font-bold text-gray-900">订单管理</h1>
      <div class="mt-4 sm:mt-0">
        <button
          @click="openCreateModal"
          class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
          </svg>
          创建订单
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">总订单</dt>
                <dd class="text-lg font-medium text-gray-900">{{ stats.total }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">进行中</dt>
                <dd class="text-lg font-medium text-gray-900">{{ stats.inProgress }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">已完成</dt>
                <dd class="text-lg font-medium text-gray-900">{{ stats.completed }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" 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>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">已取消</dt>
                <dd class="text-lg font-medium text-gray-900">{{ stats.cancelled }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">搜索订单</label>
            <input
              id="search"
              v-model="searchQuery"
              type="text"
              placeholder="订单号、客户姓名、项目标题"
              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="status-filter" class="block text-sm font-medium text-gray-700 mb-1">订单状态</label>
            <select
              id="status-filter"
              v-model="statusFilter"
              class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">全部状态</option>
              <option value="pending">待处理</option>
              <option value="confirmed">已确认</option>
              <option value="in_progress">进行中</option>
              <option value="completed">已完成</option>
              <option value="cancelled">已取消</option>
            </select>
          </div>
          <div>
            <label for="service-filter" class="block text-sm font-medium text-gray-700 mb-1">服务类型</label>
            <select
              id="service-filter"
              v-model="serviceFilter"
              class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">全部服务</option>
              <option value="voice">语音通话</option>
              <option value="video">视频通话</option>
              <option value="document">文档翻译</option>
              <option value="interpretation">口译服务</option>
              <option value="localization">本地化</option>
              <option value="proofreading">校对服务</option>
            </select>
          </div>
          <div>
            <label for="date-range" class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
            <select
              id="date-range"
              v-model="dateRange"
              class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">全部时间</option>
              <option value="today">今天</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">订单列表</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                订单信息
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                客户信息
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                项目信息
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                服务详情
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                预估费用
              </th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                口译员
              </th>
              <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">操作</span>
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="order in filteredOrders" :key="order.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">{{ order.order_number }}</div>
                <div class="text-sm text-gray-500">{{ formatDate(order.created_at) }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div>
                  <div class="text-sm font-medium text-gray-900">{{ order.client_name }}</div>
                  <div class="text-sm text-gray-500">{{ order.client_email }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div>
                  <div class="text-sm font-medium text-gray-900">{{ order.project_name }}</div>
                  <div class="text-sm text-gray-500">{{ getUrgencyText(order.urgency) }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div>
                  <div class="text-sm font-medium text-gray-900">{{ getServiceTypeText(order.service_type) }}</div>
                  <div class="text-sm text-gray-500">{{ getLanguageName(order.source_language) }} → {{ getLanguageName(order.target_language) }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(order.status)" class="inline-flex px-2 py-1 text-xs font-semibold rounded-full">
                  {{ getStatusText(order.status) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ¥{{ order.estimated_cost || 0 }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ order.interpreter_name || '未分配' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button
                    @click="viewOrder(order)"
                  class="text-blue-600 hover:text-blue-900 mr-3"
                  >
                    查看
                  </button>
                  <button
                    @click="editOrder(order)"
                  class="text-green-600 hover:text-green-900 mr-3"
                  >
                    编辑
                  </button>
                  <button
                  @click="handleDeleteOrder(order)"
                    class="text-red-600 hover:text-red-900"
                  >
                    删除
                  </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredOrders.length === 0" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无订单</h3>
        <p class="mt-1 text-sm text-gray-500">开始创建您的第一个翻译订单</p>
        <div class="mt-6">
          <button
            @click="openCreateModal"
            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
          >
            创建订单
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 创建订单模态框 -->
  <div v-if="showCreateModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white max-h-[90vh] overflow-y-auto">
      <div class="mt-3">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-medium text-gray-900">创建新订单</h3>
          <button @click="showCreateModal = false" class="text-gray-400 hover:text-gray-600">
            <svg class="w-6 h-6" 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>
        </div>
        
        <form @submit.prevent="submitCreateOrder" class="space-y-6">
          <!-- 基本信息 -->
          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-md font-medium text-gray-900 mb-3">基本信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">客户姓名 *</label>
                <input
                  v-model="newOrder.client_name"
                  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"
                  placeholder="请输入客户姓名"
                />
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">客户邮箱 *</label>
                <input
                  v-model="newOrder.client_email"
                  type="email"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入客户邮箱"
                />
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">客户电话</label>
                <input
                  v-model="newOrder.client_phone"
                  type="tel"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入客户电话"
                />
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">项目标题 *</label>
                <input
                  v-model="newOrder.project_name"
                  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"
                  placeholder="请输入项目标题"
                />
              </div>
            </div>
          </div>

          <!-- 服务详情 -->
          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-md font-medium text-gray-900 mb-3">服务详情</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">服务类型 *</label>
                <select
                  v-model="newOrder.service_type"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">请选择服务类型</option>
                  <option value="voice">语音通话</option>
                  <option value="video">视频通话</option>
                  <option value="document">文档翻译</option>
                  <option value="interpretation">口译服务</option>
                  <option value="localization">本地化</option>
                  <option value="proofreading">校对服务</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">源语言 *</label>
                <select
                  v-model="newOrder.source_language"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-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 class="block text-sm font-medium text-gray-700 mb-1">目标语言 *</label>
                <select
                  v-model="newOrder.target_language"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-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 class="block text-sm font-medium text-gray-700 mb-1">紧急程度 *</label>
                <select
                  v-model="newOrder.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"
                >
                  <option value="normal">普通</option>
                  <option value="urgent">紧急</option>
                  <option value="emergency">特急</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 项目描述 -->
          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-md font-medium text-gray-900 mb-3">项目描述</h4>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">详细描述</label>
              <textarea
                v-model="newOrder.project_description"
                rows="4"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="请详细描述项目需求、要求等..."
              ></textarea>
            </div>
          </div>

          <!-- 预算信息 -->
          <div class="border-b border-gray-200 pb-4">
            <h4 class="text-md font-medium text-gray-900 mb-3">预算信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">预估费用（元）</label>
                <input
                  v-model.number="newOrder.estimated_cost"
                  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"
                  placeholder="0.00"
                />
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">预计完成时间</label>
                <input
                  v-model="newOrder.scheduled_date"
                  type="date"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            </div>
          </div>

          <!-- 客户公司和预计时长 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">客户公司</label>
              <input
                v-model="newOrder.client_company"
                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"
                placeholder="可选"
              />
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">预计时长（分钟）</label>
              <input
                v-model.number="newOrder.expected_duration"
                type="number"
                min="1"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="60"
              />
            </div>
          </div>

          <!-- 预约时间 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">预约时间</label>
              <input
                v-model="newOrder.scheduled_time"
                type="time"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
            <textarea
              v-model="newOrder.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"
              placeholder="其他说明..."
            />
          </div>

          <div class="bg-gray-50 p-4 rounded-lg">
            <div id="estimated-cost" class="text-lg font-semibold text-gray-900">
              预估费用: ¥{{ calculateOrderCost(
                newOrder.service_type,
                newOrder.source_language,
                newOrder.target_language,
                newOrder.urgency,
                newOrder.expected_duration || 60
              ) }}
            </div>
            <div class="text-sm text-gray-600 mt-1">
              费用会根据服务类型、语言对、紧急程度和预计时长自动计算
            </div>
          </div>

          <!-- 按钮 -->
          <div class="flex justify-end space-x-3 pt-4">
            <button
              type="button"
              @click="showCreateModal = false"
              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>
            <button
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
            >
              创建订单
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useSupabaseData } from '~/composables/useSupabaseData'
import { useToast } from '~/composables/useToast'

// 定义页面meta
definePageMeta({
  middleware: 'auth'
})

// 使用Supabase数据操作
const { 
  getOrders, 
  createOrder, 
  updateOrder, 
  deleteOrder, 
  getOrderStats,
  calculateOrderCost 
} = useSupabaseData()

const { showToast } = useToast()

// 响应式数据
const loading = ref(false)
const error = ref('')
const searchQuery = ref('')
const statusFilter = ref('')
const serviceFilter = ref('')
const dateRange = ref('')
const showCreateModal = ref(false)

// 订单数据
const allOrders = ref([])
const stats = ref({
  total: 0,
  pending: 0,
  inProgress: 0,
  completed: 0,
  totalRevenue: 0
})

// 新订单表单数据
const newOrder = ref({
  client_name: '',
  client_email: '',
  client_phone: '',
  client_company: '',
  project_name: '',
  project_description: '',
  source_language: 'zh',
  target_language: 'en',
  service_type: 'audio',
  urgency: 'normal',
  expected_duration: 60,
  scheduled_date: '',
  scheduled_time: '',
  notes: ''
})

// 计算属性
const filteredOrders = computed(() => {
  let filtered = allOrders.value

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(order => 
      order.client_name?.toLowerCase().includes(query) ||
      order.client_email?.toLowerCase().includes(query) ||
      order.project_name?.toLowerCase().includes(query) ||
      order.order_number?.toLowerCase().includes(query)
    )
  }

  // 状态过滤
  if (statusFilter.value) {
    filtered = filtered.filter(order => order.status === statusFilter.value)
  }

  // 服务类型过滤
  if (serviceFilter.value) {
    filtered = filtered.filter(order => order.service_type === serviceFilter.value)
  }

  // 日期范围过滤
  if (dateRange.value) {
    const today = new Date()
    const filterDate = new Date()
    
    switch (dateRange.value) {
      case 'today':
        filterDate.setHours(0, 0, 0, 0)
        filtered = filtered.filter(order => 
          new Date(order.created_at) >= filterDate
        )
        break
      case 'week':
        filterDate.setDate(today.getDate() - 7)
        filtered = filtered.filter(order => 
          new Date(order.created_at) >= filterDate
        )
        break
      case 'month':
        filterDate.setMonth(today.getMonth() - 1)
        filtered = filtered.filter(order => 
          new Date(order.created_at) >= filterDate
        )
        break
    }
  }

  return filtered
})

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待确认',
    confirmed: '已确认',
    in_progress: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    pending: 'bg-yellow-100 text-yellow-800',
    confirmed: 'bg-blue-100 text-blue-800',
    in_progress: 'bg-green-100 text-green-800',
    completed: 'bg-green-100 text-green-800',
    cancelled: 'bg-red-100 text-red-800'
  }
  return classMap[status] || 'bg-gray-100 text-gray-800'
}

// 获取服务类型文本
const getServiceTypeText = (type) => {
  const typeMap = {
    voice: '语音通话',
    video: '视频通话',
    document: '文档翻译',
    interpretation: '口译服务',
    localization: '本地化',
    proofreading: '校对服务',
    // 向后兼容
    audio: '语音翻译',
    text: '文本翻译'
  }
  return typeMap[type] || type
}

// 获取紧急程度文本
const getUrgencyText = (urgency) => {
  const urgencyMap = {
    normal: '普通',
    urgent: '紧急',
    emergency: '特急'
  }
  return urgencyMap[urgency] || urgency
}

// 获取语言名称
const getLanguageName = (code) => {
  const languages = {
    zh: '中文',
    en: '英文',
    ja: '日文',
    ko: '韩文',
    fr: '法文',
    de: '德文',
    es: '西班牙文',
    ru: '俄文'
  }
  return languages[code] || code
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知时间'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 查看订单详情
const viewOrder = (order) => {
  // 可以跳转到订单详情页面
  console.log('查看订单:', order)
  showToast('订单详情功能开发中', 'info')
}

// 编辑订单
const editOrder = (order) => {
  // 可以打开编辑模态框或跳转到编辑页面
  console.log('编辑订单:', order)
  showToast('编辑订单功能开发中', 'info')
}

// 删除订单
const handleDeleteOrder = async (order) => {
  if (confirm(`确定要删除订单 ${order.order_number} 吗？`)) {
    try {
      const success = await deleteOrder(order.id)
      
      if (success) {
      // 从列表中移除
        const index = allOrders.value.findIndex(o => o.id === order.id)
      if (index > -1) {
          allOrders.value.splice(index, 1)
        }
        
        // 更新统计
        stats.value.total--
        if (order.status === 'pending') stats.value.pending--
        else if (order.status === 'in_progress') stats.value.inProgress--
        else if (order.status === 'completed') stats.value.completed--
        
        showToast('订单删除成功', 'success')
      } else {
        throw new Error('删除失败')
      }
    } catch (error) {
      console.error('删除订单失败:', error)
      showToast('删除订单失败', 'error')
    }
  }
}

// 方法
const loadOrders = async () => {
  try {
    loading.value = true
    
    // 从数据库加载真实数据
    const [ordersData, statsData] = await Promise.all([
      getOrders(),
      getOrderStats()
    ])
    
    allOrders.value = ordersData || []
    stats.value = statsData || {
      total: 0,
      pending: 0,
      inProgress: 0,
      completed: 0,
      cancelled: 0,
      totalRevenue: 0
    }
    
    console.log('成功加载订单数据:', ordersData?.length || 0, '条订单')
  } catch (err) {
    console.error('加载订单数据失败:', err)
    error.value = '加载订单数据失败'
    showToast('加载订单数据失败，请稍后重试', 'error')
    
    // 初始化空数据
    allOrders.value = []
  stats.value = {
      total: 0,
      pending: 0,
      inProgress: 0,
      completed: 0,
      cancelled: 0,
      totalRevenue: 0
    }
  } finally {
    loading.value = false
  }
}

const openCreateModal = () => {
  // 重置表单
  newOrder.value = {
    client_name: '',
    client_email: '',
    client_phone: '',
    client_company: '',
    project_name: '',
    project_description: '',
    source_language: 'zh',
    target_language: 'en',
    service_type: 'audio',
    urgency: 'normal',
    expected_duration: 60,
    scheduled_date: '',
    scheduled_time: '',
    notes: ''
  }
  showCreateModal.value = true
}

const closeCreateModal = () => {
  showCreateModal.value = false
}

const submitCreateOrder = async () => {
  try {
    loading.value = true

    // 表单验证
    if (!newOrder.value.client_name || !newOrder.value.client_email || !newOrder.value.project_name) {
      throw new Error('请填写必填信息')
    }

    // 计算预估费用
    const estimatedCost = calculateOrderCost(
      newOrder.value.service_type,
      newOrder.value.source_language,
      newOrder.value.target_language,
      newOrder.value.urgency,
      newOrder.value.expected_duration
    )

    // 创建订单
    const orderData = {
      ...newOrder.value,
      estimated_cost: estimatedCost
    }

    const createdOrder = await createOrder(orderData)
    
    if (createdOrder) {
      // 添加到订单列表
      allOrders.value.unshift(createdOrder)
      
      // 更新统计
      stats.value.total++
      stats.value.pending++
      
      showToast('订单创建成功', 'success')
      closeCreateModal()
    } else {
      throw new Error('创建订单失败')
    }
  } catch (err) {
    console.error('创建订单失败:', err)
    showToast(err.message || '创建订单失败', 'error')
  } finally {
    loading.value = false
  }
}

// 重新计算费用
const recalculateCost = () => {
  if (newOrder.value.service_type && newOrder.value.source_language && 
      newOrder.value.target_language && newOrder.value.urgency) {
    const cost = calculateOrderCost(
      newOrder.value.service_type,
      newOrder.value.source_language,
      newOrder.value.target_language,
      newOrder.value.urgency,
      newOrder.value.expected_duration || 60
    )
    
    // 显示计算出的费用
    nextTick(() => {
      const costElement = document.querySelector('#estimated-cost')
      if (costElement) {
        costElement.textContent = `预估费用: ¥${cost}`
      }
    })
  }
}

// 监听表单字段变化，自动重新计算费用
watch([
  () => newOrder.value.service_type,
  () => newOrder.value.source_language,
  () => newOrder.value.target_language,
  () => newOrder.value.urgency,
  () => newOrder.value.expected_duration
], recalculateCost)

// 页面挂载时加载数据
onMounted(() => {
  loadOrders()
})
</script>

