<template>
  <el-dialog v-model="dialogVisible" title="出库执行" width="90%" :before-close="handleClose" destroy-on-close>
    <div class="outbound-execution-container">
      <!-- 订单信息头 -->
      <div class="order-header">
        <div class="order-info">
          <div class="order-title">
            <h2>出库单: {{ order.orderNo }}</h2>
            <dict-tag :options="out_order_status" :value="order.orderStatus" />
          </div>
          <div class="order-meta">
            <span><el-icon>
                <User />
              </el-icon> 出库人: {{ order.applicantName }}</span>
            <span><el-icon>
                <Calendar />
              </el-icon> 出库时间: {{ formatDate(order.applyTime) }}</span>
          </div>
        </div>
        <div class="order-actions"></div>
      </div>

      <!-- 双栏布局 -->
      <div class="execution-layout">
        <!-- 左栏：出库单明细 -->
        <div class="detail-section">
          <div class="section-header">
            <h3><el-icon>
                <List />
              </el-icon> 出库单明细</h3>
          </div>

          <el-table :data="orderDetails" stripe highlight-current-row :current-row-key="currentDetailId"
            height="calc(100vh - 320px)" v-loading="loadingDetails">
            <el-table-column type="expand">
              <template #default="props">
                <el-table v-loading="loading" :data="props.row.wmsOutboundItemInventoryList">
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="关联ID" align="center" prop="relationId" />
                  <el-table-column label="出库明细ID" align="center" prop="itemId" />
                  <el-table-column label="出库单ID" align="center" prop="orderId" />
                  <el-table-column label="库存ID" align="center" prop="inventoryId" />
                  <el-table-column label="RFID标签ID" align="center" prop="rfidTagId" />
                  <el-table-column label="RFID编码" align="center" prop="rfidCode" />
                  <el-table-column label="EPC编码" align="center" prop="epcCode" />
                  <el-table-column label="TID编码" align="center" prop="tidCode" />
                  <el-table-column label="物资ID" align="center" prop="materialId" />
                  <el-table-column label="批次号" align="center" prop="batchNo" />
                  <el-table-column label="仓库id" align="center" prop="warehouseId" />
                  <el-table-column label="库区id" align="center" prop="areaId" />
                  <el-table-column label="库位ID" align="center" prop="locationId" />
                  <el-table-column label="数量" align="center" prop="quantity" />
                  <el-table-column label="单位成本" align="center" prop="unitCost" />
                  <el-table-column label="出库时间" align="center" prop="outboundTime" width="180">
                    <template #default="scope">
                      <span>{{ parseTime(scope.row.outboundTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否已撤销" align="center" prop="isCanceled" />
                  <el-table-column label="撤销时间" align="center" prop="cancelTime" width="180">
                    <template #default="scope">
                      <span>{{ parseTime(scope.row.cancelTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="撤销人" align="center" prop="cancelBy" />
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                      <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['ware:wmsOutboundItemInventory:edit']">修改</el-button>
                      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['ware:wmsOutboundItemInventory:remove']">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="materialId" label="物资编码" width="120" />
            <el-table-column prop="materialName" label="物资名称" />
            <el-table-column prop="material" label="规格型号" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="planQuantity" label="计划数量" width="150" align="right" />
            <el-table-column prop="actualQuantity" label="实际数量" width="150" align="right" />
            <el-table-column prop="amount" label="金额" width="150" align="right" />
            <el-table-column label="操作" width="100" align="center" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleCancel(scope.row)">
                  撤销
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 右栏：扫码操作区 -->
        <div class="scan-section">
          <div class="section-header">
            <h3>
              <!-- <el-icon><Scan /></el-icon>  -->
              扫码出库
            </h3>
            <el-button type="info" size="small" @click="showBatchRecommendation">
              <el-icon>
                <MagicStick />
              </el-icon>
              智能推荐批次
            </el-button>
          </div>

          <!-- 扫码输入区域 -->
          <div class="scan-input-area">
            <div class="input-wrapper">
              <el-input v-model="scanInput" placeholder="请扫描二维码或输入批次号" size="large" clearable @keyup.enter="handleScan"
                @clear="clearScanResult" ref="scanInputRef">
                <template #prepend>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
                <template #append>
                  <el-button type="primary" :loading="scanning" @click="handleScan">
                    确认
                  </el-button>
                </template>
              </el-input>
            </div>

            <!-- 扫描结果提示 -->
            <div v-if="scanMessage" class="scan-message" :class="scanMessage.type">
              <el-icon v-if="scanMessage.type === 'success'">
                <CircleCheck />
              </el-icon>
              <el-icon v-if="scanMessage.type === 'error'">
                <CircleClose />
              </el-icon>
              <el-icon v-if="scanMessage.type === 'warning'">
                <Warning />
              </el-icon>
              <span>{{ scanMessage.text }}</span>
            </div>
          </div>

          <!-- 批次信息展示 -->
          <div v-if="currentBatch" class="batch-info-card">
            <div class="batch-header">
              <h4>批次信息</h4>
              <el-tag type="info" size="small">
                库存: {{ currentBatch.availableQuantity }} {{ currentBatch.unit }}
              </el-tag>
            </div>
            <div class="batch-details">
              <div class="detail-row">
                <span class="label">批次号:</span>
                <span class="value batch-no">{{ currentBatch.batchNo }}</span>
              </div>
              <div class="detail-row">
                <span class="label">物资:</span>
                <span class="value">{{ currentBatch.materialId }}</span>
              </div>
              <div class="detail-row">
                <span class="label">货架:</span>
                <el-tag size="small" type="primary">
                  {{ currentBatch.locationId }}
                </el-tag>
              </div>
              <div class="detail-row">
                <span class="label">有效期:</span>
                <span class="value" :class="{
                  'expiry-warning': isNearExpiry(currentBatch.expirationDate)
                }">
                  {{ formatDate(currentBatch.expirationDate) }}
                  <el-icon v-if="isNearExpiry(currentBatch.expirationDate)" color="#e6a23c">
                    <Warning />
                  </el-icon>
                </span>
              </div>
              <div class="detail-row">
                <span class="label">供应商:</span>
                <span class="value">{{ currentBatch.supplierName }}</span>
              </div>
            </div>

            <!-- 出库数量输入 -->
            <div class="quantity-input-section">
              <div class="input-row">
                <span class="label">本次出库数量:</span>
                <el-input-number v-model="outboundQuantity" :min="0.01" :precision="3" :step="1" size="large"
                  controls-position="right" style="width: 200px;" />
                <span class="unit">{{ currentBatch.unit }}</span>
              </div>
              <div class="quantity-tips">
                <span v-if="remainingNeed > 0">
                  还需出库: <strong>{{ remainingNeed }}</strong> {{ currentBatch.unit }}
                </span>
                <el-button type="text" size="small"
                  @click="outboundQuantity = Math.min(currentBatch.quantity, remainingNeed)">
                  填充所需数量
                </el-button>
                <el-button type="text" size="small" @click="outboundQuantity = currentBatch.quantity">
                  全部出库
                </el-button>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button type="primary" size="large" :loading="processingOutbound" :disabled="!canOutbound"
                @click="handleOutbound">
                <el-icon>
                  <Check />
                </el-icon>
                确认出库
              </el-button>
              <el-button size="large" @click="clearScanResult">
                取消
              </el-button>
            </div>
          </div>

          <!-- 本次出库流水记录 -->
          <div class="transaction-section">
            <div class="section-header">
              <h4><el-icon>
                  <Document />
                </el-icon> 本次出库记录</h4>
              <el-button type="danger" size="small" :disabled="!lastTransaction" @click="handleUndoLast">
                <el-icon>
                  <Delete />
                </el-icon>
                撤销最后操作
              </el-button>
            </div>

            <el-table :data="recentTransactions" stripe height="200px" v-loading="loadingTransactions">
              <el-table-column label="时间" width="140">
                <template #default="{ row }">
                  {{ formatTime(row.scannedAt) }}
                </template>
              </el-table-column>
              <el-table-column prop="batchNo" label="批次号" width="150" />
              <el-table-column label="出库数量" width="100" align="right">
                <template #default="{ row }">
                  {{ row.quantity }} {{ row.unit }}
                </template>
              </el-table-column>
              <el-table-column prop="location" label="库位" width="100" />
              <el-table-column label="操作" width="80">
                <template #default="{ row }">
                  <el-button type="danger" size="small" link @click="undoTransaction(row.id)">
                    撤销
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 批次详情对话框 -->
      <BatchDetailDialog v-model="showBatchDialog" :detail="selectedDetail" :transactions="detailTransactions" />

      <!-- 批次推荐对话框 -->
      <BatchRecommendationDialog v-model="showRecommendationDialog" :detail="selectedDetail"
        @select-batch="handleSelectRecommendedBatch" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  Calendar,
  Check,
  VideoPause,
  VideoPlay,
  List,
  Search,
  CircleCheck,
  CircleClose,
  Warning,
  Document,
  Delete,
  MagicStick
} from '@element-plus/icons-vue'
import BatchDetailDialog from './BatchDetailDialog.vue'
import BatchRecommendationDialog from './BatchRecommendationDialog.vue'
import { listWmsOutboundOrderItem, getWmsOutboundOrderItem, updateWmsOutboundOrderItem } from '@/api/ware/wmsOutboundOrderItem'
import { listWmsOperationRecord, addWmsOperationRecord } from '@/api/ware/wmsOperationRecord'
import { updateWmsOutboundOrder, confirmOutbound } from '@/api/ware/wmsOutboundOrder'
import useUserStore from '@/store/modules/user'
import { cancelByDetailId, cancelByRelationId } from '@/api/ware/wmsOutboundOrder'
import { listWmsInventory } from "@/api/ware/wmsInventory"
const { proxy } = getCurrentInstance()

const { outbound_type, out_order_status } = proxy.useDict('outbound_type', 'out_order_status')

const props = defineProps({
  visible: Boolean,
  order: Object
})

const emit = defineEmits(['update:visible', 'order-updated', 'operation-log'])
const userStore = useUserStore()
// 响应式数据
const orderDetails = ref([])
const currentDetailId = ref('')
const currentBatch = ref(null)
const scanInput = ref('')
const scanMessage = ref(null)
const outboundQuantity = ref(0)
const recentTransactions = ref([])
const selectedDetail = ref(null)
const detailTransactions = ref([])
const lastTransaction = ref(null)

// 对话框控制
const dialogVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  }
})

// 对话框关闭处理
const handleClose = () => {
  emit('update:visible', false)
}

// 状态标志
const loadingDetails = ref(false)
const scanning = ref(false)
const processingOutbound = ref(false)
const confirming = ref(false)
const loadingTransactions = ref(false)

// 对话框控制
const showBatchDialog = ref(false)
const showRecommendationDialog = ref(false)

// 计算属性
const totalPlanned = computed(() => {
  return orderDetails.value.reduce((sum, detail) => sum + (detail.planQuantity || 0), 0)
})

const totalActual = computed(() => {
  return orderDetails.value.reduce((sum, detail) => sum + (detail.actualQuantity || 0), 0)
})

const completionRate = computed(() => {
  return totalPlanned.value > 0 ? Math.min((totalActual.value / totalPlanned.value) * 100, 100) : 0
})

const canConfirm = computed(() => {
  if (props.order.status !== 'EXECUTING') return false
  return orderDetails.value.every(detail => detail.actualQuantity > 0)
})

const remainingNeed = computed(() => {
  if (!currentDetailId.value || !currentBatch.value) return 0
  const detail = orderDetails.value.find(d => d.itemId === currentDetailId.value)
  if (!detail) return 0
  return Math.max(0, (detail.planQuantity || 0) - (detail.actualQuantity || 0))
})

const maxOutboundQuantity = computed(() => {
  if (!currentBatch.value) return 0
  return Math.min(currentBatch.value.availableQuantity, remainingNeed.value)
})

const canOutbound = computed(() => {
  return outboundQuantity.value > 0 &&
    outboundQuantity.value <= maxOutboundQuantity.value &&
    !processingOutbound.value
})

// 方法
const loadOrderDetails = async () => {
  loadingDetails.value = true
  try {
    const response = await listWmsOutboundOrderItem({ orderId: props.order.orderId, pageNum: 1, pageSize: 1000 })
    orderDetails.value = response.rows || []
  } catch (error) {
    ElMessage.error('加载明细失败')
  } finally {
    loadingDetails.value = false
  }
}

const loadRecentTransactions = async () => {
  loadingTransactions.value = true
  try {
    const response = await listWmsOperationRecord({
      orderId: props.order.orderId,
      operationType: 'OUTBOUND',
      pageSize: 50, // 限制只显示最近的50条记录
      sortBy: 'createTime',
      sortDesc: true
    })
    recentTransactions.value = response.data || []
    lastTransaction.value = response.data[0] || null
  } catch (error) {
    console.error('加载交易记录失败:', error)
    ElMessage.error('加载交易记录失败')
  } finally {
    loadingTransactions.value = false
  }
}

const focusScanInput = () => {
  nextTick(() => {
    const input = document.querySelector('.scan-input-area input')
    if (input) {
      ; (input).focus()
    }
  })
}

const handleScan = async () => {
  if (!scanInput.value.trim()) {
    showScanMessage('请输入或扫描批次号', 'warning')
    return
  }

  scanning.value = true
  scanMessage.value = null

  try {

    // 调用扫描批次接口
    const scanResponse = await listWmsInventory({
      rfidTag: scanInput.value
    })

    const scanItem = scanResponse.rows?.length ? scanResponse.rows[0] : null;

    if (!scanItem) {
      showScanMessage('未找到对应的批次', 'error')
      return
    }

    // 检查该库存物资是否在出库的明细中
    const matchedDetail = orderDetails.value.find(d => d.materialId === scanItem.materialId)

    if (matchedDetail) {
      currentDetailId.value = matchedDetail.itemId

      currentBatch.value = scanItem
      // 自动设置出库数量
      const maxQty = Math.min(scanItem.availableQuantity, (matchedDetail.planQuantity || 0) - (matchedDetail.actualQuantity || 0))
      outboundQuantity.value = maxQty > 0 ? maxQty : 0

      showScanMessage(`成功匹配物资: ${matchedDetail.materialId}`, 'success')
    } else {
      showScanMessage('该物资不在出库单计划中', 'error')
      currentBatch.value = null
    }
  } catch (error) {
    showScanMessage(error.message || '扫描失败', 'error')
    currentBatch.value = null
  } finally {
    scanning.value = false
    scanInput.value = ''
    focusScanInput()
  }
}

const handleOutbound = async () => {
  if (!currentBatch.value || !currentDetailId.value) return

  processingOutbound.value = true

  try {
    // 获取当前明细
    const currentDetail = orderDetails.value.find(d => d.itemId === currentDetailId.value)
    if (!currentDetail) {
      showScanMessage('未找到对应的出库明细', 'error')
      return
    }

    // 确认出库
    const confirmResponse = await confirmOutbound({
      rfidTag: currentBatch.value.rfidTag,
      num: outboundQuantity.value,
      orderId: props.order.orderId,
      operatorId: userStore.id,
    })

    if (confirmResponse.code !== 200) {
      showScanMessage(confirmResponse.msg || '出库失败', 'error')
      return
    }

    // 更新出库单明细的实际数量
    await updateWmsOutboundOrderItem({
      itemId: currentDetail.itemId,
      actualQuantity: confirmResponse.data.pickingQuantity + (currentDetail.actualQuantity || 0),
    })

    showScanMessage(`出库成功: ${outboundQuantity.value} ${currentBatch.value.unit}`, 'success')

    // 重新加载数据
    await Promise.all([
      loadOrderDetails(),
    ])

    // 清空当前批次
    clearScanResult()

    // 触发更新事件
    emit('order-updated')

  } catch (error) {
    showScanMessage(error.message || '出库失败', 'error')
  } finally {
    processingOutbound.value = false
  }
}


const handleUndoLast = async () => {
  if (!lastTransaction.value) return

  try {
    // 获取最后一次操作记录
    const lastRecord = lastTransaction.value

    // 找到对应的出库单明细
    const currentDetail = orderDetails.value.find(d => d.id === lastRecord.itemId)
    if (!currentDetail) {
      ElMessage.error('未找到对应的出库明细')
      return
    }

    // 计算新的实际数量（减去已出库的数量）
    const newActualQuantity = Math.max(0, (currentDetail.actualQuantity || 0) - (lastRecord.quantity || 0))

    // 更新出库单明细
    await updateWmsOutboundOrderItem({
      id: currentDetail.id,
      actualQuantity: newActualQuantity
    })

    // 记录撤销操作日志
    await addWmsOperationRecord({
      orderId: props.order.id,
      itemId: currentDetail.id,
      operationType: 'UNDO_OUTBOUND',
      operationContent: `撤销批次 ${lastRecord.batchNo} 的出库操作，数量 ${lastRecord.quantity || 0} ${lastRecord.unit}`,
      materialId: currentDetail.materialId,
      batchNo: lastRecord.batchNo,
      quantity: -(lastRecord.quantity || 0), // 使用负数表示撤销
      unit: currentDetail.unit
    })

    ElMessage.success('已撤销最后操作')

    // 重新加载数据
    await Promise.all([
      loadOrderDetails(),
      // loadRecentTransactions()
    ])

    emit('operation-log', {
      type: 'UNDO',
      message: `撤销批次 ${lastRecord.batchNo} 的出库`,
      timestamp: new Date()
    })

  } catch (error) {
    console.error('撤销失败:', error)
    ElMessage.error('撤销失败')
  }
}

const showBatchRecommendation = async () => {
  // if (!selectedDetail.value) {
  //   const detail = orderDetails.value.find(d => d.id === currentDetailId.value)
  //   if (!detail) {
  //     ElMessage.warning('请先选择需要出库的明细行')
  //     return
  //   }
  //   selectedDetail.value = detail
  // }
  showRecommendationDialog.value = true
}

const handleSelectRecommendedBatch = (batch) => {
  currentBatch.value = batch
  scanInput.value = batch.batchNo
  showRecommendationDialog.value = false
  // 自动触发扫描
  nextTick(() => {
    handleScan()
  })
}

const clearScanResult = () => {
  currentBatch.value = null
  outboundQuantity.value = 0
  scanMessage.value = null
  focusScanInput()
}

const showScanMessage = (text, type = 'info') => {
  scanMessage.value = { text, type }
  setTimeout(() => {
    scanMessage.value = null
  }, 3000)
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

const formatTime = (date) => {
  return new Date(date).toLocaleString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const isNearExpiry = (expiryDate) => {
  const expiry = new Date(expiryDate)
  const now = new Date()
  const diffDays = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  return diffDays <= 30 && diffDays > 0
}

const handleCancel = async (row) => {
  try {
    await cancelByDetailId({ itemId: row.itemId }, userStore.id)
    ElMessage.success('已撤销成功')
  } catch (error) {
    console.error('撤销失败:', error)
    ElMessage.error('撤销失败')
  }
}
/**
 * 监听键盘回车键
 */
const handleKeyDown = (e) => {
  if (e.key === 'Enter') {
    handleScan()
  }
}

/**
 * 监听键盘空格键，确认出库
 */
const handleSpaceKeyDown = (e) => {
  if (e.key === 'Space') {
    handleOutbound()
  }
}

// 生命周期
onMounted(() => {
  focusScanInput();
  // 添加事件监听器
  document.addEventListener('keydown', handleKeyDown)
  document.addEventListener('keydown', handleSpaceKeyDown)
})

onBeforeUnmount(() => {
  // 移除事件监听器
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('keydown', handleSpaceKeyDown)
})

watch(() => props.order, async (newOrder) => {
  if (newOrder) {
    await loadOrderDetails()
    // await loadRecentTransactions()
  }
}, { deep: true })

</script>

<style scoped>
.outbound-execution-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.order-info {
  flex: 1;
}

.order-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.order-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.order-meta {
  display: flex;
  gap: 25px;
  font-size: 14px;
  opacity: 0.9;
}

.order-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

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

.execution-layout {
  flex: 1;
  display: flex;
  min-height: 0;
}

.detail-section,
.scan-section {
  flex: 1;
  padding: 20px;
  overflow: auto;
  border-right: 1px solid #ebeef5;
}

.scan-section {
  max-width: 500px;
  background: #f8fafc;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}

.section-header h3,
.section-header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.section-header h3 {
  color: #303133;
}

.section-header h4 {
  color: #606266;
}

.summary-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.material-name {
  font-weight: 500;
  color: #303133;
}

.material-spec {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.planned-quantity {
  font-weight: 600;
  color: #303133;
}

.actual-quantity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.actual-quantity span {
  font-weight: 600;
}

.actual-quantity .completed {
  color: #67c23a;
}

.actual-quantity .warning {
  color: #e6a23c;
}

.scan-input-area {
  margin-bottom: 20px;
}

.input-wrapper {
  margin-bottom: 10px;
}

.scan-message {
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s;
}

.scan-message.success {
  background: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.scan-message.error {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}

.scan-message.warning {
  background: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #faecd8;
}

.batch-info-card {
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  animation: slideIn 0.3s;
}

.batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.batch-header h4 {
  margin: 0;
  color: #303133;
}

.batch-details {
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-row .label {
  width: 80px;
  color: #909399;
  flex-shrink: 0;
}

.detail-row .value {
  flex: 1;
  color: #606266;
}

.batch-no {
  font-family: 'Monaco', 'Consolas', monospace;
  background: #f6f8fa;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

.expiry-warning {
  color: #e6a23c !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.quantity-input-section {
  margin: 20px 0;
  padding: 15px;
  background: #f8fafc;
  border-radius: 6px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.input-row .label {
  font-weight: 500;
  color: #303133;
}

.quantity-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.transaction-section {
  margin-top: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-table__row.current-row) {
  background-color: #ecf5ff !important;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}
</style>