<!-- 配体结合分析处理记录表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{ formData.bdmc }}<img src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPackage fieldItemLabel="template.common.baseInfo" label="template.common.baseInfo"
						ref="baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" />
					<TableList label="template.common.reagentInfo" :columns="sysjColumns" :dataSource="resource" />
					<TableList label="template.common.wzInfo" :columns="sywzColumns" :dataSource="resourceWz" v-if="resourceWz.length>0"/>
					<TableList label="template.common.instrumentInfo" :columns="yqColumns" :dataSource="yqResource" />

					<LineLabel label="template.lba.lba004.xbxx" />
					<CustomTable
						:isBorder="false"
						@blur="onHandleTableBlur"
						:ref="`jcbRef`"
						:columns="jcbColumns"
						:formData="formData"
						:prefixKey = "`jcb`"
						fieldItemLabel = "template.lba.lba004.xbxx"
						:showOperation="fillType === 'preFill'"
					>
						<template slot="operation" slot-scope="{ row, rowIndex, columns }">
							<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns"  @deleteRow="deleteJcbRow" ></TableOpertaionDelete>
						</template>
					</CustomTable>

					<BaseInfoFormPackage fieldItemLabel="template.lba.lba004.ypxx" label="template.lba.lba004.ypxx"
						ref="fjRef" :formConfig="getFjFormConfig" :formData="formData" />
					
					<LineLabel label="template.lba.lba004.xszj" />

					<!-- 平行配制区域 -->
					<div :label="$t('template.common.pxpz')"
						v-for="(paralleConfig, paralleIndex) in formData.paralleConfigs"
						:key="'paralle_' + paralleIndex">

						<div class="template-form-item">
							<div class="config-header-end" v-if="fillType === 'preFill'">
								<el-button type="primary" @click="handleAddParalle(false)">{{ $t('template.lba.lba004.xz')}}</el-button>
								<el-button type="danger" plain @click="deleteParalleConfig(paralleIndex)">{{ $t('template.lba.lba004.sc')}}</el-button>
							</div>
							<BaseInfoFormPackage @clickable="(e) => handleClickable('paralle', paralleIndex, e)"
								:ref="`paralleStepFormPackageRef_${paralleIndex}`" :formConfig="paralleStepFormConfig"
								:formData="paralleConfig" :prefixKey="'paralle' + paralleIndex"
								fieldItemLabel="template.lba.lba004.xszj" />
							<!-- <CustomTable @blur="(e) => onHandleTableBlur('paralle', paralleIndex, e)"
								:ref="`paralleStepTableRef_${paralleIndex}`" :showOperation="fillType === 'actFill' || fillType === 'preFill'"
								:columns="paralleStepColumns"
								@onRegentSubmit="(data) => onTableRegentSubmit('paralle', paralleIndex, data)"
								:formData="paralleConfig" :prefixKey="'paralle' + paralleIndex"
								:fieldItemLabel="$t('template.lba.lba004.xszj')">
								<template slot="operation" slot-scope="{ row, rowIndex, columns }">
									<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="(rowIndex) => deleteRow(rowIndex, 'paralle', paralleIndex)" ></TableOpertaionDelete>
								</template>
							</CustomTable> -->
							<CustomTable
								:ref="`paralleStepTableRef_${paralleIndex}`" :showOperation="fillType === 'preFill'"
								:columns="paralleStepColumns"
								:formData="paralleConfig" :prefixKey="'paralle' + paralleIndex"
								fieldItemLabel="template.lba.lba004.xszj">
								<template slot="operation" slot-scope="{ row, rowIndex, columns }">
									<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="(rowIndex) => deleteRow(rowIndex, 'paralle', paralleIndex)" ></TableOpertaionDelete>
								</template>
							</CustomTable>

							<Step class="mt-0 s-container" :ref="`paralleStepRef_${paralleIndex}`"
								:formData="paralleConfig.paralleStepData" :fieldItemLabel="$t('template.lba.lba004.xszj')"
								:prefixKey="'paralle' + paralleIndex"></Step>
						</div>
					</div>
					
					<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
						ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
				</div>
			</div>
		</div>
		<!-- <button @click="onSave">保存</button> -->
	</div>
