<template>
  <div class="order-manage-container">
    <div class="page-title"><i class="title-bar"></i><span>订单管理</span></div>
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 150px" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" />
    </div>
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <span class="filter-label">下单部门</span>
      <el-select v-model="queryParams.department" placeholder="请选择" style="width: 100px" clearable><el-option label="某某部门" value="某某部门" /></el-select>
      <span class="filter-label">状态</span>
      <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable><el-option label="已完成" value="completed" /><el-option label="待收货" value="pending" /><el-option label="已取消" value="cancelled" /></el-select>
      <span class="filter-label">支付方式</span>
      <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable><el-option label="在线支付" value="online" /><el-option label="账期支付" value="credit" /></el-select>
      <div class="filter-right">
        <el-dropdown><el-button>订单导出 <el-icon><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item>导出Excel</el-dropdown-item><el-dropdown-item>导出PDF</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
        <el-dropdown><el-button>订单打印 <el-icon><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item>打印订单</el-dropdown-item><el-dropdown-item>打印发货单</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
        <el-button>下载电子签单</el-button>
      </div>
    </div>
    <!-- Tab切换 -->
    <div class="tab-bar">
      <div class="tab-left">
        <div v-for="tab in statusTabs" :key="tab.key" :class="['tab-item', { active: activeTab === tab.key }]" @click="activeTab = tab.key">
          <el-icon><component :is="tab.icon" /></el-icon><span>{{ tab.label }}</span>
        </div>
      </div>
      <el-button type="danger" link><el-icon><Delete /></el-icon>订单回收站</el-button>
    </div>
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-for="(order, orderIndex) in orderList" :key="orderIndex" class="order-card">
        <div class="order-header">
          <el-checkbox v-model="order.checked" @change="handleOrderCheck" />
          <span class="order-time">{{ order.orderTime }}</span>
          <span class="order-info">订单号：{{ order.orderNo }}</span>
          <span class="order-info">下单人：{{ order.orderPerson }}</span>
          <span class="order-info">部门：{{ order.department }}</span>
          <el-button type="primary" link class="expand-btn" @click="order.expanded = !order.expanded">{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowDown /></el-icon></el-button>
        </div>
        <div v-if="order.countdown" class="countdown-bar">订单锁定剩余时间：{{ order.countdown }}</div>
        <div class="product-list">
          <div v-for="(item, itemIndex) in (order.expanded ? order.products : order.products.slice(0, 1))" :key="itemIndex" class="product-row">
            <div class="product-cell product-info-cell">
              <div class="product-image"><el-image :src="item.image" fit="contain"><template #error><div class="image-placeholder"><el-icon :size="30" color="#ccc"><Picture /></el-icon></div></template></el-image></div>
              <div class="product-detail">
                <div class="product-name">{{ item.name }}</div>
                <div class="product-spec">{{ item.spec1 }} {{ item.spec2 }}</div>
                <div class="product-price">¥{{ item.price }}</div>
              </div>
              <div class="product-quantity">x{{ item.quantity }}</div>
            </div>
            <div class="product-cell amount-cell" v-if="itemIndex === 0">
              <div class="amount-info"><span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span></div>
              <div class="amount-info"><span class="label">含运费：</span><span class="value">¥{{ order.freight }}</span></div>
            </div>
            <div class="product-cell status-cell" v-if="itemIndex === 0">
              <span class="status-text" :style="{ color: getStatusColor(order.status) }">{{ order.statusText }}</span>
              <el-button type="primary" link size="small" @click="handleViewDetail(order)">查看订单轨迹</el-button>
              <template v-if="order.auditStatus"><span :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{ order.auditStatus }}</span><el-button type="primary" link size="small">查看审批流</el-button></template>
              <el-button v-if="order.fileCount" type="primary" link size="small">审核文件({{ order.fileCount }})</el-button>
            </div>
            <div class="product-cell action-cell" v-if="itemIndex === 0">
              <el-button v-for="action in getOrderActions(order)" :key="action" type="primary" link size="small">{{ action }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-if="orderList.length === 0" description="暂无订单" />
    </div>
    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <div class="bottom-left"><el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox></div>
      <div class="bottom-right">
        <span class="selected-info">已勾选 <em>{{ selectedCount }}</em>/{{ totalOrders }}个订单 共计<em>¥{{ selectedAmount }}</em></span>
        <el-button>复制订单号</el-button>
        <el-dropdown><el-button>批量订单打印 <el-icon><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item>打印订单</el-dropdown-item><el-dropdown-item>打印发货单</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
        <el-button type="danger">批量确认收货</el-button>
      </div>
    </div>
    <!-- 分页 -->
    <TablePagination v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search, ArrowDown, Delete, Document, Clock, Box, CircleCheck, CircleClose, Picture } from '@element-plus/icons-vue'
import type { CheckboxValueType } from 'element-plus'
import { TablePagination } from '@/components'

const router = useRouter()
const activeTab = ref('all')
const selectAll = ref(false)

const statusTabs = [
  { key: 'all', label: '全部订单', icon: Document },
  { key: 'preOrder', label: '预下单', icon: Clock },
  { key: 'shipping', label: '待收货', icon: Box },
  { key: 'completed', label: '已完成', icon: CircleCheck },
  { key: 'cancelled', label: '已取消', icon: CircleClose }
]

const queryParams = reactive({ keyword: '', dateRange: null, department: '', status: '', payType: '', pageNum: 1, pageSize: 10 })
const total = ref(100)

