<script setup lang="ts">
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from 'element-plus'
import InStorageSn from './InStorageSn.vue'
import {nextTick, reactive, ref} from 'vue'
import {GlobalStore} from '@/stores/index'
import Drawer from '@/components/Drawer/index.vue'
import {InStoreageFormType} from '@/hooks/useDepot'
import InStorageProduct from './InStorageProduct.vue'
import {CirclePlus, Delete} from '@element-plus/icons-vue'
import {Storehouse_StockIn_Add,Storehouse_StockIn_Generate_Number, Storehouse_StockOut_Company_Name_List, Storehouse_StockOut_Project_List} from '@/api/storehouse/index'
import ImageCom from '@/components/Image/index.vue'
import ReceiveUser from "@/views/storehouse/outStock/receiveUser.vue";
import {useRemoteSearch} from '@/hooks/useRemoteSearch'

const tableData = ref<any[]>([])
const globalStore = GlobalStore()
const formLabelWidth = ref('120px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const drawerSnRef = ref<InstanceType<typeof InStorageSn> | null>(null)
const drawerProductRef = ref<InstanceType<typeof InStorageProduct> | null>(null)

// 防抖相关
const isSubmitting = ref(false)
const isGeneratingNumber = ref(false)
let generateNumberTimer: NodeJS.Timeout | null = null

// 使用远程搜索composable
const {
	stockOutCompanyNameOptions,
	isStockOutCompanyNameLoading,
	queryStockOutCompanyNameAsync,
	stockOutProjectOptions,
	isStockOutProjectLoading,
	queryStockOutProjectAsync
} = useRemoteSearch()

const data: any = reactive({
	optionsType: [{id: 1, T_name: '入库'}, {id: 2, T_name: '退库'}]
})

const form = reactive<InStoreageFormType>({
	T_number: '',
	T_depot_id: '',
	T_type: '',
	T_product: '',
	T_date: '',
	T_remark: '',
	T_project: '',
	T_company_name: '',
	T_return_user: '',
	T_return_user_name: '',
	T_batch_number: ''
})

const validate_T_product = (rule: any, value: any, callback: any) => {
	if (value.includes(undefined) || value === '') {
		callback(new Error('请填写产品数量'))
	} else if (value.includes(null)) {
		callback(new Error('请添加产品SN'))
	} else {
		callback()
	}
}

const rules = reactive<FormRules>({
	T_product: [{validator: validate_T_product, trigger: 'blur'}],
	T_depot_id: [{required: true, message: '请选择仓库', trigger: 'blur'}],
	T_date: [{required: true, message: '请选择入库日期', trigger: 'blur'}],
	T_type: [{required: true, message: '请选择入库类型', trigger: 'blur'}],
	T_company_name: [{required: true, message: '请选择公司名称', trigger: 'blur'}]
})

const columns = [
	{type: 'index', label: '序号', width: 80, align: 'center '},
	{label: '产品图片', prop: 'T_img', align: 'center ', name: 'T_img'},
	{label: '产品名称', prop: 'T_name', align: 'center '},
	{label: '产品分类', prop: 'T_class_name', align: 'center '},
	{label: '产品型号', prop: 'T_model', align: 'center ', ellipsis: true},
	{label: '产品规格', prop: 'T_spec', align: 'center '},
	{label: '是否关联SN', prop: 'T_relation_sn', align: 'center ', width: 120, name: 'T_relation_sn'},
	{label: '*数量', prop: 'count', align: 'center ', name: 'count'},
	{label: '*关联设备', prop: 'sn', align: 'center ', name: 'sn'},
	{prop: 'operation', label: '操作', width: 80, fixed: 'right'}
]

const countBlurHandle = () => {
	form.T_product = tableData.value.map(item => {
		if (!item.count && item.T_relation_sn !== 1) return undefined
		return `${item.Id},${item.count}|`
	})
}
const getDeviceSnToProduct = () => {
	const DeviceSnData: any = drawerSnRef.value?.getDeviceSn()
	const isEmpty = determineSNorCount(DeviceSnData)
	if (isEmpty && isEmpty === 'count') return [undefined]
	if (isEmpty && isEmpty === 'sn') return [null]

	return tableData.value.map((item: any) => {
		let product: any = ''
		if (item.T_relation_sn === 1) {
			DeviceSnData?.forEach((value: any, key: number) => {
				if (item.Id === key) {
					let str = ''
					value.forEach(
						(snObj: any, index: number, arr: any[]) => (str += `${snObj.sn}${index === arr.length - 1 ? '' : ','}`)
					)
					product = `${item.Id}-${item.count}-${str}`
				}
			})
		} else {
			product = `${item.Id}-${item.count}-`
		}
		return product + '|'
	})
}
/**
 * 判断sn or 数量是否为空
 */
const determineSNorCount = (DeviceSnData: any) => {
	for (const item of tableData.value) {
		if (!item.count && item.T_relation_sn !== 1) return 'count'
		if (item.T_relation_sn === 1 && !DeviceSnData.get(item.Id) && !DeviceSnData.size) return 'sn'
	}
	return false
}

/**
 * 生成入库单号（防抖）
 */
const generateStockInNumber = async () => {
  if (isGeneratingNumber.value) return
  
  // 清除之前的定时器
  if (generateNumberTimer) {
    clearTimeout(generateNumberTimer)
  }
  
  generateNumberTimer = setTimeout(async () => {
    try {
      isGeneratingNumber.value = true
      const res: any = await Storehouse_StockIn_Generate_Number({
        User_tokey: globalStore.GET_User_tokey
      })
      if (res.Code === 200) {
        form.T_number = res.Data
      } else {
        ElMessage.error('生成入库单号失败：' + (res.Msg || '系统错误'))
      }
    } catch (error) {
      console.error('生成入库单号失败:', error)
      ElMessage.error('生成入库单号失败，请重试')
    } finally {
      isGeneratingNumber.value = false
    }
  }, 500) // 500ms 防抖延迟
}

// 页面加载时生成入库单号
if (!form.T_number) {
  generateStockInNumber()
}

const AddInStorage = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	
	// 防止重复提交
	if (isSubmitting.value) {
		ElMessage.warning('正在提交中，请勿重复操作')
		return
	}
	
	form.T_product = getDeviceSnToProduct()
	formEl.validate(async valid => {
		if (valid) {
			try {
				isSubmitting.value = true
				const res: any = await Storehouse_StockIn_Add({
					User_tokey: globalStore.GET_User_tokey,
					...form,
					T_product: form.T_product.join('')
				})
				if (res.Code === 200) {
					ElMessage.success('入库成功！')
					drawerProductRef.value?.clearSelection()
					nextTick(() => {
						emit('onUpdateList')
						resetForm(ruleFormRef.value)
						drawerRef.value?.closeDrawer()
					})
				} else {
					ElMessage.error('入库失败：' + (res.Msg || '系统错误'))
				}
			} catch (error) {
				console.error('入库失败:', error)
				ElMessage.error('入库失败，请重试')
			} finally {
				isSubmitting.value = false
			}
		}
	})
}

