<!-- 生物样品标曲工作液制备表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{formData.templateMc || "生物样品标曲工作液制备表"}}<img
					src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPcakge label="试验基本信息" ref="baseInfoRef" :formConfig="baseInfoFormConfig"
						:formData="formData" />
					<TableList label="试验试剂信息" :columns="sysjColumns" :dataSource="resource" />
					<TableList label="仪器使用信息" :columns="yqsColumns" :dataSource="resource" />
					<BaseInfoFormPcakge label="存储条件" ref="storageConditionRef" :formConfig="storageFormConfig"
						:formData="formData" />
					<LineLabel label="操作步骤" />
					<div class="template-form-item">
						<BaseInfoFormPcakge @clickable="handleClickable" ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur"
							:formData="formData" />
						<CustomTable fieldItemLabel = "操作步骤"  @blur="onHandleTableBlur" :showOperation="false" ref="stepTableRef" :columns="stepColumns"
							:formData="formData" >
							<template slot="operation" slot-scope="{ row, rowIndex}">
								<TableOpertaion :fillType="fillType" :row="row" :rowIndex="rowIndex" @deleteRow="deleteRow"></TableOpertaion>
							</template>
						</CustomTable>
					</div>
					<Step ref="stepRef" :formData="formData.stepData"></Step>
					<BaseInfoFormPcakge label="备注" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />

				</div>
			</div>
			<button @click="onSave">保存</button>
		</div>
		<SelectReagentDialog 
		@submit="onSelectReagentSubmit"
		ref="selectReagentDialogRef" >
		</SelectReagentDialog>
	</div>
</template>

<script>
import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
import LineLabel from "@/components/Template/LineLabel";
import TableList from "@/components/Template/Table";
import Step from "@/components/Template/Step";
import templateMixin from "../../mixins/templateMixin";
import CustomTable from '@/components/Template/CustomTable.vue';
import SelectReagentDialog from '../../dialog/SelectReagentDialog.vue';
import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue"

