<template>
  <div class="app-container">
    <el-card shadow="always" class="no-print-content">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="title">出库拣货车</span>
            <span class="subtitle">(请添加需要出库的物品)</span>
          </div>
          <div>
            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
              手动添加库存
            </el-button>
            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="List" @click="openBomSelect">
              按 BOM 套餐添加
            </el-button>
            <el-divider direction="vertical" />
            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="success" :icon="Printer" :disabled="selectedItems.length === 0" @click="handlePreview">
              生成预览 & 打印
            </el-button>
          </div>
        </div>
      </template>

      <el-alert
          v-if="selectedItems.length === 0"
          title="清单为空，请点击右上角按钮添加物品"
          type="info"
          center
          show-icon
          style="margin-bottom: 20px"
          :closable="false"
      />

      <el-table
          v-else
          :data="selectedItems"
          border
          style="width: 100%"
          row-key="uniqueKey"
      >
        <el-table-column type="index" label="序号" width="50" align="center" />

        <el-table-column label="类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="standard" label="规格型号" min-width="150" show-overflow-tooltip />

        <el-table-column prop="warehouse_location" label="库位" width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <span style="color: #409EFF; font-weight: bold;">{{ row.warehouse_location || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="available_quantity" label="当前库存" width="120" align="right">
          <template #default="{ row }">
            <span style="color: green; font-weight: bold;">{{ row.available_quantity }}</span>
          </template>
        </el-table-column>

        <el-table-column label="本次出库数" width="180" align="center" fixed="right">
          <template #default="{ row }">
            <el-input-number
                v-model="row.export_quantity"
                :min="1"
                :max="row.available_quantity"
                size="small"
                style="width: 100%"
                controls-position="right"
                :disabled="!userStore.hasPermission('outbound_selection:operation')"
                @change="(val) => handleMainQuantityChange(val, row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template #default="{ $index }">
            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" link @click="removeRow($index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="selectedItems.length > 0" style="margin-top: 15px; text-align: right; color: #606266; font-size: 14px;">
        共 <span style="color: red; font-weight: bold;">{{ selectedItems.length }}</span> 种物品，
        合计出库 <span style="color: red; font-weight: bold;">{{ totalExportCount }}</span> 件
      </div>
    </el-card>

    <el-dialog v-model="manualDialogVisible" title="选择库存物品" width="85%" top="5vh" destroy-on-close :close-on-click-modal="false">
      <div class="filter-container">
        <el-input
            v-model="searchKeyword"
            placeholder="请输入物料名称 或 规格型号 进行搜索"
            style="width: 300px"
            :prefix-icon="Search"
            clearable
            @input="filterStock"
        />
        <span style="margin-left: 15px; color: #909399; font-size: 12px;">
             提示：点击表格行可勾选；<span style="color: #F56C6C; font-weight: bold;">修改数量会自动勾选</span>
          </span>
      </div>
      <el-table
          ref="manualTableRef"
          :data="stockList"
          v-loading="stockLoading"
          height="500"
          border
          row-key="uniqueKey"
          @selection-change="handleStockSelection"
          @row-click="handleRowClick"
          style="cursor: pointer"
      >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="类型" width="90" align="center">
          <template #default="{ row }">
            <el-tag size="small" :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip />
        <el-table-column prop="standard" label="规格" show-overflow-tooltip />
        <el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
        <el-table-column prop="available_quantity" label="可用库存" width="100" align="right" />

        <el-table-column label="本次出库" width="160" align="center" fixed="right">
          <template #default="{ row }">
            <el-input-number
                v-model="row.export_quantity"
                :min="1"
                :max="row.available_quantity"
                size="small"
                style="width: 100%"
                placeholder="0"
                :disabled="!userStore.hasPermission('outbound_selection:operation')"
                @click.stop
                @change="(val) => handleManualQuantityChange(val, row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 12px; justify-content: flex-end; display: flex;"
          v-model:current-page="stockPage"
          v-model:page-size="stockPageSize"
          :total="stockTotal"
          :page-sizes="[20, 50, 100, 200]"
          layout="total, prev, pager, next"
          background
          @size-change="handleStockSizeChange"
          @current-change="handleStockPageChange"
      />
      <template #footer>
          <span style="float: left; line-height: 32px; color: #909399;">
             已勾选 {{ tempSelection.length }} 项
          </span>
        <el-button @click="manualDialogVisible = false">取消</el-button>
        <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" @click="confirmManualAdd">确认添加</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="700px" destroy-on-close :close-on-click-modal="false">
      <el-form label-width="100px">
        <el-form-item label="选择产品">
          <el-select v-model="selectedBomNo" filterable placeholder="请选择启用状态的 BOM 配方" style="width: 100%" @change="() => {}">
            <el-option
                v-for="b in bomOptions"
                :key="`${b.bom_no}_${b.version}`"
                :label="`${b.parent_name} - ${b.version}`"
                :value="b.bom_no"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产套数">
          <el-input-number v-model="bomSets" :min="1" label="套" style="width: 200px;" :disabled="!userStore.hasPermission('outbound_selection:operation')" />
          <el-tag v-if="selectedBomNo && maxBuildableSets >= 0" type="success" style="margin-left: 16px;">
            当前库存最多可成套出库: {{ maxBuildableSets }} 套
          </el-tag>
        </el-form-item>
      </el-form>

      <!-- 齐套性分析警告 -->
      <el-alert
        v-if="selectedBomNo && shortageList.length > 0 && bomSets > maxBuildableSets"
        type="error"
        :closable="false"
        style="margin: 16px 0;"
      >
        <template #title>
          <span style="font-weight: bold;">库存不足以组成 {{ bomSets }} 套，缺少以下物料：</span>
        </template>
        <el-table :data="shortageList" size="small" border style="margin-top: 8px; width: 100%;">
          <el-table-column prop="name" label="物料名称" min-width="120" />
          <el-table-column prop="sku" label="SKU" width="100" />
          <el-table-column label="需补足数量" width="100">
            <template #default="{ row }">
              <span style="color: #F56C6C; font-weight: bold;">{{ row.shortage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="可用库存" width="80">
            <template #default="{ row }">
              <span>{{ row.available }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-alert>

      <div style="margin-left: 100px; color: #909399; font-size: 12px;">
        注意：系统将自动计算所需原料数量 ( 配方用量 × 套数 )。
      </div>
      <template #footer>
        <el-button @click="bomSelectVisible = false">取消</el-button>
        <el-button 
          v-if="userStore.hasPermission('outbound_selection:operation')" 
          type="primary" 
          @click="confirmBomAdd"
          :disabled="hasShortage"
        >
          {{ hasShortage ? '库存不足，无法添加' : '一键计算并添加' }}
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
        v-model="previewVisible"
        title="出库单核对与打印"
        width="800px"
        destroy-on-close
        class="no-print-content"
    >
      <div class="print-preview-content">
        <el-alert title="请核对以下清单，确认无误后点击【确认打印】" type="info" :closable="false" style="margin-bottom: 10px;" />

        <el-table :data="validSelectedItems" border size="small" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="typeLabel" label="类型" width="80" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="standard" label="规格" />
          <el-table-column prop="warehouse_location" label="库位" width="100" />
          <el-table-column prop="export_quantity" label="本次出库" width="120" align="center">
            <template #default="{ row }">
              <span style="font-weight: bold; color: #F56C6C; font-size: 16px;">{{ row.export_quantity }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="summary-info" style="margin-top: 20px; text-align: right; font-weight: bold;">
          总计出库: <span style="color: red; font-size: 18px;">{{ totalExportCount }}</span> 件
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewVisible = false">取消</el-button>

          <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="Download" :loading="exportLoading" @click="confirmExport">
            导出 Excel
          </el-button>

          <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Printer" :loading="printLoading" @click="confirmPrint">
            确认打印 (A4)
          </el-button>
        </span>
      </template>
    </el-dialog>

    <div id="print-area">
      <div class="print-header">
        <h1>IRIS出库拣货确认单</h1>
        <div class="print-meta-row">
          <span>打印时间: {{ currentTime }}</span>
        </div>
        <div class="header-line"></div>
      </div>

      <table class="print-table">
        <thead>
        <tr>
          <th style="width: 50px;">序号</th>
          <th>物料名称</th>
          <th>规格型号</th>
          <th style="width: 80px;">库位</th>
          <th style="width: 50px;">单位</th>
          <th style="width: 90px;">出库数量</th>
          <th style="width: 60px;">备注</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in validSelectedItems" :key="index">
          <td style="text-align: center;">{{ index + 1 }}</td>
          <td class="cell-padding">{{ item.name }}</td>
          <td class="cell-padding">{{ item.standard }}</td>
          <td style="text-align: center;">{{ item.warehouse_location || '-' }}</td>
          <td style="text-align: center;">件</td>
          <td style="text-align: center; font-weight: bold; font-size: 16px;">{{ item.export_quantity }}</td>
          <td></td>
        </tr>
        <tr v-if="validSelectedItems.length === 0">
          <td colspan="7" style="text-align: center; padding: 20px;">无数据</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td colspan="5" style="text-align: right; font-weight: bold; padding-right: 15px;">合计:</td>
          <td style="text-align: center; font-weight: bold; font-size: 18px;">{{ totalExportCount }}</td>
          <td></td>
        </tr>
        </tfoot>
      </table>

      <div class="print-footer">
        <div class="signature-item">
          <span class="sig-label">库管员签字:</span>
          <span class="sig-line"></span>
        </div>
        <div class="signature-item">
          <span class="sig-label">领料人签字:</span>
          <span class="sig-line"></span>
        </div>
        <div class="signature-item">
          <span class="sig-label">日期:</span>
          <span class="sig-line"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Printer, Search, Plus, Download, List } from '@element-plus/icons-vue'
import { ElMessage, ElTable, ElMessageBox } from 'element-plus'
import { getAllStock, getStockList, printSelectionList } from '@/api/inbound/stock'
import { getBomList, getBomDetail } from '@/api/bom'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// --- 状态变量 ---
const selectedItems = ref<any[]>([])
const manualDialogVisible = ref(false)
const bomSelectVisible = ref(false)
const previewVisible = ref(false)
const exportLoading = ref(false)
const printLoading = ref(false)

const allStockData = ref<any[]>([])
const stockList = ref<any[]>([])     // 服务端分页数据
const stockTotal = ref(0)
const stockPage = ref(1)
const stockPageSize = ref(20)
const stockLoading = ref(false)
const searchKeyword = ref('')
const tempSelection = ref<any[]>([])
let stockSearchTimer: ReturnType<typeof setTimeout> | null = null

// 表格引用
const manualTableRef = ref<InstanceType<typeof ElTable>>()

// BOM 相关
const bomOptions = ref<any[]>([])
const selectedBomNo = ref('')
const bomSets = ref(1)
const currentBomDetail = ref<any[]>([])  // 当前选中的BOM明细

// 打印相关
const currentTime = ref('')

// --- 计算属性 ---
// ★ 优化：按库位排序，空库位排最后
const validSelectedItems = computed(() => {
  const filtered = selectedItems.value.filter(item => item.export_quantity > 0)
  return [...filtered].sort((a, b) => {
    const locA = a.warehouse_location || a.warehouse_loc || '';
    const locB = b.warehouse_location || b.warehouse_loc || '';
    
    // 空库位沉底
    if (!locA && locB) return 1;
    if (locA && !locB) return -1;
    if (!locA && !locB) return 0;
    
    // 自然排序（支持 A-10 排在 A-2 后面）
    return locA.localeCompare(locB, 'zh-CN', { numeric: true });
  });
})

const totalExportCount = computed(() => {
  return validSelectedItems.value.reduce((sum, item) => sum + (item.export_quantity || 0), 0)
})

// --- BOM 齐套性分析计算属性 ---
const maxBuildableSets = computed(() => {
  if (currentBomDetail.value.length === 0 || allStockData.value.length === 0) return 0
  let minSets = Infinity
  currentBomDetail.value.forEach((bomItem: any) => {
    const dosage = parseFloat(bomItem.dosage) || 0  // 单套需求量
    if (dosage <= 0) return
    // 匹配库存中的可用数量
    const stockItem = allStockData.value.find((s: any) => s.base_id && s.base_id == bomItem.child_id)
    const available = stockItem ? (stockItem.availableCount || 0) : 0
    const buildable = Math.floor(available / dosage)
    if (buildable < minSets) minSets = buildable
  })
  return minSets === Infinity ? 0 : minSets
})

const shortageList = computed(() => {
  if (currentBomDetail.value.length === 0 || allStockData.value.length === 0 || bomSets.value <= 0) return []
  const target = bomSets.value
  const shortages: any[] = []
  currentBomDetail.value.forEach((bomItem: any) => {
    const dosage = parseFloat(bomItem.dosage) || 0  // 单套需求量
    const totalNeed = dosage * target
    const stockItem = allStockData.value.find((s: any) => s.base_id && s.base_id == bomItem.child_id)
    const available = stockItem ? (stockItem.availableCount || 0) : 0
    const shortage = totalNeed - available
    if (shortage > 0) {
      shortages.push({
        name: bomItem.child_name || bomItem.name || '未知物料',
        sku: bomItem.child_sku || bomItem.sku || '-',
        need: totalNeed,
        available: available,
        shortage: shortage
      })
    }
  })
  return shortages
})

const hasShortage = computed(() => shortageList.value.length > 0 && bomSets.value > maxBuildableSets.value)

// --- 辅助方法 ---
const getTypeTag = (type: string) => {
  switch (type) {
    case 'material': return 'info'
    case 'semi': return 'warning'
    case 'product': return 'success'
    default: return ''
  }
}

// --- 核心逻辑 1：手动添加库存 ---

// 服务端加载库存列表
const loadStockList = async () => {
  stockLoading.value = true
  try {
    const res: any = await getStockList({
      page: stockPage.value,
      pageSize: stockPageSize.value,
      keyword: searchKeyword.value.trim()
    })
    // 为每个item添加uniqueKey，确保row-key唯一
    stockList.value = (res.data?.list || []).map((item: any) => ({
      ...item,
      uniqueKey: `${item.type}_${item.id}`
    }))
    stockTotal.value = res.data?.total || 0
  } catch (e) {
    ElMessage.error('加载库存列表失败')
  } finally {
    stockLoading.value = false
  }
}

// 手动选库存弹窗：加载服务端分页数据 + BOM 用全量数据
const openManualSelect = async () => {
  manualDialogVisible.value = true
  stockPage.value = 1
  searchKeyword.value = ''
  await loadStockList()

  // 仅在 BOM 关联查询需要时加载全量（一次性缓存）
  if (allStockData.value.length === 0) {
    try {
      const res: any = await getAllStock()
      const rawMaterials = (res.materials || []).map((i: any) => ({ ...i, type: 'material', typeLabel: '采购件' }))
      const rawSemis = (res.semis || []).map((i: any) => ({ ...i, type: 'semi', typeLabel: '半成品' }))
      const rawProducts = (res.products || []).map((i: any) => ({ ...i, type: 'product', typeLabel: '成品' }))
      const list = [...rawMaterials, ...rawSemis, ...rawProducts]
      allStockData.value = list.map((i: any) => ({
        ...i,
        name: i.name || i.material_name || i.product_name || '未知名称',
        standard: i.standard || i.spec_model || '',
        warehouse_location: i.warehouse_location || (i.warehouse_loc) || '',
        uniqueKey: `${i.type}_${i.id}`,
        available_quantity: parseFloat(i.available_quantity) || 0,
        export_quantity: 1
      }))
    } catch (e) {
      ElMessage.error('加载全量库存数据失败（BOM 功能可能受影响）')
    }
  } else {
    allStockData.value.forEach(item => item.export_quantity = 0)
  }
}

// 搜索框防抖触发服务端过滤
const filterStock = () => {
  if (stockSearchTimer) clearTimeout(stockSearchTimer)
  stockSearchTimer = setTimeout(() => {
    stockPage.value = 1
    loadStockList()
  }, 350)
}

// 分页切换
const handleStockPageChange = (page: number) => {
  stockPage.value = page
  loadStockList()
}

const handleStockSizeChange = (size: number) => {
  stockPageSize.value = size
  stockPage.value = 1
  loadStockList()
}

const handleStockSelection = (val: any[]) => { tempSelection.value = val }

// 点击行任意位置切换勾选
const handleRowClick = (row: any) => {
  if (manualTableRef.value) {
    manualTableRef.value.toggleRowSelection(row, undefined)
  }
}

// 弹窗内：当数量变化时，自动联动勾选状态
const handleManualQuantityChange = (val: number | undefined, row: any) => {
  if (!manualTableRef.value) return
  if (val && val > 0) {
    manualTableRef.value.toggleRowSelection(row, true)
  } else {
    manualTableRef.value.toggleRowSelection(row, false)
  }
}

const confirmManualAdd = () => {
  if (tempSelection.value.length === 0) return ElMessage.warning('请先勾选需要添加的物品')

  const newItems = tempSelection.value.filter(item =>
      !selectedItems.value.find(existing => existing.uniqueKey === item.uniqueKey)
  )

  if (newItems.length === 0) {
    manualDialogVisible.value = false
    return ElMessage.warning('选中的物品已全部在清单中')
  }

  const itemsToAdd = newItems.map(item => {
    const copy = JSON.parse(JSON.stringify(item))
    copy.export_quantity = item.export_quantity || 0
    return copy
  })

  selectedItems.value.push(...itemsToAdd)
  manualDialogVisible.value = false
  tempSelection.value = []
  ElMessage.success(`成功添加 ${itemsToAdd.length} 项物品`)
}

// 主界面数量变更逻辑 (降为0时弹窗移除)
const handleMainQuantityChange = (val: number | undefined, row: any) => {
  if (val === 0) {
    ElMessageBox.confirm(
        `物品【${row.name}】数量为0，确定要从清单中移除吗？`,
        '移除确认',
        {
          confirmButtonText: '移除',
          cancelButtonText: '保留 (恢复为1)',
          type: 'warning',
        }
    )
        .then(() => {
          const index = selectedItems.value.findIndex(item => item.uniqueKey === row.uniqueKey)
          if (index > -1) {
            selectedItems.value.splice(index, 1)
            ElMessage.success('已移除')
          }
        })
        .catch(() => {
          row.export_quantity = 1
        })
  }
}

// --- 核心逻辑 2：按 BOM 添加 ---

const openBomSelect = async () => {
  bomSelectVisible.value = true
  bomSets.value = 1
  selectedBomNo.value = ''
  currentBomDetail.value = []
  try {
    const res = await getBomList({ active_only: true })
    bomOptions.value = res.data || []
  } catch (e) {
    ElMessage.error('加载 BOM 列表失败')
  }
}

// 监听 BOM 选择变化，自动加载明细并计算齐套性
watch(selectedBomNo, async (newBomNo) => {
  if (!newBomNo) {
    currentBomDetail.value = []
    return
  }
  try {
    const detailRes = await getBomDetail(newBomNo)
    currentBomDetail.value = detailRes.data?.children || []
  } catch (e) {
    ElMessage.error('加载 BOM 明细失败')
    currentBomDetail.value = []
  }
})

const confirmBomAdd = async () => {
  if(!selectedBomNo.value) return ElMessage.warning('请选择 BOM');

  if (allStockData.value.length === 0) {
    await openManualSelect()
    manualDialogVisible.value = false
  }

  try {
    const detailRes = await getBomDetail(selectedBomNo.value)
    const bomRows = detailRes.data?.children || []

    let addedCount = 0;
    bomRows.forEach((bomItem: any) => {
      const needQty = (parseFloat(bomItem.dosage) || 0) * bomSets.value
      // ★ BOM 添加时，匹配本地库存数据，带入库位信息
      const stockCandidate = allStockData.value.find(s =>
          (s.base_id && s.base_id == bomItem.child_id)
      )

      if (stockCandidate) {
        const existing = selectedItems.value.find(e => e.uniqueKey === stockCandidate.uniqueKey)
        if (existing) {
          existing.export_quantity += needQty
        } else {
          const newItem = JSON.parse(JSON.stringify(stockCandidate))
          // 如果后端 BomService 也返回了 warehouse_location (聚合的)，这里优先使用
          if (bomItem.warehouse_location) {
            newItem.warehouse_location = bomItem.warehouse_location
          }
          newItem.export_quantity = needQty
          selectedItems.value.push(newItem)
        }
        addedCount++
      }
    })

    if(addedCount > 0) {
      ElMessage.success(`成功添加 BOM 相关物料，共 ${addedCount} 类`)
      bomSelectVisible.value = false
    } else {
      ElMessage.warning('库存中未找到该 BOM 所需的任何原料')
    }
  } catch(e) {
    ElMessage.error('获取 BOM 详情失败')
  }
}

// --- 通用逻辑 ---

const removeRow = (index: number) => {
  selectedItems.value.splice(index, 1)
}

const handlePreview = () => {
  if (validSelectedItems.value.length === 0) {
    ElMessage.warning('请先添加物品并填写出库数量')
    return
  }
  const now = new Date();
  currentTime.value = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
  previewVisible.value = true
}

const confirmPrint = async () => {
  previewVisible.value = false;
  // 记录日志
  try {
    const payload = validSelectedItems.value.map(item => ({
      name: item.name, standard: item.standard, quantity: item.export_quantity
    }));
    printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
  } catch (e) {}

  setTimeout(() => {
    window.print();
  }, 300);
}

const confirmExport = () => {
  if (validSelectedItems.value.length === 0) return;
  exportLoading.value = true;
  try {
    let csvContent = "\uFEFF";
    csvContent += "类型,名称,规格型号,库位,本次出库数量\n";
    validSelectedItems.value.forEach(item => {
      const safeName = (item.name || '').replace(/,/g, ' ');
      const safeStd = (item.standard || '').replace(/,/g, ' ');
      const safeLoc = (item.warehouse_location || '').replace(/,/g, ' ');
      csvContent += `${item.typeLabel},${safeName},${safeStd},${safeLoc},${item.export_quantity}\n`;
    });
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    const timestamp = new Date().toISOString().slice(0,19).replace(/[-T:]/g, "");
    link.download = `出库拣货单_${timestamp}.csv`;
    link.click();
    ElMessage.success('导出成功');
    previewVisible.value = false;
  } catch (err) {
    ElMessage.error('导出文件失败');
  } finally {
    exportLoading.value = false;
  }
}
</script>

<style scoped>
/* ================= 屏幕显示样式 ================= */
.card-header { display: flex; justify-content: space-between; align-items: center; }
.header-left .title { font-size: 18px; font-weight: bold; margin-right: 10px; }
.header-left .subtitle { font-size: 12px; color: #909399; }
.filter-container { margin-bottom: 20px; }
.app-container { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; }
.app-container .el-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ================= ★★★ 打印专用样式 ★★★ ================= */
#print-area { display: none; }
@media print {
  @page { margin: 0; size: auto; }
  body * { visibility: hidden; }
  .el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
  #print-area, #print-area * { visibility: visible; }
  #print-area {
    position: fixed; left: 0; top: 0; width: 100%; height: 100%;
    margin: 0; padding: 20mm; background-color: white;
    display: block !important; z-index: 99999;
  }
  .print-header { text-align: center; margin-bottom: 20px; }
  .print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
  .print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
  .header-line { border-bottom: 2px solid #000; margin-top: 5px; }
  .print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
  .print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
  .print-table th { text-align: center; font-weight: bold; }
  .cell-padding { padding-left: 10px; }
  .print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
  .signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
  .sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
  .sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
}
</style>