const deleteProduct = (row: any) => {
	tableData.value = tableData.value.filter(item => item.Id !== row.Id)

	// 设置产品的选中
	drawerProductRef.value?.selectTableChange(row)
	// 删除设备得sn
	drawerSnRef.value?.deleteDeviceSn(row.Id)
}

const callbackDrawer = (done: () => void) => {
	resetForm(ruleFormRef.value)
	done()
}
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	drawerProductRef.value?.clearSelection()
	drawerSnRef.value?.clearDeviceSn()
	tableData.value = []
	formEl.resetFields()
	
	// 清理防抖定时器
	if (generateNumberTimer) {
		clearTimeout(generateNumberTimer)
		generateNumberTimer = null
	}
	isSubmitting.value = false
	isGeneratingNumber.value = false
	
	// 重置后重新生成单号
	form.T_number = ''
	generateStockInNumber()
}

/**
 * 添加产品
 */
const AddProductionDetailed = () => drawerProductRef.value?.openDrawer()
/**
 * 产品选择 是否
 */
const ProductselectionChange = (row: any) => {
	const index = tableData.value.findIndex((item: any) => item.Id === row.Id)
	if (index === -1) {
		row.count = ''
		tableData.value.push(row)
	} else {
		tableData.value.splice(index, 1)
	}
}
/**
 * 全选
 */
