<template>
  <ElDialog
    :model-value="visible"
    :title="title"
    width="85%"
    :close-on-click-modal="false"
    @update:model-value="emit('update:visible', $event)"
  >
    <div class="dialog-form">
      <ElForm
        ref="editFormRef"
        :model="editForm"
        :rules="rules"
        inline
        label-width="90px"
      >
        <ElFormItem label="入库单号" prop="account">
          <ElInput :model-value="editForm.inNo" placeholder="系统自动生成" clearable disabled />
        </ElFormItem>
        <ElFormItem label="工厂：" prop="factoryCode">
          <span>{{ editForm.factoryCode }}</span>
        </ElFormItem>
        <ElFormItem label="仓库" prop="warehouseId" required>
          <ElSelect
            v-model="warehouseIdModel"
            clearable
            :disabled="disableWarehouse"
            placeholder="请选择仓库"
            style="width: 160px"
            @change="emit('warehouse-change', warehouseIdModel)"
          >
            <ElOption
              v-for="item in warehouseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="备注" prop="remark" style="width: 45%">
          <ElInput v-model="remarkModel" placeholder="请输入备注" clearable />
        </ElFormItem>
      </ElForm>
      <ElTable
        size="small"
        :data="otherPurchaseData"
        height="500px"
        border
        @selection-change="emit('selection-change', $event)"
      >
        <ElTableColumn
          type="selection"
          width="70"
          header-align="center"
          align="center"
        />
        <ElTableColumn
          show-overflow-tooltip
          width="60"
          align="center"
          label="序号"
          type="index"
        />
        <ElTableColumn
          show-overflow-tooltip
          align="center"
          width="100"
          label="SKU图片"
          prop="skuImage"
        >
          <template #default="{ row }">
            <ImageView :src="row.skuImage" width="40px" height="40px" />
          </template>
        </ElTableColumn>
        <ElTableColumn
          show-overflow-tooltip
          align="center"
          width="140"
          label="库存SKU"
          prop="warehouseSku"
        />
        <ElTableColumn
          show-overflow-tooltip
          align="center"
          width="160"
          label="商品名称"
          prop="skuName"
        />
        <ElTableColumn
          show-overflow-tooltip
          align="center"
          label="款号"
          prop="productNo"
        />
        <ElTableColumn align="center" label="入库数量" prop="buyStored">
          <template #default="{ row }">
            <el-input
              v-model.number="row.buyStored"
              placeholder="入库数量"
              style="width: 120px"
              clearable
              size="small"
              @input="emit('set-cost-price', row)"
            />
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center"
          width="80"
          label="币种"
          prop="currencyName"
        />
        <ElTableColumn
          width="100"
          align="center"
          label="成本价"
          prop="costPrice"
        />
        <ElTableColumn
          align="center"
          width="100"
          label="总成本"
          prop="totalPrice"
        />
        <ElTableColumn align="center" label="库位" prop="locationCode">
          <template #default="{ row }">
            <ElSelect
              v-model="row.locationId"
              clearable
              placeholder="请输入库位"
              style="width: 120px"
              filterable
              @change="emit('location-change', row.locationId, row)"
            >
              <ElOption
                v-for="item in locationList"
                :key="item.locationId"
                :label="item.locationCode"
                :value="item.locationId"
              />
            </ElSelect>
          </template>
        </ElTableColumn>
        <ElTableColumn
          align="center"
          width="100"
          label="所属客户"
          prop="userMark"
        />
        <ElTableColumn
          show-overflow-tooltip
          align="center"
          width="140"
          label="备注"
          prop="remark"
        >
          <template #default="{ row }">
            <ElInput v-model.trim="row.remark" clearable size="small" />
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
    <template #footer>
      <div class="product-dialog-footer">
        <div style="display: flex; align-items: center">
          <span
            v-if="showUserMarkFilter"
            style="margin-right: 10px; font-style: 13px; color: gray"
            >搜索：</span
          >
          <el-select
            v-if="showUserMarkFilter"
            :model-value="userMark"
            size="small"
            style="width: 100px"
            @update:model-value="emit('update:userMark', $event)"
          >
            <el-option
              v-for="user in userMarkList"
              :key="user.userId"
              :label="user.userMark"
              :value="user.userId"
            />
          </el-select>
          <el-input
            v-if="showUserMarkFilter"
            :model-value="selectSku"
            placeholder="库存SKU"
            style="width: 200px; margin: 0 10px"
            clearable
            size="small"
            @update:model-value="emit('update:selectSku', $event)"
          />
          <el-popover placement="top-start" width="1200" trigger="click">
            <div v-if="skuData.length > 0" style="height: 50vh">
              <ElTable size="small" :data="filterSkuData" height="100%" border>
                <ElTableColumn
                  show-overflow-tooltip
                  width="60"
                  align="center"
                  label="序号"
                  type="index"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="SKU图片"
                  width="100"
                  prop="image"
                >
                  <template #default="{ row }">
                    <ImageView :src="row.skuImage" width="40px" height="40px" />
                  </template>
                </ElTableColumn>
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="商品名称"
                  width="200"
                  prop="productName"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  width="200"
                  label="库存SKU"
                  prop="warehouseSku"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="款号"
                  prop="productNo"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="币种"
                  width="80"
                  prop="currencyName"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="成本价"
                  width="80"
                  prop="costPrice"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="库位"
                  prop="locationCode"
                />
                <ElTableColumn
                  show-overflow-tooltip
                  align="center"
                  label="所属客户"
                  prop="userMark"
                />
                <ElTableColumn
                  width="80"
                  align="center"
                  header-align="center"
                  label="操作"
                >
                  <template #default="{ row }">
                    <el-icon :size="32" color="#67C23A" class="cursor-pointer">
                      <CirclePlusFilled @click="emit('sku-add', row)" />
                    </el-icon>
                  </template>
                </ElTableColumn>
              </ElTable>
            </div>
            <template #reference>
              <el-button
                type="primary"
                size="small"
                style="width: 90px"
                @click="emit('query-sku')"
              >
                查询
              </el-button>
            </template>
          </el-popover>
          <el-button
            v-if="showBatchAddButton"
            style="margin-left: 6px"
            type="success"
            size="small"
            @click="emit('batch-add')"
          >
            批量新增
          </el-button>
          <el-button
            type="danger"
            style="margin-left: 10px"
            size="small"
            @click="emit('delete')"
          >
            删除
          </el-button>
          <el-button
            v-if="showImportButton"
            type="primary"
            style="margin-left: 10px"
            size="small"
            @click="emit('import')"
          >
            导入
          </el-button>
        </div>
        <div>
          <el-button
            size="small"
            style="margin-left: 10px"
            @click="emit('update:visible', false)"
          >
            取消
          </el-button>
          <el-button type="primary" size="small" @click="emit('save')">
            保存
          </el-button>
        </div>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { CirclePlusFilled } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import ImageView from '@/components/ImageView.vue'