</template>

<script>
import BaseInfoFormPackage from "@/components/Template/BaseInfoFormPackage";
import LineLabel from "@/components/Template/LineLabel";
import TableList from "@/components/Template/Table";
import Step from "@/components/Template/Step";
import templateMixin from "../../mixins/templateMixin";
import { EventBus } from "@/utils/eventBus";
import { uniqeResource,uniqeResourceOne } from "@/utils/calUnitTools";
import { duplicateResource } from "@/utils/index.js";
import { debounce } from 'lodash-es';
import CustomTable from '@/components/Template/CustomTable.vue';
import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue"

export default {
	name: "LBA004",
	components: { BaseInfoFormPackage, LineLabel, TableList, Step,CustomTable,TableOpertaionDelete },
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	computed: {
		// 操作步骤表单配置
		jcbColumns() {
			return [{
				label: 'template.lba.lba002.jcbmc',
				prop: 'jcb',
				bodyType: 'input',
				bodyFillType: 'preFill',
				width: 280,
				bodyMaxlength:20
			},{
				label: '',
				prop: 'jcbBh',
				bodyType: 'jcb',
				bodyFillType: 'actFill',
				width: 280
			}]
		},
		// 备注表单配置
		remarkConig() {
			return [
				{
					type: "cellItem",
					config: {
						remark: {
							label: "",
							type: "textarea",
							fillType: "actFill",
							span: 1,
							placeholder: 'template.common.remarkPlaceholder',
							maxlength: 1000,
							rows: 5
						}
					}
				}
			]
		},
		// 试验基本信息表单配置
		baseInfoFormConfig() {
			return [
				{
					type: "cardItem",
					config: {
						studyMc: {
							label: 'template.common.testName',
							type: "input",
							disabled: true,
						},
						studySn: {
							label: 'template.common.testNumber',
							type: "input",
							disabled: true,
						},
						methodCode: {
							label: 'template.common.methodCode',
							type: "input",
							fillType: "preFill",
							maxlength: 50
						},
						versionNum: {
							label: 'template.common.versionNumber',
							type: "inputNumber",
							fillType: "actFill",
							prepend: "V",
							maxlength: 50
						},
					}
				},
				{
					type: "conditionItem",
					label: 'template.lba.lba002.cztj',
					config: {
						pre: {
							label: 'template.common.preFill',
							type: "select",
							multiple: true,
							fillType: "preFill",
							options: this.getDictOptions('business_pztj'),
							otherCode: "preOther",
						},
						act: {
							label: 'template.common.actualFill',
							type: "select",
							fillType: "actFill",
							otherCode: "actOther",
							multiple: true,
							compareTo: "pre",
							options: this.getDictOptions('business_pztj')
						}
					}
				},
				{
					type: "cellItem",
					label: 'template.lba.lba002.czsj',
					config: {
						startDate: {
							label: 'template.common.startTime',
							type: "input",
						},
						endDate: {
							label: 'template.common.endTime',
							type: "input",
						},
					}
				}
			]
		},
		// 附件表单配置
		getFjFormConfig() {
			return [
				{
					type: "attachment",
					config: {
						attTitle: {
							label: 'template.lba.lba003.fj',
							type: "attachment",
							fillType: "actFill",
						},
					}
				}
			]
		},
		paralleStepFormConfig(){
			return [
				{
				type: 'step',
				config: {
					jz: {
					label: 'template.lba.lba004.jzmc',
					type: 'input',
					fillType: 'preFill',
					subType: 'sj',
					subKey: 'jzCode',
					subFillType: 'actFill',
					maxlength: 20
					}
				}
				}
			]
		},
		paralleStepColumns(){
			return [
				{
				label: 'template.lba.lba004.xsbs',
				prop: 'xsbs',
				width: 150,
				showWidth: 120,
				bodyType: 'inputNumber',
				bodyFillType: 'preFill',
				bodyMaxlength: 10
				},
				{
				label: 'template.lba.lba004.ysypjrz',
				prop: 'ysypjrz',
				width: 250,
				showWidth: 120,
				fillType: 'preFill',
				bodyType: 'inputNumber',
				bodyFillType: 'preFill',
				headerSelectKey: 'ysypjrzUnit',
      			headerSelectTo: 'sjypjrzUnit',
				headerOptions: this.getDictOptions('business_tjdw'),
				bodyMaxlength: 10
				},
				{
				label: 'template.lba.lba004.sjypjrz',
				prop: 'sjypjrz',
				width: 250,
				showWidth: 120,
				fillType: 'preFill',
				bodyType: 'inputNumber',
				bodyFillType: 'actFill',
				compareTo: 'ysypjrz',
      			copyFrom: 'ysypjrz',
				headerSelectKey: 'sjypjrzUnit',
				headerOptions: this.getDictOptions('business_tjdw'),
				bodyMaxlength: 10
				},
				{
				label: 'template.lba.lba004.ysjzjrz',
				prop: 'ysjzjrz',
				width: 250,
				showWidth: 120,
				fillType: 'preFill',
				bodyType: 'inputNumber',
				bodyFillType: 'preFill',
				headerSelectKey: 'ysjzjrzUnit',
      			headerSelectTo: 'sjjzjrzUnit',
				headerOptions: this.getDictOptions('business_tjdw'),
				bodyMaxlength: 10
				},
				{
				label: 'template.lba.lba004.sjjzjrz',
				prop: 'sjjzjrz',
				width: 250,
				showWidth: 120,
				fillType: 'preFill',
				bodyType: 'inputNumber',
				bodyFillType: 'actFill',
				compareTo: 'ysjzjrz',
      			copyFrom: 'ysjzjrz',
				headerSelectKey: 'sjjzjrzUnit',
				headerOptions: this.getDictOptions('business_tjdw'),
				bodyMaxlength: 10
				}
			]
		}
		
	},
	data() {
		return {
			formData: {}
		};
	},
	mounted() {
		if(this.fillType === "preFill"){
			this.handleAddParalle(true);
		}
	},
	methods: {
		//获取已填写的表单数据
		getFilledFormData() {
			const baseData = this.$refs.baseInfoRef.getFilledFormData();
			const jcbData = this.$refs.jcbRef.getFilledFormData();
			const fjData = this.$refs.fjRef.getFilledFormData();
			const remarkData = this.$refs.remarkRef.getFilledFormData();

			// 获取所有平行配制数据
			const paralleConfigsData = [];
			if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) {
				for (let i = 0; i < this.formData.paralleConfigs.length; i++) {
					const paralleFormData = this.$refs[`paralleStepFormPackageRef_${i}`][0].getFilledFormData();
					const paralleTableFormData = this.$refs[`paralleStepTableRef_${i}`][0].getFilledFormData();
					const paralleStepData = this.$refs[`paralleStepRef_${i}`][0].getFilledFormData();

					paralleConfigsData.push({
						...paralleFormData,
						...paralleTableFormData,
						paralleStepData: paralleStepData.stepData,
						showParalleConfig: true
					});
				}
			}
			return {
				...baseData,
				...jcbData,
				...fjData,
				...remarkData,
				paralleConfigs: paralleConfigsData,
			}
		},
		//获取填写完成的表单数据
		async getFormData() {
			//先校验再获取值
			const validFlag = await this.validFields();
			if (!validFlag) {
				return false;
			}
			let content = this.getFilledFormData();
			return content
		},
		//只做校验
		async validFields() {
			// 构建需要验证的引用数组
			let refsToValidate = ["baseInfoRef","jcbRef","fjRef", "remarkRef"];

			// 添加平行配制相关的引用
			if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) {
				for (let i = 0; i < this.formData.paralleConfigs.length; i++) {
					refsToValidate.push(`paralleStepFormPackageRef_${i}`);
					refsToValidate.push(`paralleStepTableRef_${i}`);
					refsToValidate.push(`paralleStepRef_${i}`);
				}
			}
			return await this.validFormFields(refsToValidate);
		},
		getResource() {
			let content = this.getFilledFormData();
			//生成resource
			let tmpResource = []
			if (this.fillType === "actFill") {
				//平行配置
				if (content.paralleConfigs && content.paralleConfigs.length > 0) {
					for (let i = 0; i < content.paralleConfigs.length; i++) {
						let paralleConfigs = content.paralleConfigs[i]
						let stepTableFormData = paralleConfigs.stepTableFormData
						for (let j = 0; j < stepTableFormData.length; j++) {
							//稀释液 
							tmpResource.push({
								mc: null,
								bh: paralleConfigs.jzCode,
								ph: null,
								nd: null,
								nddw: null,
								ndz: null,
								ly: null,
								sxrq: null,
								kc: null,
								kcdw: null,
								type: 1,
								syl: stepTableFormData[j].sjjzjrz,
								syldw: paralleConfigs.headerSelectFields.sjjzjrzUnit,
								yxzq: null,
								yxzqdw: null,
							})
						}
					}
				}
			}
			if (tmpResource.length > 0) {
				tmpResource = uniqeResourceOne(tmpResource)
			}
			//使用的试剂、仪器
			const stepResource = this.getStepResource()
			this.resourceTmp = uniqeResource(tmpResource, stepResource.sjResource || [])
			this.yqResourceTmp = stepResource.yqResource || []
			this.resourceTmp = tmpResource
			return this.resourceTmp;
		},
		getStepResource() {
			const sjResource = [], yqResource = [];
			if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) {
				for (let i = 0; i < this.formData.paralleConfigs.length; i++) {
					const paralleResource = this.$refs[`paralleStepRef_${i}`][0].getStepResource();
					sjResource.push(...paralleResource.sjResource);
					yqResource.push(...paralleResource.yqResource);
				}
			}
			//去重
			const { sj, yq } = duplicateResource(sjResource, yqResource)
			return { sjResource: sj, yqResource: yq };
		},
		//保存
		async onSave() {
			const formData = this.getStepResource();
			console.log(formData, "formData")
			
		},
		//新增平行配制
		handleAddParalle(init) {
			let isAdd = !init
			if(init && (!this.formData.paralleConfigs || this.formData.paralleConfigs.length===0)){
				isAdd = true
			}
			if(isAdd){
				// 初始化平行配制配置列表
				if (!this.formData.paralleConfigs) {
					this.$set(this.formData, 'paralleConfigs', []);
				}
				// 添加新的平行配制配置
				this.formData.paralleConfigs.push({
					paralleStepData: [],
					paralleTableFormData: [],
					showParalleConfig: true
				});
			}
		},
		// 删除平行配制配置
		deleteParalleConfig(index) {
			if(this.formData.paralleConfigs.length===1){
				this.$message.error("至少需要1个");
          		return;
			}
			this.formData.paralleConfigs.splice(index, 1);
		},
		deleteJcbRow(rowIndex){
			const jcbRef = this.$refs['jcbRef'];
			if (jcbRef) {
				jcbRef.deleteRow(rowIndex);
			}
		},
		// 删除表格行
		deleteRow(rowIndex, type, configIndex = 0) {
			// 根据类型删除对应的表格行
			if (type === 'ladder') {
				const tableRef = this.$refs[`ladderStepTableRef_${configIndex}`];
				if (tableRef) {
					tableRef.deleteRow(rowIndex);
				}
			} else if (type === 'paralle') {
				const tableRef = this.$refs[`paralleStepTableRef_${configIndex}`];
				if (tableRef) {
					tableRef[0].deleteRow(rowIndex);
				}
			}
		},
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}

.print-btn {
	margin-bottom: 20px;
}
.config-header-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 16px;
	color: #303133;
}
</style>