const ProductSelectionAllChange = (selection: any[]) => {
	tableData.value = selection
}

/**
 * 添加sn 号
 */
const addDeviceSn = (id: number, date?: string) => {
	if (!date) {
		ElMessage.warning('请先填写入库日期')
		return
	}
	drawerSnRef.value?.addDeviceSn(id, 2, id, date || form.T_date)
}
/**
 * 自动计算 count
 */
const autoGetCount = (length: number, id: number) => {
	tableData.value.forEach((item: any) => {
		if (item.Id === id) {
			item.count = length
		}
	})
}
/**
 * 关闭 取消
 */
const closeInStorage = () => {
	resetForm(ruleFormRef.value)
	drawerRef.value?.closeDrawer()
}
// 注册事件
const emit = defineEmits<{ (event: 'onUpdateList'): void }>()

// 接受props
interface ItemType {
	T_name: string
	Id: number
}

interface PropsType {
	options?: ItemType[]
}

const props = defineProps<PropsType>()

const receiveUserdialog = ref<InstanceType<typeof ReceiveUser> | null>(null)

/**
 * 选择退库人
 */
const selectReturnUser = () => receiveUserdialog.value?.openDrawer()
const getReturnUserInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
	form.T_return_user_name = T_name
	form.T_return_user = T_uuid
}


/**
 * 入库调用
 */
const openDrawer = () => {
	drawerRef.value?.openDrawer()
	// 打开抽屉时生成单号
	if (!form.T_number) {
		generateStockInNumber()
	}
}
defineExpose({
	openDrawer
})
</script>

