<template>
  <ElDialog
    v-model="visible"
    title="拣胚完成"
    width="1200px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="pick-complete-actions" style="margin-bottom: 10px">
      <span class="item">
        <ElButton type="success" @click="handleCreateInbound">
          创建入库单
        </ElButton>
      </span>
    </div>
    <div class="table-view">
      <TableView
        :paginated-data="tableData"
        :columns="columns"
        serial-numberable
        selectionable
      >
        <template #skuImage="{ row }">
          <el-image
            v-if="row.variantImage"
            :src="row.variantImage"
            style="width: 50px; height: 50px"
            fit="contain"
            :preview-src-list="[row.variantImage]"
            preview-teleported
          />
        </template>
        <template #pickQuantity="{ row }">
          <span style="color: #e6a23c; font-weight: bold">{{
            row.pickQuantity
          }}</span>
        </template>
        <template #pickStatus="{ row }">
          <span v-if="row.pickStatus === 'fail'" style="color: #f56c6c">
            ✕ 无法拣胚
          </span>
          <span v-else-if="row.pickStatus === 'partial'" class="item">
            <ElButton type="warning" size="small">调整拣胚顺序</ElButton>
          </span>
          <span v-else style="color: #67c23a"> ✓ 直接拣胚 </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="handleSubmit"
          >
            确定
          </ElButton>
        </span>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { pickCompleteApi } from '@/api/factoryOrderNew'
import type { PickCompleteData } 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<PickCompleteData[]>([])
const orderIds = ref<(number | string)[]>([])

const columns: CustomColumn<PickCompleteData>[] = [
  {
    key: 'warehouseName',
    prop: 'warehouseName',
    label: '仓库名称',
    minWidth: 100,
  },
  {
    key: 'skuImage',
    label: 'SKU图片',
    width: 100,
    align: 'center',
    slot: 'skuImage',
  },
  {
    key: 'productName',
    prop: 'productName',
    label: '商品名称',
    minWidth: 120,
    showOverflowTooltip: true,
  },
  { key: 'styleNo', prop: 'styleNo', label: '款号', minWidth: 80 },
  { key: 'stockSku', prop: 'stockSku', label: '库存SKU', minWidth: 120 },
  {
    key: 'pickQuantity',
    prop: 'pickQuantity',
    label: '本次拣胚数量',
    minWidth: 110,
    align: 'center',
    slot: 'pickQuantity',
  },
  {
    key: 'availableStock',
    prop: 'availableStock',
    label: '可调配库存',
    minWidth: 100,
    align: 'center',
  },
  {
    key: 'stockQuantity',
    prop: 'stockQuantity',
    label: '库存数量',
    minWidth: 90,
    align: 'center',
  },
  {
    key: 'producingQuantity',
    prop: 'producingQuantity',
    label: '生产中数量',
    minWidth: 100,
    align: 'center',
  },
  {
    key: 'occupiedQuantity',
    prop: 'occupiedQuantity',
    label: '占用数量',
    minWidth: 90,
    align: 'center',
  },
  {
    key: 'pickStatus',
    label: '拣胚情况',
    minWidth: 130,
    align: 'center',
    fixed: 'right',
    slot: 'pickStatus',
  },
]

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

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

const handleCreateInbound = () => {
  ElMessage.info('创建入库单功能待实现')
}

const handleSubmit = async () => {
  submitLoading.value = true
  try {
    ElMessage.success('拣胚完成')
    visible.value = false
    emit('success')
  } catch (_e) {
    ElMessage.error('操作失败')
  } finally {
    submitLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.table-view {
  height: 600px;
}
</style>
