<template>
  <ElDialog
    v-model="visible"
    title="拣胚失败"
    width="1400px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="pick-fail-info">
      <span>
        您选择了
        <strong>{{ orderIds.length }}</strong>
        件操作单，如拣胚失败，库位没有实物库存，
        <strong style="color: #f56c6c"> 建议创建出库单 </strong>
        ，详细库存信息如下：
      </span>
    </div>
    <div class="table-view">
      <TableView
        :paginated-data="tableData"
        :columns="columns"
        serial-numberable
      >
        <template #skuImage="{ row }">
          <el-image
            v-if="row.skuImage"
            :src="row.skuImage"
            style="width: 50px; height: 50px"
            fit="contain"
            :preview-src-list="[row.skuImage]"
            preview-teleported
          />
        </template>
        <template #producingQuantity="{ row }">
          <span style="color: #e6a23c; font-weight: bold">{{
            row.producingQuantity
          }}</span>
        </template>
        <template #suggestOutQuantity="{ row }">
          <span style="color: #f56c6c; font-weight: bold">{{
            row.suggestOutQuantity
          }}</span>
        </template>
        <template #afterOutStock="{ row }">
          <span style="color: #f56c6c">{{ row.afterOutStock }}</span>
        </template>
      </TableView>
    </div>

    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <span class="item">
          <ElButton @click="visible = false">取消</ElButton>
        </span>
        <span class="item">
          <ElButton
            type="primary"
            :loading="submitLoading"
            @click="handleCreateOutbound"
          >
            快速创建出库单
          </ElButton>
        </span>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { pickFailApi, createOutboundOrderApi } from '@/api/factoryOrderNew'
import type { PickFailData } from '@/types/api/factoryOrderNew'
import TableView from '@/components/TableView.vue'
import type { CustomColumn } from '@/types/table'

const emit = defineEmits<{
  success: []
}>()

const visible = ref(false)
const submitLoading = ref(false)
const tableData = ref<PickFailData[]>([])
const orderIds = ref<(number | string)[]>([])

const columns: CustomColumn<PickFailData>[] = [
  {
    key: 'warehouseName',
    prop: 'warehouseName',
    label: '仓库名称',
    minWidth: 120,
  },
  {
    key: 'skuImage',
    label: 'SKU图片',
    width: 100,
    align: 'center',
    slot: 'skuImage',
  },
  {
    key: 'productName',
    prop: 'productName',
    label: '商品名称',
    minWidth: 160,
    showOverflowTooltip: true,
  },
  { key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 70 },
  { key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 110 },
  {
    key: 'currentStock',
    prop: 'currentStock',
    label: '当前库存数量',
    minWidth: 120,
    align: 'center',
  },
  {
    key: 'occupiedQuantity',
    prop: 'occupiedQuantity',
    label: '占用数量',
    minWidth: 90,
    align: 'center',
  },
  {
    key: 'currentAvailableStock',
    prop: 'currentAvailableStock',
    label: '当前可用库存',
    minWidth: 120,
    align: 'center',
  },
  {
    key: 'producingQuantity',
    prop: 'producingQuantity',
    label: '生产中数量',
    minWidth: 110,
    align: 'center',
    slot: 'producingQuantity',
  },
  {
    key: 'suggestOutQuantity',
    prop: 'suggestOutQuantity',
    label: '建议出库数量',
    minWidth: 120,
    align: 'center',
    slot: 'suggestOutQuantity',
  },
  {
    key: 'afterOutStock',
    prop: 'afterOutStock',
    label: '出库后库存数量',
    minWidth: 130,
    align: 'center',
    slot: 'afterOutStock',
  },
  {
    key: 'afterOutOccupied',
    prop: 'afterOutOccupied',
    label: '出库后占用数量',
    minWidth: 130,
    align: 'center',
  },
  {
    key: 'afterOutAvailable',
    prop: 'afterOutAvailable',
    label: '出库后可用库存',
    minWidth: 130,
    align: 'center',
  },
]

const open = async (ids: (number | string)[]) => {
  orderIds.value = ids
  visible.value = true
  try {
    const res = await pickFailApi(ids)
    tableData.value = res.data || []
  } catch (_e) {
    tableData.value = []
  }
}

const handleClose = () => {
  tableData.value = []
}

const handleCreateOutbound = async () => {
  submitLoading.value = true
  try {
    await createOutboundOrderApi(orderIds.value)
    ElMessage.success('创建出库单成功')
    visible.value = false
    emit('success')
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '创建出库单失败')
  } finally {
    submitLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.pick-fail-info {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
}
.table-view {
  height: 600px;
}
</style>