<template>
	<div class="inStorage-form">
		<Drawer ref="drawerRef" :handleClose="callbackDrawer" size="80%">
			<template #header="{ params }">
				<h4 :id="params.titleId" :class="params.titleClass">入库</h4>
			</template>
			<el-form ref="ruleFormRef" :model="form" :rules="rules">
				<el-form-item label="入库单号：" :label-width="formLabelWidth" prop="T_number">
					<div class="w-50" style="display: flex; align-items: center; gap: 8px;">
						<el-input 
							v-model="form.T_number" 
							type="text" 
							:disabled="true" 
							placeholder="系统自动生成"
							style="flex: 1;"
						/>
						<el-button 
							type="primary" 
							size="small" 
							:loading="isGeneratingNumber"
							:disabled="isGeneratingNumber"
							@click="generateStockInNumber"
						>
							{{ isGeneratingNumber ? '生成中...' : '重新生成' }}
						</el-button>
					</div>
				</el-form-item>
				<el-form-item label="入库仓库：" :label-width="formLabelWidth" prop="T_depot_id">
					<el-select v-model="form.T_depot_id" class="w-50" clearable placeholder="请选择入库仓库~">
						<el-option v-for="item in props.options" :key="item.Id" :label="item.T_name" :value="item.Id"/>
					</el-select>
				</el-form-item>

				<el-form-item label="入库类型：" :label-width="formLabelWidth" prop="T_type">
					<el-select v-model="form.T_type" class="w-50" clearable placeholder="请选择入库类型~">
						<el-option v-for="item in data.optionsType" :key="item.id" :label="item.T_name"
								   :value="item.id"/>
					</el-select>
				</el-form-item>

				<el-form-item label="入库日期：" :label-width="formLabelWidth" prop="T_date">
					<el-date-picker
						class="my-date-picker"
						style="width: 21.5rem"
						v-model="form.T_date"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item label="入库批次：" :label-width="formLabelWidth" prop="T_batch_number">
					<el-input 
						v-model="form.T_batch_number" 
						type="text" 
						placeholder="请输入入库批次号" 
						class="w-50"
					/>
				</el-form-item>
				<el-form-item label="入库明细：" :label-width="formLabelWidth" prop="T_product">
					<el-table
						:data="tableData"
						style="width: 100%"
						border
						stripe
						:header-cell-style="{
              background: '#dedfe0',
              height: '50px'
            }"
					>
						<template v-for="item in columns" :key="item.prop">
							<el-table-column show-overflow-tooltip v-bind="item"
											 v-if="item.fixed !== 'right' && !item.ellipsis">
								<template #header v-if="item.prop === 'count' || item.prop === 'sn'">
									<span style="color: red">{{ item.label }}</span>
								</template>
								<template #default="{ row }" v-if="item.prop === item.name">
									<el-input
										v-if="item.prop === 'count' && row.T_relation_sn !== 1"
										v-model.number="row.count"
										type="text"
										autocomplete="off"
										@blur="countBlurHandle"
									/>
									<div v-if="item.prop === 'sn'">
										<el-button
											v-if="row.T_relation_sn === 1"
											link
											type="primary"
											size="small"
											:icon="CirclePlus"
											@click="addDeviceSn(row.Id, form.T_date)"
										>添加
										</el-button
										>
										<span v-else>-</span>
									</div>
									<span v-if="item.prop === 'T_relation_sn'">
                    <el-tag v-if="row.T_relation_sn === 1" effect="dark">是</el-tag>
                    <el-tag v-else type="success" effect="dark">否</el-tag>
                  </span>
									<ImageCom v-if="item.prop === 'T_img'" :src="row.T_img"/>
								</template>
							</el-table-column>
							<el-table-column show-overflow-tooltip v-if="item.ellipsis && item.prop === 'T_model'"
											 v-bind="item">
								<template #default="{ row }">
									<el-tooltip effect="dark" :content="row.T_model" placement="bottom">
										{{ row.T_model }}
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column v-bind="item" v-if="item.fixed === 'right'">
								<template #default="{ row }">
									<el-button link type="danger" size="small" :icon="Delete"
											   @click="deleteProduct(row)">删除
									</el-button>
								</template>
							</el-table-column>
						</template>
						<template #append>
							<el-button type="primary" @click="AddProductionDetailed">
								<el-icon>
									<Plus/>
								</el-icon>
								<span style="margin-left: 6px">添加产品</span>
							</el-button>
						</template>
			</el-table>
		</el-form-item>
		
		<el-form-item v-if="form.T_type===2" label="公司名称：" :label-width="formLabelWidth" prop="T_company_name">
			<el-select
				v-model="form.T_company_name"
				filterable
				clearable
				remote
				reserve-keyword
				placeholder="请输入公司名称搜索"
				remote-show-suffix
				:remote-method="queryStockOutCompanyNameAsync"
				:loading="isStockOutCompanyNameLoading"
				class="w-50"
			>
				<el-option v-for="item in stockOutCompanyNameOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</el-form-item>
		<el-form-item v-if="form.T_type===2" label="退库项目：" :label-width="formLabelWidth" prop="T_project">
			<el-select
				v-model="form.T_project"
				filterable
				clearable
				remote
				reserve-keyword
				placeholder="请输入退库项目搜索"
				remote-show-suffix
				:remote-method="queryStockOutProjectAsync"
				:loading="isStockOutProjectLoading"
				class="w-50"
			>
				<el-option v-for="item in stockOutProjectOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</el-form-item>
		<el-form-item v-if="form.T_type===2" label="退库人：" :label-width="formLabelWidth" prop="T_return_user_name">
					<el-input v-model="form.T_return_user_name" placeholder="请选择退库人" class="w-50"
							  @focus="selectReturnUser"/>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
					<el-input
						v-model="form.T_remark"
						:autosize="{ minRows: 4, maxRows: 6 }"
						type="textarea"
						placeholder="请输入备注信息"
					/>
				</el-form-item>
				<div class="btn">
					<el-divider>
						<el-button @click="closeInStorage">取消</el-button>
						<el-button 
							color="#626aef" 
							:loading="isSubmitting"
							:disabled="isSubmitting || isGeneratingNumber"
							@click="AddInStorage(ruleFormRef)"
						>
							{{ isSubmitting ? '提交中...' : '提交' }}
						</el-button>
					</el-divider>
				</div>
				<ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="getReturnUserInfo" title="选择退库人"/>
				<InStorageSn ref="drawerSnRef" @onCount="autoGetCount"/>
				<InStorageProduct
					ref="drawerProductRef"
					@ontableData="ProductselectionChange"
					@ontableDataAll="ProductSelectionAllChange"
				/>
			</el-form>
		</Drawer>
	</div>
</template>
<style scoped lang="scss">
@import './index.scss';
</style>