const allOrders = ref([
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298392', orderPerson: '某某某', department: '某某部门', payAmount: '181', freight: '12', status: 'preOrder', statusText: '待支付', countdown: '13天 0:16:49', auditStatus: '', fileCount: 0, checked: false, expanded: false, products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] },
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298393', orderPerson: '某某某', department: '某某部门', payAmount: '181', freight: '12', status: 'shipping', statusText: '待确认', countdown: '13天 0:16:49', auditStatus: '待审批', fileCount: 0, checked: false, expanded: false, products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] },
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298394', orderPerson: '某某某', department: '某某部门', payAmount: '181', freight: '12', status: 'completed', statusText: '已完成', countdown: '', auditStatus: '审批通过', fileCount: 1, checked: false, expanded: false, products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] },
  { orderTime: '2025/12/05 16:15:06', orderNo: '489283929283298395', orderPerson: '某某某', department: '某某部门', payAmount: '181', freight: '12', status: 'cancelled', statusText: '已取消', countdown: '', auditStatus: '审批驳回', fileCount: 1, checked: false, expanded: false, products: [{ id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }] }
])

const orderList = computed(() => activeTab.value === 'all' ? allOrders.value : allOrders.value.filter(order => order.status === activeTab.value))
const totalOrders = computed(() => orderList.value.length)
const selectedCount = computed(() => orderList.value.filter(o => o.checked).length)
const selectedAmount = computed(() => orderList.value.filter(o => o.checked).reduce((sum, o) => sum + parseFloat(o.payAmount), 0).toFixed(2))

const getStatusColor = (status: string) => ({ completed: '#67c23a', preOrder: '#e6a23c', shipping: '#409eff', cancelled: '#909399' }[status] || '#909399')
const getAuditStatusClass = (auditStatus: string) => auditStatus === '审批通过' ? 'success' : auditStatus === '审批驳回' ? 'danger' : 'warning'
const getOrderActions = (order: any) => {
  const actions: string[] = []
  switch (order.status) {
    case 'preOrder': actions.push('再次购买', '加入采购单', '取消订单'); break
    case 'shipping': actions.push('再次购买', '加入采购单', '取消订单'); break
    case 'completed': actions.push('评价', '再次购买', '加入采购单', '申请售后', '删除订单', '查看发票'); break
    case 'cancelled': actions.push('再次购买', '加入采购单', '删除订单'); break
  }
  return actions
}
const handleSelectAll = (val: CheckboxValueType) => { orderList.value.forEach(order => { order.checked = !!val }) }
const handleOrderCheck = () => { selectAll.value = orderList.value.every(order => order.checked) }
const handleViewDetail = (order: any) => { router.push(`/trade/orderManage/detail/${order.orderNo}`) }
const handleQuery = () => {}
</script>

<style scoped lang="scss">
.order-manage-container { padding: 20px; background: #fff; min-height: 100%; }
.page-title { font-size: 16px; font-weight: bold; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.title-bar { display: inline-block; width: 3px; height: 16px; background: #e60012; border-radius: 2px; }
.search-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; .filter-label { font-size: 14px; color: #666; } .filter-right { flex: 1; display: flex; justify-content: flex-end; gap: 10px; } }
.tab-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; margin-bottom: 15px; .tab-left { display: flex; gap: 25px; } .tab-item { display: flex; align-items: center; gap: 5px; padding: 12px 0; cursor: pointer; color: #666; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; &:hover, &.active { color: #333; } &.active { border-bottom-color: #e60012; } } }
.order-list { .order-card { border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px; overflow: hidden; .order-header { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: #f9f9f9; border-bottom: 1px solid #eee; font-size: 13px; color: #666; .order-time { color: #333; } .expand-btn { margin-left: auto; } } .countdown-bar { background: #fff5e6; color: #e6a23c; padding: 8px 15px; font-size: 13px; border-bottom: 1px solid #eee; } .product-list { .product-row { display: flex; border-bottom: 1px solid #f5f5f5; &:last-child { border-bottom: none; } } .product-cell { padding: 15px; display: flex; flex-direction: column; justify-content: center; } .product-info-cell { flex: 1; flex-direction: row; align-items: center; gap: 15px; .product-image { width: 80px; height: 80px; background: #f5f5f5; border-radius: 4px; overflow: hidden; flex-shrink: 0; .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } } .product-detail { flex: 1; .product-name { font-size: 14px; color: #333; margin-bottom: 5px; line-height: 1.4; } .product-spec { font-size: 12px; color: #999; margin-bottom: 5px; } .product-price { font-size: 16px; font-weight: bold; color: #e60012; } } .product-quantity { font-size: 13px; color: #666; } } .amount-cell { width: 120px; border-left: 1px solid #f5f5f5; .amount-info { margin-bottom: 5px; .label { font-size: 12px; color: #999; } .value { font-size: 14px; color: #333; &.highlight { font-size: 16px; font-weight: bold; color: #e60012; } } } } .status-cell { width: 120px; border-left: 1px solid #f5f5f5; align-items: flex-start; gap: 5px; .status-text { font-size: 14px; font-weight: 500; } .audit-status { font-size: 12px; &.success { color: #e60012; } &.warning { color: #e6a23c; } &.danger { color: #e60012; } } } .action-cell { width: 100px; border-left: 1px solid #f5f5f5; align-items: flex-start; gap: 3px; } } } }
.bottom-bar { background: #fafafa; border: 1px solid #eee; border-radius: 4px; padding: 15px 20px; margin-top: 15px; display: flex; justify-content: space-between; align-items: center; .bottom-right { display: flex; align-items: center; gap: 15px; .selected-info { font-size: 14px; color: #666; em { color: #e60012; font-style: normal; font-weight: bold; } } } }
</style>