export default {
	name: "SWYPBQGZYZBB",
	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable, SelectReagentDialog, TableOpertaion },		
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	watch: {
		fillType: {
			immediate: true,
			handler(v) {
				console.log(v,"fillType")
			}
		},
	},
	computed: {
		// 存储条件表单配置
		storageFormConfig() {
			return [
				{
					type: "conditionItem",
					config: {
						storageCondition1: {
							label: "存储条件",
							type: "select",
							fillType: "preFill",
							options: this.getDictOptions('business_cctj'),
							otherCode: "other1",
						},

					}
				}
			];
		},
		// 备注表单配置
		remarkConig() {
			return [
				{
					type: "cellItem",
					config: {
						remark: {
							label: "",
							type: "textarea",
							fillType: "actFill",
							span: 1,
							placeholder: "请输入备注",
							maxlength: 1000,
							rows: 5
						}
					}
				}
			]
		},
		// 试验基本信息表单配置
		baseInfoFormConfig() {
			return [
				{
					type: "cardItem",
					config: {
						studyMc: {
							label: "试验名称",
							type: "input",
							disabled: true,
						},
						studySn: {
							label: "试验编号",
							type: "input",
							disabled: true,
						},
						methodCode: {
							label: "方法编号",
							type: "input",
							fillType: "preFill",
							maxlength: 50,
						},
						versionNum: {
							label: "版本号",
							type: "inputNumber",
							fillType: "actFill",
							prepend:"V",
							maxlength: 50,
						},

					}
				},
				{
					type: "conditionItem",
					label: "试验配制条件",
					config: {
						pre: {
							label: "预填",
							type: "select",
							multiple: true,
							fillType: "preFill",
							options: this.getDictOptions('business_pztj'),
							otherCode: "preOther",
						},
						act: {
							label: "实际",
							type: "select",
							fillType: "actFill",
							otherCode: "actOther",
							multiple: true,
							options: this.getDictOptions('business_pztj')
						}
					}
				},
				{
					type: "cellItem",
					config: {
						containerMaterial: {
							label: "容器材质",
							type: "select",
							options: this.getDictOptions('business_rqcz'),
							fillType: "actFill",
							otherCode: "containerMaterialOther",
						}
					}
				},
				{
					type: "cellItem",
					label: "处理时间",
					config: {
						startDate: {
							label: "开始时间",
							type: "input",
						},
						endDate: {
							label: "结束时间",
							type: "input",
						},
					}
				}
			]
		},
		// 操作步骤表单配置
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						startSolution: {
							label: "起始源溶液",
							type: "input",
							fillType: "preFill",
							subType: "clickable",
							subKey: "subStartSolution",
							subFillType: "actFill",
							maxlength: 20,
						},
						targetStartSolution: {
							label: "预设起始源溶液浓度",
							type: "inputNumber",
							subType: "select",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_nddw'),
							subKey: "subTargetStartSolution",
							maxlength: 10,
						},
						targetAcSolution: {
							label: "实际起始源溶液浓度",
							type: "input",
							fillType: "actFill",
							disabled: true,
							maxlength: 10,
						},
						solution: {
							label: "稀释液",
							type: "input",
							fillType: "preFill",
							subType: "clickable",
							subKey: "subSolution",
							subFillType: "actFill",
							maxlength: 20,
						},
						codeSTD: {
							label: "起始编号STD",
							type: "input",
							maxlength: 10,
							fillType: "preFill",
						},
						stepStorageCondition: {
							label: "存储条件",
							type: "select",
							fillType: "preFill",
							options: this.getDictOptions('business_cctj'),
							otherCode: "stepStorageConditionOther",
						},

						effectivePeriod: {
							label: "目标溶液有效周期",
							type: "input",
							subType: "select",
							subKey: "effectivePeriodUnit",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_yxqdw'),
						},
						expireDate: {
							label: "目标溶液失效日",
							type: "input",
						},
					}
				}
			]
		},
		// 步骤表格列配置
		stepColumns() {
			return [
				{
					label: "目标溶液编号",
					prop: "targetSolutionCode",
					bodyType: "input",
					subType: "span",
					subKey: "subTargetSolutionCode",
					bodyFillType: "preFill",
					width: 280
				},
				{
					label: "起始溶液编号", 
					prop: "startSolutionCode",
					width: 280,
					bodyType: "input",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
				{
					label: "预设起始溶液体积", 
					prop: "targetStartSolutionVolume",
					width: 280,
					headerSelectKey: "targetStartSolutionVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodySubType: "inputNumber",
					bodySubKey: "targetStartSolutionVolumePrecision",
					bodyFillType: "preFill",
					bodySubFillType: "preFill",
					showBodySub: this.fillType === "preFill",
					bodyDisabled: true,
					bodyPrecisionKey: "targetStartSolutionVolumePrecision",
					bodyMaxlength: 10,
					bodySubPlaceholder: "请输入保留小数位数",
				},
				{
					label: "实际起始溶液体积", 
					prop: "actStartSolutionVolume",
					width: 280,
					headerSelectKey: "actStartSolutionVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
					compareTo: "targetStartSolutionVolume",//与哪个字段比较
					copyFrom: "targetStartSolutionVolume",//复制哪个字段
				},
				{
					label: "预设稀释液体积", 
					prop: "targetDiluentVolume",
					width: 280,
					headerSelectKey: "targetDiluentVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodySubType: "inputNumber",
					bodySubKey: "targetDiluentVolumePrecision",
					bodyFillType: "preFill",
					bodySubFillType: "preFill",
					showBodySub: this.fillType === "preFill",
					bodyDisabled: true,
					bodyPrecisionKey: "targetDiluentVolumePrecision",
					bodyMaxlength: 10,
					bodySubPlaceholder: "请输入保留小数位数",
				},
				{
					label: "实际稀释液体积", 
					prop: "actDiluentVolume",
					width: 280,
					headerSelectKey: "actDiluentVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
					compareTo: "targetDiluentVolume",//与哪个字段比较
					copyFrom: "targetDiluentVolume",//复制哪个字段
				},
				{
					label: "预设目标溶液浓度", 
					prop: "targetSolutionConcentration",
					width: 280,
					headerSelectKey: "targetSolutionConcentrationUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_nddw'),
					bodyType: "inputNumber",
					bodyFillType: "preFill",
					bodyMaxlength: 10,
				},
				{
					label: "实际目标溶液浓度", 
					prop: "actSolutionConcentration",
					width: 280,
					headerSelectKey: "actSolutionConcentrationUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_nddw'),
					bodyType: "inputNumber",
					bodySubType: "inputNumber",
					bodySubKey: "actSolutionConcentrationPrecision",
					bodyFillType: "actFill",
					bodySubFillType: "preFill",
					showBodySub: this.fillType === "preFill",
					bodyDisabled: true,
					bodyPrecisionKey: "actSolutionConcentrationPrecision",
					bodyMaxlength: 10,
					bodySubPlaceholder: "请输入保留小数位数",
				},
					{
					label: "预设目标溶液体积", 
					prop: "targetSolutionVolume",
					width: 280,
					headerSelectKey: "targetSolutionVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodyFillType: "preFill",
					bodyMaxlength: 10,
				},
				{
					label: "实际目标溶液体积", 
					prop: "actSolutionVolume",
					width: 280,
					headerSelectKey: "actSolutionVolumeUnit",
					fillType: "preFill",
					headerOptions: this.getDictOptions('business_tjdw'),
					bodyType: "inputNumber",
					bodySubType: "inputNumber",
					bodySubKey: "actSolutionVolumePrecision",
					bodyFillType: "actFill",
					bodySubFillType: "preFill",
					showBodySub: this.fillType === "preFill",
					bodyDisabled: true,
					bodyPrecisionKey: "actSolutionVolumePrecision",
					bodyMaxlength: 10,
					bodySubPlaceholder: "请输入保留小数位数",
				},
			]
		},
	},
	data() {
		return {
			subSolutionVisible: false,
			currentSubKey: "",//当前点击的子项key
			stepTableDataSource: [],
		};
	},
	mounted() {
	
	},
	methods: {
		handleClickable(item) {
			if(this.fillType === "preFill"){
				return;
			}
			const {subKey = ""} = item;
			if(subKey === "subStartSolution" || subKey === "subSolution"){//起始源溶液点击事件
				this.$refs.selectReagentDialogRef.show()
				this.currentSubKey = subKey;
			}
		},
		//选择试剂提交事件
		onSelectReagentSubmit(code,row){
			if(this.currentSubKey === "subStartSolution"){//起始源溶液点击事件
				this.$refs.stepFormPackageRef.updateFormData("targetAcSolution", row.nd);
				this.updateStepTableData(row);
			}
			this.$refs.stepFormPackageRef.updateFormData(this.currentSubKey, code);
			this.$refs.selectReagentDialogRef.onCancel()
		},
		//更新table数据
		updateStepTableData(row){
			const {stepTableFormData = []} = this.formData;
			
			// 创建新的表格数据副本
			const newStepTableData = JSON.parse(JSON.stringify(stepTableFormData));
			
			// 遍历数据，按要求更新起始溶液编号
			for (let i = 0; i < newStepTableData.length; i++) {
				if (i === 0) {
					// 第一条记录的起始溶液编号是确认弹框带出来的，也就是row.code字段
					newStepTableData[i].startSolutionCode = row.code;
				} else {
					// 第二条的起始溶液编号是第一条数据里面的targetSolutionCode字段，
					// 第三条的起始溶液编号是第二条数据里面的targetSolutionCode字段，以此类推
					newStepTableData[i].startSolutionCode = newStepTableData[i - 1].targetSolutionCode;
				}
			}
			
			// 更新stepTableRef组件的数据
			this.$refs.stepTableRef.updateDataSource(newStepTableData);
		},
		async getFormData() {
			return await this.validFormFields(["baseInfoRef", "storageConditionRef","stepFormPackageRef","stepTableRef","stepRef","remarkRef"]);
		},
		async onSave() {
			// const formData = await this.getFormData();
			const formData = await this.validFormFields(["baseInfoRef", "storageConditionRef","stepFormPackageRef","stepTableRef","stepRef","remarkRef"]);

			console.log(formData, "formData")
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}
</style>