﻿<template>
	<div class="dmsstockinfo-container">
		<el-dialog v-model="state.isShowDialog" v-if="state.isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库编码" prop="code" >
							<el-input v-model="state.ruleForm.code" placeholder="请输入仓库编码" :readonly="isEditable" maxlength="50" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库名称" prop="name" >
							<el-input v-model="state.ruleForm.name" placeholder="请输入仓库名称" maxlength="50" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库类型" prop="stockType" >
							<el-select v-model="state.ruleForm.stockType" placeholder="请选择" maxlength="50" show-word-limit clearable >
								<el-option value="实体仓">实体仓</el-option>
								<el-option value="虚拟仓">虚拟仓</el-option>
                             </el-select>
						</el-form-item>
						
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="仓库类型" prop="stockType">
							<el-input v-model="state.ruleForm.stockType" placeholder="请输入仓库类型" maxlength="50" show-word-limit clearable />
							
						</el-form-item>
						
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否库位管理" prop="isPos">
							<el-switch v-model="state.ruleForm.isPos" active-text="是" inactive-text="否" />
							
						</el-form-item>
						
					</el-col>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sortCode">
							<el-input-number v-model="state.ruleForm.sortCode" placeholder="请输入排序" clearable />
							
						</el-form-item>
						
					</el-col> -->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="描述" prop="remark">
							<el-input v-model="state.ruleForm.remark"  show-word-limit clearable />
							
						</el-form-item>
						
					</el-col>
				</el-row>
			</el-form>
			<template v-if="state.ruleForm.isPos==true &&state.ruleForm.id">
                <el-tabs v-model="tabActive">
                <el-tab-pane label="库位信息" name="item"></el-tab-pane>
                </el-tabs>
                <MesQiInspTempItem :stockId="state.ruleForm.id" v-if="tabActive == 'item'"></MesQiInspTempItem>
            </template>
			<!-- <el-tabs :model-value="'item'" v-if="state.ruleForm.isPos==true">
                 <el-tab-pane label="库位明细" name="item"></el-tab-pane>
            </el-tabs>
			<el-button type="primary" icon="ele-Plus" @click="subAdd" v-if="state.ruleForm.isPos==true" > 新增 </el-button>
			<el-table :data="detailList" v-if="state.ruleForm.isPos==true">
				<el-table-column type="index" label="序号" width="55" align="center" />
                
                
				<el-table-column prop="stockCode" label="库位编号"  show-overflow-tooltip="" >
                  <template  #default="scope">
                    <el-input type="text" v-model="scope.row.stockCode" min="1" ></el-input>
				
                  </template>
                </el-table-column>
				<el-table-column prop="stockName" label="库位名称"  show-overflow-tooltip="" >
                  <template  #default="scope">
                    <el-input type="text" v-model="scope.row.stockName" min="1"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="stockRemark" label="备注"  show-overflow-tooltip="" >
                  <template  #default="scope">
                    <el-input type="text" v-model="scope.row.stockRemark" min="1"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                  <template #default="scope">
					<el-button icon="ele-Delete" size="small" type="primary" @click="subDelete(scope.row, scope.$index)"> 删除 </el-button>
                  </template>
                </el-table-column>
            </el-table> -->
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<choose-user title="选择备件" ref="chooseUserRef" :is-any="true" ></choose-user>
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
    import { ref,onMounted, reactive } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addDmsstockinfo, updateDmsstockinfo, detailDmsstockinfo,detailDmsstockPosinfo } from "/@/api/simple/dmsstockinfo";
	import { pageDmsstockinfo, deleteDmsstockinfo } from '/@/api/simple/dmsstockinfo';
	const tabActive = ref('item');
	import MesQiInspTempItem from "/@/views/simple/dmsStockPosInfo/index.vue";
  	import { formatDate } from '/@/utils/formatTime';
    const isEditable=ref(true);
	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
    const state = reactive({
    isShowDialog: false,
    ruleForm: {} as any,
});

	//自行添加其他规则
	const rules = ref<FormRules>({
		 code: [{required: true, message: '请输入仓库编码！', trigger: 'blur',},],
		 name: [{required: true, message: '请输入仓库名称！', trigger: 'blur',},],
		 stockType: [{required: true, message: '请输入仓库类型！', trigger: 'blur',},],
	});

	// 页面加载时
	onMounted(() => {

	});
  
	const stockposid=ref([]);
	const subDelete = (row: any, index: number) => {
		if(row.id!=undefined)
	    {
			stockposid.value.push(row.id);
	    }
        detailList.value.splice(index, 1);
    };
    // 子表
	const detailList = ref([]);
	const chooseUserRef = ref();
    const subAdd = () => {
		detailList.value.push({});
    };

	// 打开弹窗
	const openDialog = async (row: any) => {
		// state.ruleForm = JSON.parse(JSON.stringify(row));
		detailList.value = [];
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
		{
			state.ruleForm = (await detailDmsstockinfo(rowData.id)).data.result;

			// -库区
			 let data = (await detailDmsstockPosinfo(rowData.id)).data.result;
			 let list: any[] = (data || []).map((item: any) => ({
             ...item,
			      stockCode: item.code,
                  stockName: item.name,
				  stockRemark:item.remark,
				  stockstate:item.id,
				  stockId:item.id,
                }));
	            
            detailList.value.push(...list);
		}
		else
			state.ruleForm = rowData;

		if(state.ruleForm.code==undefined)
	    {
			isEditable.value=false;
	    }
		else{
			isEditable.value=true;
		}
		state.isShowDialog = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		state.isShowDialog = false;
	};

	// 取消
	const cancel = () => {
		state.isShowDialog = false;
	};

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if(state.ruleForm.code==undefined)
	        {
	    	  return ElMessage({
              message: `请输入仓库编码！`,
              type: "error",
            });
	        }
			if(state.ruleForm.name==undefined)
	        {
	    	  return ElMessage({
              message: `请输入仓库名称！`,
              type: "error",
            });
	        }
			if(state.ruleForm.stockType==undefined)
	        {
	    	  return ElMessage({
              message: `请选择仓库类型！`,
              type: "error",
            });
	        }
			// if(state.ruleForm.isPos==true)
			// {
			// 	if (isValid && detailList.value.length>0) {
			// 	let values = state.ruleForm;
			// 	values.stockCode = detailList.value.map((item: any) => item.stockCode).join(',');
            //     values.stockName = detailList.value.map((item: any) => item.stockName).join(',');
			// 	values.stockRemark = detailList.value.map((item: any) => item.stockRemark).join(',');
			// 	var li=values.stockCode.split(',')
			// 	var name=values.stockName.split(',')
			// 	var barcode=false;
			// 	for(let index=0;index<li.length;index++)
			//     {
			// 		if(li[index]=='' || name[index]=="")
			// 	    {
			// 			ElMessage({
			// 				message: `第${index+1}行库位编号或者库位名称不可以为空`,
			// 				type: "error",
			// 			});
			// 			barcode=false;
			// 			break;
			// 		}
			// 		else
			// 		{
			// 			barcode=true;
			// 		}
			// 	}
			// 	//判断编号是否存在重复
			// 	let names = detailList.value.map((item: any) => item.stockCode);
			// 	let nameSet = new Set(names)
			// 	if (nameSet.size != names.length) {
			// 		ElMessage({
			// 		message: `存在相同编号的库位编号，库位编号不可以重复`,
			// 		type: "error",
			// 	});
			// 	}
            //     else
			// 	{
			// 		if(barcode==true)
			// 	    {
			// 	    	if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
			// 	    	    //await addDmsstockinfo(values);
			// 				var result=(await addDmsstockinfo(values)).data.result;
			// 	            	if(result=="添加成功")
			// 	            	 closeDialog();
			// 	            	else
			// 	            	{
			// 	            		ElMessage({
			// 	            	message: `${result}`,
			// 	            	type: "error",
			// 	            });
			// 	            	}
			// 	        } else {
			// 				values.states = detailList.value.map((item: any) => item.stockstate).join(',');
			// 				values.stockPosId = stockposid.value.map((item: any) => item).join(',');
			// 				values.stockId = detailList.value.map((item: any) => item.stockId).join(',');
			// 				console.log(values.stockId);
			// 	    	    // await updateDmsstockinfo(values);
			// 				// closeDialog();
			// 				var result=(await updateDmsstockinfo(values)).data.result;
			// 	            	if(result=="修改成功")
			// 	            	 closeDialog();
			// 	            	else
			// 	            	{
			// 	            		ElMessage({
			// 	            	message: `${result}`,
			// 	            	type: "error",
			// 	            });
			// 	            	}
			// 	        }
				           
			// 	    }
			// 	} 
				
			// } else {
			// 	if(detailList.value.length>0)
			//     {
			// 	    ElMessage({
			// 		     message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
			// 		     type: "error",
			// 	    });
			//     }else{
			// 	    ElMessage({
			// 		message: `库位明细无数据，请添加库位数据`,
			// 		type: "error",
			// 	});}
			// }
			// }
			// else{
				if (isValid) {
					let values = state.ruleForm;
					if (state.ruleForm.id == undefined || state.ruleForm.id == null || state.ruleForm.id == "" || state.ruleForm.id == 0) {
				    	    //await addDmsstockinfo(values);
							var result=(await addDmsstockinfo(values)).data.result;
				            	if(result=="添加成功")
								{
									closeDialog();
								}
				            	else
				            	{
				            		ElMessage({
				            	message: `${'添加失败'}`,
				            	type: "error",
				            });
				            	}
				        } else {
				    	    // await updateDmsstockinfo(values);
							// closeDialog();
							var result=(await updateDmsstockinfo(values)).data.result;
				            	if(result=="修改成功")
				            	 closeDialog();
				            	else
				            	{
				            		ElMessage({
				            	message: `${'修改失败'}`,
				            	type: "error",
				            });
				            	}
				        }
				       
					}else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		//}
			
		});
	};






	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




