<!-- 生物样品分析溶液配制表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{ $t('template.common.pageTitle') }}<img
					src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPcakge :label="$t('template.common.baseInfo')" ref="baseInfoRef" :formConfig="baseInfoFormConfig"
						:formData="formData" />
					<TableList :label="$t('template.common.reagentInfo')" :columns="sysjColumns" :dataSource="dataSource" />
					<TableList :label="$t('template.common.instrumentInfo')" :columns="yqsColumns" :dataSource="dataSource" />
					<BaseInfoFormPcakge :label="$t('template.common.storageCondition')" ref="storageConditionRef" :formConfig="storageFormConfig"
						:formData="formData" />
					<LineLabel :label="$t('template.common.operationSteps')" />
					<div class="template-form-item">
						<BaseInfoFormPcakge ref="stepFormPackageRef" :formConfig="stepFormConfig"
							@blur = "onHandleBlur"
							:formData="formData" />
					</div>
					<Step ref="stepRef" :formData="formData.stepData"></Step>
					<BaseInfoFormPcakge :label="$t('template.common.remark')" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />

				</div>
			</div>
			<button @click = "onSave">{{ $t('template.common.saveBtn') }}</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: this.$t('template.common.storageConditionLabel'),
							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: this.$t('template.common.remarkPlaceholder'),
							maxlength: 1000,
							rows: 5
						}
					}
				}
			]
		},
		baseInfoFormConfig() {
			return [
				{
					type: "cardItem",
					config: {
						studyMc: {
							label: this.$t('template.common.testName'),
							type: "input",
							disabled: true,
						},
						studySn: {
							label: this.$t('template.common.testNumber'),
							type: "input",
							disabled: true,
						},
						methodCode: {
							label: this.$t('template.common.methodCode'),
							type: "input",
							fillType: "preFill",
							maxlength:50
						},
						versionNum: {
							label: this.$t('template.common.versionNumber'),
							type: "input",
							fillType: "actFill",
							maxlength:50
						},

					}
				},
				{
					type: "conditionItem",
					label: this.$t('template.common.testConfigurationConditions'),
					config: {
						pre: {
							label: this.$t('template.common.preFill'),
							type: "select",
							multiple: true,
							fillType: "preFill",
							options: this.getDictOptions('business_pztj'),
							otherCode: "preOther",
						},
						act: {
							label: this.$t('template.common.actualFill'),
							type: "select",
							fillType: "actFill",
							otherCode: "actOther",
							multiple: true,
							options: this.getDictOptions('business_pztj')
						}
					}
				},
				{
					type: "cellItem",
					label: this.$t('template.common.configurationTime'),
					config: {
						createTime: {
							label: this.$t('template.common.startTime'),
							type: "input",
						},
						endTime: {
							label: this.$t('template.common.endTime'),
							type: "input",
						},
					}
				}
			]
		},
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						targetName: {
							label: this.$t('template.common.targetSolutionName'),
							type: "input",
							fillType: "preFill",
							maxlength:50
						},
						targetCode: {
							label: this.$t('template.common.targetSolutionCode'),
							type: "input",
							subType: "span",
							fillType: "preFill",
							subKey: "targetCode1",
							maxlength:20
						},
						targetPreConcentration: {
							label: this.$t('template.common.targetPreConcentration'),
							type: "inputNumber",
							subType: "select",
							subKey: "targetPreConcentrationUnit",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_nddw'),
							maxlength:10
						},
						targetActConcentration: {
							label: this.$t('template.common.targetActConcentration'),
							type: "inputNumber",
							subType: "select",
							subKey: "targetActConcentrationUnit",
							compareTo: "targetPreConcentration",//与哪个字段比较
							fillType: "actFill",
							subFillType: "preFill",
							subOptions: this.getDictOptions('business_nddw'),
							copyFrom: "targetPreConcentration",//复制哪个字段
							maxlength:10
						},
						targetPreVolume: {
							label: this.$t('template.common.targetPreVolume'),
							type: "inputNumber",
							subType: "select",
							subKey: "targetPreVolumeUnit",
							subOptions: this.getDictOptions('business_tjdw'),
							fillType: "preFill",
							maxlength:10
						},
						targetActVolume: {
							label: this.$t('template.common.targetActVolume'),
							type: "inputNumber",
							subType: "select",
							subKey: "targetActVolumeUnit",
							fillType: "actFill",
							subFillType: "preFill",
							subOptions: this.getDictOptions('business_tjdw'),
							compareTo: "targetPreVolume",//与哪个字段比较
							copyFrom: "targetPreVolume",//复制哪个字段
							maxlength:10
						},
						effectivePeriod: {
							label: this.$t('template.common.effectivePeriod'),
							type: "inputNumber",
							subType: "select",
							subKey: "effectivePeriodUnit",
							fillType: "preFill",
							subOptions: this.getDictOptions('business_yxqdw'),
							maxlength:10
						},
						expireDate: {
							label: this.$t('template.common.expireDate'),
							type: "input",
						},
					}
				}
			]
		},
	},
	data() {
		return {
			dataSource: [],
			sysjColumns: [
				{ label: this.$t('template.common.reagentName'), prop: "reagentName" },
				{ label: this.$t('template.common.reagentCode'), prop: "reagentCode" },
				{ label: this.$t('template.common.reagentNo'), prop: "reagentNo" },
				{ label: this.$t('template.common.concentration'), prop: "concentration" },
				{ label: this.$t('template.common.source'), prop: "source" },
				{ label: this.$t('template.common.reagentExpireDate'), prop: "expireDate" },
			],
			yqsColumns: [
				{ label: this.$t('template.common.instrumentName'), prop: "instrumentName" },
				{ label: this.$t('template.common.instrumentModel'), prop: "instrumentModel" },
				{ label: this.$t('template.common.instrumentCode'), prop: "instrumentCode" },
				{ label: this.$t('template.common.nextTestDate'), 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>