<template>
  <div class="outbound-manager-container">
    <!-- 顶部导航和操作栏 -->
    <div class="header-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
        <el-breadcrumb-item>出库作业</el-breadcrumb-item>
        <el-breadcrumb-item>批量出库</el-breadcrumb-item>
      </el-breadcrumb>
      
      <div class="header-actions">
        <el-button type="primary" @click="createNewOrder">
          <el-icon><Plus /></el-icon>新建出库单
        </el-button>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <!-- 标签页：出库单列表 和 出库执行 -->
    <el-tabs v-model="activeTab" type="border-card" class="main-tabs">
      <!-- 标签页1: 出库单列表 -->
      <el-tab-pane label="出库单管理" name="orderList">
        <OrderList 
          :orders="orders" 
          @select-order="handleSelectOrder"
          @edit-order="handleEditOrder"
          @delete-order="handleDeleteOrder"
          @start-outbound="handleStartOutbound"
        />
      </el-tab-pane>

      <!-- 标签页2: 出库执行 (仅在选中订单后可用) -->
      <el-tab-pane 
        label="出库执行" 
        name="outboundExecution"
        :disabled="!selectedOrder"
      >
        <OutboundExecution 
          v-if="selectedOrder"
          :order="selectedOrder"
          :key="selectedOrder.id"
          @order-updated="handleOrderUpdated"
          @operation-log="handleOperationLog"
        />
      </el-tab-pane>

      <!-- 标签页3: 操作日志 -->
      <el-tab-pane label="操作日志" name="operationLogs">
        <OperationLogs :logs="operationLogs" />
      </el-tab-pane>
    </el-tabs>

    <!-- 新建/编辑出库单对话框 -->
    <OrderDialog 
      v-model="showOrderDialog"
      :order="editingOrder"
      mode="create"
      @save="handleSaveOrder"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh } from '@element-plus/icons-vue'
import OrderList from './components/OrderList.vue'
import OutboundExecution from './components/OutboundExecution.vue'
import OperationLogs from './components/OperationLogs.vue'
import OrderDialog from './components/OrderDialog.vue'
import { 
  fetchOrders, 
  deleteOrder, 
  createOrder,
  fetchOperationLogs 
} from './components/mockApi'

// 响应式数据
const activeTab = ref('orderList')
const orders = ref([])
const selectedOrder = ref(null)
const showOrderDialog = ref(false)
const editingOrder = ref(null)
const operationLogs = ref([])

// 生命周期
onMounted(() => {
  loadOrders()
  loadOperationLogs()
})

// 方法
const loadOrders = async () => {
  try {
    orders.value = await fetchOrders()
  } catch (error) {
    ElMessage.error('加载出库单失败')
  }
}

const loadOperationLogs = async () => {
  try {
    operationLogs.value = await fetchOperationLogs()
  } catch (error) {
    console.error('加载操作日志失败:', error)
  }
}

const refreshData = () => {
  loadOrders()
  loadOperationLogs()
  ElMessage.success('数据已刷新')
}

const createNewOrder = () => {
  editingOrder.value = null
  showOrderDialog.value = true
}

const handleSelectOrder = (order) => {
  selectedOrder.value = order
  activeTab.value = 'outboundExecution'
}

const handleEditOrder = (order) => {
  editingOrder.value = { ...order }
  showOrderDialog.value = true
}

const handleDeleteOrder = async (order) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除出库单 ${order.orderNo} 吗？`,
      '确认删除',
      { type: 'warning' }
    )
    
    await deleteOrder(order.id)
    ElMessage.success('删除成功')
    loadOrders()
  } catch (error) {
    // 用户取消
  }
}

const handleStartOutbound = (order) => {
  selectedOrder.value = order
  activeTab.value = 'outboundExecution'
}

const handleSaveOrder = async (orderData) => {
  try {
    await createOrder(orderData)
    ElMessage.success('出库单创建成功')
    showOrderDialog.value = false
    loadOrders()
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const handleOrderUpdated = () => {
  loadOrders()
}

const handleOperationLog = (log) => {
  operationLogs.value.unshift(log)
}
</script>

<style scoped>
.outbound-manager-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  padding: 20px;
}

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

.header-actions {
  display: flex;
  gap: 10px;
}

.main-tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

:deep(.el-tabs__content) {
  flex: 1;
  overflow: auto;
}
</style>