<template>
  <div class="orders">
    <!-- 页面标题和操作 -->
    <div class="page-header">
      <div class="page-title">
        <h2>
          <el-icon><List /></el-icon>
          订单管理
        </h2>
      </div>
      <div class="page-actions">
        <el-button type="primary" @click="$router.push('/orders/create')">
          <el-icon><Plus /></el-icon>
          创建订单
        </el-button>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <el-card class="filter-card">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8">
          <el-select
            v-model="filters.status"
            placeholder="选择订单状态"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="status in orderStatuses"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-input
            v-model="filters.search"
            placeholder="搜索订单号"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <el-button @click="resetFilters">重置筛选</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="orders-card">
      <el-table
        :data="orderStore.orders"
        v-loading="orderStore.loading"
        empty-text="暂无订单"
        @sort-change="handleSortChange"
      >
        <el-table-column prop="orderNumber" label="订单号" width="150" sortable="custom">
          <template #default="{ row }">
            <router-link :to="`/orders/${row.id}`" class="order-link">
              {{ row.orderNumber }}
            </router-link>
          </template>
        </el-table-column>
        
        <el-table-column prop="totalAmount" label="金额" width="120" sortable="custom">
          <template #default="{ row }">
            <span class="amount">{{ row.currency }} {{ row.totalAmount }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="orderType" label="类型" width="120">
          <template #default="{ row }">
            {{ getOrderTypeText(row.orderType) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="创建时间" width="160" sortable="custom">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button size="small" @click="$router.push(`/orders/${row.id}`)">
                查看
              </el-button>
              
              <el-dropdown v-if="canPay(row)" trigger="click" :teleported="true" popper-class="table-dropdown" @command="(command) => handlePayment(row, command)">
                <el-button size="small" type="success">
                  支付<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="ALIPAY">
                      <el-icon><CreditCard /></el-icon>
                      支付宝支付
                    </el-dropdown-item>
                    <el-dropdown-item command="PAYPAL">
                      <el-icon><CreditCard /></el-icon>
                      PayPal支付
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              
              <el-button
                v-if="canCancel(row)"
                size="small"
                type="danger"
                @click="handleCancel(row)"
              >
                取消
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 取消订单对话框 -->
    <el-dialog
      v-model="cancelDialogVisible"
      title="取消订单"
      width="400px"
    >
      <el-form :model="cancelForm" label-width="80px">
        <el-form-item label="取消原因">
          <el-input
            v-model="cancelForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入取消原因（可选）"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="cancelDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmCancel">确认取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useOrderStore } from '@/stores/orders'
import { createOrderPayment } from '@/api/orders'
import { ElMessage, ElMessageBox } from 'element-plus'

const orderStore = useOrderStore()

// 筛选条件
const filters = reactive({
  status: '',
  search: ''
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 排序
const sortBy = ref('createdAt')
const sortDir = ref('desc')

// 取消订单对话框
const cancelDialogVisible = ref(false)
const cancelForm = reactive({
  reason: ''
})
const currentCancelOrder = ref(null)

// 订单状态选项
const orderStatuses = [
  { value: '', label: '全部状态' },
  { value: 'PENDING', label: '待支付' },
  { value: 'CONFIRMED', label: '已确认' },
  { value: 'PAID', label: '已支付' },
  { value: 'PROCESSING', label: '处理中' },
  { value: 'SHIPPED', label: '已发货' },
  { value: 'DELIVERED', label: '已送达' },
  { value: 'COMPLETED', label: '已完成' },
  { value: 'CANCELLED', label: '已取消' },
  { value: 'REFUNDED', label: '已退款' }
]

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'PENDING': 'warning',
    'CONFIRMED': 'info',
    'PAID': 'primary',
    'PROCESSING': '',
    'SHIPPED': 'success',
    'DELIVERED': 'success',
    'COMPLETED': 'success',
    'CANCELLED': 'danger',
    'REFUNDED': 'info'
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '待支付',
    'CONFIRMED': '已确认',
    'PAID': '已支付',
    'PROCESSING': '处理中',
    'SHIPPED': '已发货',
    'DELIVERED': '已送达',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'REFUNDED': '已退款'
  }
  return statusMap[status] || status
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  const typeMap = {
    'PRODUCT': '商品订单',
    'SERVICE': '服务订单',
    'SUBSCRIPTION': '订阅订单',
    'DIGITAL': '数字商品',
    'PHYSICAL': '实体商品'
  }
  return typeMap[orderType] || orderType
}

// 格式化日期
const formatDate = (dateString) => {
  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 canPay = (order) => {
  return order.status === 'PENDING' || order.status === 'CONFIRMED'
}

// 检查是否可以取消
const canCancel = (order) => {
  return order.status === 'PENDING' || order.status === 'CONFIRMED'
}

// 获取订单列表
const fetchOrders = async () => {
  console.log('=== 开始获取订单列表 ===')
  console.log('当前用户:', userStore.user)
  console.log('认证状态:', userStore.isAuthenticated)
  console.log('Token:', sessionStorage.getItem('token'))
  
  const params = {
    page: pagination.page - 1,
    size: pagination.size,
    sortBy: sortBy.value,
    sortDir: sortDir.value
  }
  
  if (filters.status) {
    params.status = filters.status
  }
  
  if (filters.search) {
    params.search = filters.search
  }
  
  console.log('请求参数:', params)
  
  try {
    const response = await orderStore.fetchOrders(params)
    console.log('API响应:', response)
    
    if (response.success) {
      pagination.total = orderStore.pagination.total
      console.log('订单数据:', orderStore.orders)
      console.log('分页信息:', orderStore.pagination)
    } else {
      console.error('获取订单失败:', response.message)
    }
  } catch (error) {
    console.error('获取订单异常:', error)
  }
}

// 筛选变化
const handleFilterChange = () => {
  pagination.page = 1
  fetchOrders()
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  fetchOrders()
}

// 重置筛选
const resetFilters = () => {
  filters.status = ''
  filters.search = ''
  pagination.page = 1
  fetchOrders()
}

// 排序变化
const handleSortChange = ({ prop, order }) => {
  if (prop) {
    sortBy.value = prop
    sortDir.value = order === 'ascending' ? 'asc' : 'desc'
    fetchOrders()
  }
}

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  fetchOrders()
}

// 当前页变化
const handleCurrentChange = (page) => {
  pagination.page = page
  fetchOrders()
}

// 处理支付
const handlePayment = async (order, paymentMethod) => {
  try {
    const response = await createOrderPayment(order.id, paymentMethod)
    if (response.success) {
      ElMessage.success('正在跳转到支付页面...')
      // 这里应该跳转到支付页面
      window.open(response.data.paymentUrl, '_blank')
    } else {
      ElMessage.error(response.message || '创建支付失败')
    }
  } catch (error) {
    console.error('Payment error:', error)
    ElMessage.error('创建支付失败')
  }
}

// 处理取消
const handleCancel = (order) => {
  currentCancelOrder.value = order
  cancelForm.reason = ''
  cancelDialogVisible.value = true
}

// 确认取消
const confirmCancel = async () => {
  if (!currentCancelOrder.value) return
  
  try {
    const response = await orderStore.cancelOrderById(
      currentCancelOrder.value.id,
      cancelForm.reason
    )
    
    if (response.success) {
      ElMessage.success('订单取消成功')
      cancelDialogVisible.value = false
      fetchOrders()
    } else {
      ElMessage.error(response.message || '取消订单失败')
    }
  } catch (error) {
    console.error('Cancel order error:', error)
    ElMessage.error('取消订单失败')
  }
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.orders {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  position: relative;
  overflow-x: hidden;
  padding: 20px;
}

/* 页面特殊效果 */
.orders::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: ordersPulse 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes ordersPulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.02); }
}

/* 内容层级 */
.orders > * {
  position: relative;
  z-index: 2;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title h2 {
  margin: 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-actions {
  display: flex;
  gap: 12px;
}

.filter-card {
  margin-bottom: 20px;
}

.orders-card {
  margin-bottom: 20px;
}

.order-link {
  color: #409EFF;
  text-decoration: none;
  font-weight: 500;
}

.order-link:hover {
  text-decoration: underline;
}

.amount {
  font-weight: 600;
  color: #E6A23C;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 确保表格内下拉菜单不被裁剪/遮挡 */
:deep(.table-dropdown) {
  z-index: 3000 !important;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .page-actions {
    justify-content: center;
  }
}
</style>


