<!-- 生物样品分析储备液配制表 -->
<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 ref="stepFormPackageRef" :formConfig="stepFormConfig"
							:formData="formData" />
					</div>
					<Step ref="stepRef" :formData="formData.stepData"></Step>
					<BaseInfoFormPcakge label="备注" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />

				</div>
			</div>
			<!-- <button @click = "onSave">保存</button> -->
		</div>
	</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';


export default {
	name: "SWYPFXRYPZB",
	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable },
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	computed: {
		storageFormConfig() {
			return [
				{
					type: "conditionItem",
					config: {
						storageCondition: {
							label: "存储条件",
							type: "select",
							fillType: "preFill",
							options: this.getDictOptions('business_cctj'),
							otherCode: "storageConditionOther",
						},

					}
				}
			];
		},
		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",
						},
						versionNum: {
							label: "版本号",
							type: "input",
							fillType: "actFill"
						},

					}
				},
				{
					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",
					label: "配置时间",
					config: {
						createTime: {
							label: "开始时间",
							type: "input",
						},
						endTime: {
							label: "结束时间",
							type: "input",
						},
					}
				}
			]
		},
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						targetName: {
							label: "目标溶液名称",
							type: "input",
							fillType: "preFill",
						},
						targetCode: {
							label: "目标溶液编号",
							type: "input",
							subType: "span",
							fillType: "preFill",
							subKey: "targetCode1",
						},
						targetPreConcentration: {
							label: "目标溶液预计浓度",
							type: "input",
							subType: "select",
							subKey: "targetPreConcentrationUnit",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_nddw'),
						},
						targetActConcentration: {
							label: "目标溶液实际浓度",
							type: "input",
							subType: "select",
							subKey: "targetActConcentrationUnit",
							fillType: "actFill",
							subFillType: "preFill",
							subOptions: this.getDictOptions('business_nddw'),
							copyFrom: "targetPreConcentration",//复制哪个字段
						},
						targetPreVolume: {
							label: "目标溶液预计体积",
							type: "input",
							subType: "select",
							subKey: "targetPreVolumeUnit",
							subOptions: this.getDictOptions('business_tjdw'),
							fillType: "preFill",
						},
						targetActVolume: {
							label: "目标溶液实际体积",
							type: "input",
							subType: "select",
							subKey: "targetActVolumeUnit",
							fillType: "actFill",
							subFillType: "preFill",
							subOptions: this.getDictOptions('business_tjdw'),
							copyFrom: "targetPreVolume",//复制哪个字段
						},
						effectivePeriod: {
							label: "有效周期",
							type: "input",
							subType: "select",
							subKey: "effectivePeriodUnit",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_yxqdw'),
						},
						expireDate: {
							label: "失效日",
							type: "input",
						},
					}
				}
			]
		},
	},
	data() {
		return {
			dataSource: [],
			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" },
			],


			formData: {}
		};
	},
	mounted() {

	},
	methods: {
		async getFormData() {
			return await this.validFormFields(["baseInfoRef", "storageConditionRef","stepFormPackageRef","stepRef","remarkRef"]);
		},
		async onSave() {
			const formData = await this.getFormData();
			console.log(formData, "formData")
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}
</style>