<template>
  <ElDialog
    v-model="visible"
    title="生成入库单"
    width="70%"
    :close-on-click-modal="false"
  >
    <div class="dialog-form">
      <ElForm
        ref="editFormRef"
        :model="editForm"
        :rules="rules"
        inline
        label-width="90px"
      >
        <ElFormItem label="入库单号" prop="account">
          <ElInput v-model.trim="editForm.inNo" clearable disabled />
        </ElFormItem>
        <ElFormItem label="工厂：" prop="factoryCode">
          <span>{{ editForm.factoryCode }}</span>
        </ElFormItem>
        <ElFormItem label="仓库" prop="warehouseId" required>
          <ElSelect
            v-model="editForm.warehouseId"
            clearable
            disabled
            placeholder="请选择仓库"
            style="width: 160px"
            @change="handleWarehouseChange(editForm.warehouseId)"
          >
            <ElOption
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="备注" prop="remark" style="width: 45%">
          <ElInput
            v-model.trim="editForm.remark"
            placeholder="请输入备注"
            clearable
          />
        </ElFormItem>
      </ElForm>
      <div
        style="
          height: 250px;
          width: 100%;
          padding: 0;
          box-sizing: border-box;
          border: 1px solid #ddd;
          overflow: hidden;
        "
      >
        <CustomizeTable
          ref="tableRef"
          v-model="editForm.productList"
          :config="tableConfig"
          highlight-current-row
          border="full"
          @get-checkbox-records="productSelectionChange"
        ></CustomizeTable>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitProduct">确认</el-button>
      </span>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
import { defineModel, defineEmits, defineProps, defineExpose } from 'vue'
const visible = defineModel<boolean>('visible', { default: false })
const emits = defineEmits(['success'])
import { InterReceiptItem, ProductSku, TableRowData } from '@/types/api/product'
import { warehouseInfo } from '@/api/warehouse'
const props = defineProps({
  warehouseList: {
    type: Array as () => warehouseInfo[],
    required: true,
  },
})
const rules = {
  warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
}
const createDefaultForm = (
  overrides?: Partial<InterReceiptItem>,
): InterReceiptItem => ({
  inNo: '',
  warehouseId: '',
  warehouseName: '',
  remark: '',
  factoryCode: '',
  factoryId: 0,
  productList: [],
  ...overrides, // 支持部分覆盖
})
const editForm = reactive<InterReceiptItem>(createDefaultForm())
const submitProduct = () => {
  visible.value = false
  emits('success')
}
const open = (data: ProductSku[]) => {
  visible.value = true
  editForm.productList = data
}
import CustomizeTable from '@/components/VxeTable.tsx'
const tableRef = ref<InstanceType<typeof CustomizeTable> | null>(null)
import { TableColumn } from '@/components/VxeTable'
import ImageView from '@/components/ImageView.vue'
const tableConfig = computed<TableColumn[]>(() => {
  const baseColumns: TableColumn[] = [
    {
      prop: 'image',
      label: 'SKU图片',
      attrs: { align: 'center', width: 80 },
      render: {
        default: ({ row }: { row: TableRowData }) => {
          return h(ImageView, {
            src: row.image as string,
            alt: 'SKU图片',
          })
        },
      },
    },
    {
      prop: 'sku_name',
      label: '库存SKU',
      attrs: { align: 'center' },
    },
    {
      prop: 'sku',
      label: '商品名称',
      attrs: { align: 'center' },
    },
    {
      prop: 'buyStored',
      label: '入库数量',
      attrs: { align: 'center', width: 120 },
      // render: {
      //   default: ({ row }: { row: ProductSku }) =>
      //     h(ElInput, {
      //       modelValue: row.buyStored,
      //       'onUpdate:modelValue': (val: number) => {
      //         row.buyStored = val
      //         // 触发 setCostPrice 逻辑
      //         setCostPrice(row)
      //       },
      //       placeholder: '入库数量',
      //       style: 'width: 120px',
      //       clearable: true,
      //       size: 'small',
      //     }),
      // },
    },
    {
      prop: 'currencyName',
      label: '币种',
      attrs: { align: 'center', width: 80 },
    },
    {
      prop: 'costPrice',
      label: '成本价',
      attrs: { align: 'center', width: 100 },
    },
    {
      prop: 'totalPrice',
      label: '总成本',
      attrs: { align: 'center', width: 100 },
    },
    {
      prop: 'locationCode',
      label: '库位',
      attrs: { align: 'center', width: 120 },
      // render: {
      //   default: ({ row }: { row: ProductSku }) =>
      //     h(
      //       ElSelect,
      //       {
      //         modelValue: row.locationId,
      //         'onUpdate:modelValue': (val: number) => {
      //           row.locationId = val
      //           handleLocationChange(val, row)
      //         },
      //         clearable: true,
      //         placeholder: '请输入库位',
      //         style: 'width: 120px',
      //         filterable: true,
      //       },
      //       () =>
      //         locationList.value.map((item) =>
      //           h(ElOption, {
      //             key: item.locationId,
      //             label: item.locationCode,
      //             value: item.locationId,
      //           }),
      //         ),
      //     ),
      // },
    },
    {
      prop: 'userMark',
      label: '所属客户',
      attrs: { align: 'center', width: 100 },
    },
    // {
    //   prop: 'remark',
    //   label: '备注',
    //   attrs: { align: 'center', width: 140, showOverflowTooltip: true },
    //   render: {
    //     default: ({ row }: { row: ProductSku }) =>
    //       h(ElInput, {
    //         modelValue: row.remark,
    //         'onUpdate:modelValue': (val: string) => (row.remark = val),
    //         clearable: true,
    //         size: 'small',
    //       }),
    //   },
    // },
  ]

  return baseColumns
})
const handleWarehouseChange = (val: number | string | undefined) => {
  const found = props.warehouseList.find(
    (item: warehouseInfo) => item.id === val,
  )
  editForm.warehouseName = found ? found.name : ''
}
const receiptTableSelection = ref<ProductSku[]>([])
const productSelectionChange = (v: ProductSku[]) => {
  receiptTableSelection.value = v
}
defineExpose({
  open,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
