<!-- 生物样品标曲工作液制备表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">生物样品标曲工作液制备表<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="dataSource" />
					<TableList label="仪器使用信息" :columns="yqsColumns" :dataSource="dataSource" />
					<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  ref="stepTable" :columns="stepColumns"
							:formData="formData" />
					</div>
					<Step ref="stepRef" :formData="formData"></Step>
					<BaseInfoFormPcakge label="备注" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />

				</div>
			</div>
			<button @click="onSave">保存</button>
		</div>
		<SelectReagentDialog 
		@submit="onSelectReagentSubmit"
		@cancel="selectReagentVisible=false"
		ref="selectReagentDialogRef" :visible.sync="selectReagentVisible" >
		</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';

export default {
	name: "SWYPBQGZYZBB",
	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable, SelectReagentDialog },	
	mixins: [templateMixin],
	props: {
		value: {
			type: {},
			default: () => { },
		},
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	watch: {
		value: {
			immediate: true,
			handler(v) {

			}
		}
	},
	computed: {
		// 存储条件表单配置
		storageFormConfig() {
			return [
				{
					type: "conditionItem",
					config: {
						storageCondition1: {
							label: "存储条件",
							type: "select",
							fillType: "preFill",
							options: this.$store.state.template.conditionOptions,
							otherCode: "other1",
						},

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

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

						effectivePeriod: {
							label: "目标溶液有效周期",
							type: "input",
							subType: "select",
							subKey: "effectivePeriodUnit",
							fillType: "preFill",
							subOptions: this.$store.state.template.effectivePeriodOptions,
						},
						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.$store.state.template.volumeOptions,
					defaultValue: "mg",
					bodyType: "inputNumber",
					bodySubType: "inputNumber",
					bodySubKey: "subTargetStartSolutionPrecision",
					bodyFillType: "preFill",
					bodySubFillType: "preFill",
					showBodySub: this.fillType === "preFill",
					bodyDisabled: true,
					bodyPrecisionKey: "subTargetStartSolutionPrecision",
				},
				{
					label: "实际起始溶液体积", prop: "actStartSolutionVolume",
					width: 280,
					headerSelectKey: "actStartSolutionVolumeUnit",
					fillType: "preFill",
					headerOptions: this.$store.state.template.volumeOptions,
					bodyType: "inputNumber",
					bodyFillType: "actFill",
				},
			]
		},
	},
	data() {
		return {
			selectReagentVisible: false,
			subSolutionVisible: false,
			currentSubKey: "",//当前点击的子项key
			dataSource: [],
			stepTableDataSource: [],
			sysjColumns: [
				{ label: "试剂名称", prop: "reagentName" },
				{ label: "编号", prop: "reagentCode" },
				{ label: "批号", prop: "reagentNo" },
				{ label: "浓度/含量/纯度", prop: "concentration" },
				{ label: "来源", prop: "source" },
				{ label: "失效日", prop: "expireDate" },
			],
			yqsColumns: [
				{ label: "仪器名称", prop: "instrumentName" },
				{ label: "仪器型号", prop: "instrumentModel" },
				{ label: "仪器编号", prop: "instrumentCode" },
				{ label: "下次测试/校准/检定日期", prop: "nextTestDate" },
			],

		};
	},
	mounted() {
		if (this.fillType === "preFill") {
			this.formData = {
				effectivePeriodUnit: "days",//设置默认值
				createTime: "2026-01-02 18:05:36",//设置默认值
				stepTableFormData: [
					{ actStartSolutionVolume: 1, subActStartSolutionVolume: "ul", subTargetStartSolutionPrecision: 3 },
					{ targetStartSolutionVolume: 3, subTargetStartSolutionVolume: "mg", subTargetStartSolutionPrecision: 2 },
				],
				headerSelectFields: {
					targetStartSolutionVolumeUnit: "mg",
					actStartSolutionVolumeUnit: "ul",
				}
			}
		}
	},
	methods: {
		handleClickable(item) {
			if(this.fillType === "preFill"){
				// return;
			}
			const {subKey = ""} = item;
			if(subKey === "subStartSolution" || subKey === "subSolution"){//起始源溶液点击事件
				this.selectReagentVisible = true;
				this.currentSubKey = subKey;
			}
		},
		//选择试剂提交事件
		onSelectReagentSubmit(code){
			this.formData[this.currentSubKey] = code;
			this.$set(this.formData, this.currentSubKey, code);
			this.formData = {...this.formData}
			this.selectReagentVisible = false;
		},
		async getFormData() {
			const baseData = await this.$refs.baseInfoRef.getFormData();
			const conditionData = await this.$refs.storageConditionRef.getFormData();
			const stepFormData = await this.$refs.stepFormPackageRef.getFormData();
			const stepDataFormData = await this.$refs.stepTable.getFormData();
			const stepData = await this.$refs.stepRef.getFormData();
			if (!stepData.length) {
				this.$message.error("请添加步骤");
				return;
			}
			const remarkData = await this.$refs.remarkRef.getFormData();
			return {
				...baseData,
				...conditionData,
				...stepData,
				stepData: stepFormData,
				...remarkData,
				...stepDataFormData
			}
		},
		async onSave() {
			// const formData = await this.getFormData();
			const stepDataFormData = await this.$refs.stepTable.getFormData();
			console.log(stepDataFormData, "formData")
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}
</style>