import type {
  InterProductList,
  InterWarehouseDetail,
  InterskuList,
  ILocation,
} from '@/types/api/warehouse'

interface WarehouseInfo {
  id?: string | number
  name: string
}

interface UserMark {
  userId: number
  userMark: string
}

const props = withDefaults(
  defineProps<{
    visible: boolean
    title: string
    disableWarehouse?: boolean
    showUserMarkFilter?: boolean
    showBatchAddButton?: boolean
    showImportButton?: boolean
    editForm: InterWarehouseDetail
    rules: Record<string, unknown>
    warehouseList: WarehouseInfo[]
    otherPurchaseData: InterProductList[]
    locationList: ILocation[]
    userMarkList: UserMark[]
    userMark: number
    selectSku: string
    skuData: InterskuList[]
    filterSkuData: InterskuList[]
  }>(),
  {
    disableWarehouse: false,
    showUserMarkFilter: true,
    showBatchAddButton: true,
    showImportButton: true,
  },
)

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'update:userMark', value: number): void
  (e: 'update:selectSku', value: string): void
  (e: 'update:remark', value: string): void
  (e: 'update:warehouseId', value: number | string | undefined): void
  (e: 'warehouse-change', value: number | string | undefined): void
  (e: 'selection-change', value: InterProductList[]): void
  (e: 'set-cost-price', value: InterProductList): void
  (
    e: 'location-change',
    value: number | null | undefined,
    row: InterProductList,
  ): void
  (e: 'query-sku'): void
  (e: 'sku-add', value: InterskuList): void
  (e: 'batch-add'): void
  (e: 'delete'): void
  (e: 'import'): void
  (e: 'save'): void
}>()

const editFormRef = ref()
const warehouseIdModel = computed({
  get: () => props.editForm.warehouseId,
  set: (value: number | string | undefined) =>
    emit('update:warehouseId', value),
})
const remarkModel = computed({
  get: () => props.editForm.remark || '',
  set: (value: string) => emit('update:remark', value.trim()),
})

const validateForm = async () => {
  await editFormRef.value?.validate()
}

defineExpose({
  validateForm,
})
</script>

<style lang="scss" scoped>
.cursor-pointer {
  cursor: pointer;
}

.product-dialog-footer {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}
</style>
