<!-- 生物样品分析溶液配制表 -->
<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 = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
					<LineLabel  label = "试验试剂信息"/>
					<TableList  :columns = "sysjColumns" :dataSource = "dataSource"/>
					<LineLabel  label = "仪器使用信息"/>
					<TableList  :columns = "yqsColumns" :dataSource = "dataSource"/>
					<BaseInfoFormPcakge label = "存储条件" ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
					<LineLabel  label = "操作步骤"/>
					<div class="template-form-item">
						<BaseInfoFormPcakge ref = "stepFormPackage" :formConfig = "stepFormConfig" :formData = "formData"/>
						<CustomTable ref = "stepTable" :columns = "stepColumns" :dataSource = "stepDataSource"/>
					</div>
					<Step ref = "stepRef" :formData = "formData"></Step>
				</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'

const volumeUnitOptions = [
	{ label: 'mg', value: 'mg' },
	{ label: 'ng', value: 'ng' },
]
export default {
	name: "SWYPFXRYPZB",
	components: { BaseInfoFormPcakge,LineLabel,TableList,Step,CustomTable },
	mixins: [templateMixin],
	props: {
		value: {
			type: {},
			default: () => { },
		}
	},
	watch: {
		value: {
			immediate: true,
			handler(v) {

			}
		}
	},
	data() {
		return {
			dataSource:[{name:"名称1"}],
			stepDataSource:[
				{
					code1:"目标溶液编号1",
					code2:"起始溶液编号1",
				},
				{
					code1:"目标溶液编号2",
					code2:"起始溶液编号2",
				},
			],
			stepColumns:[
				{label:"目标溶液编号",prop:"code1",width: 120},
				{
					label:"起始溶液编号",prop:"code2",
					width: 280,
					bodyType:"input",
					bodyFillType:"actFill",
					bodyMaxlength:10,
				},
				{
					label:"预设起始溶液体积",prop:"code3",
					width: 280,
					headerSelectKey:"volumeUnit1",
					fillType:"preFill",
					headerOptions:volumeUnitOptions,
					defaultValue:"mg",
					bodyType:"inputNumber",
					bodySubType:"precisionNumber",
					bodySubKey:"volumePrecision1",
					bodyFillType:"preFill",
					bodySubFillType:"preFill",
				},
				{
					label:"预设起始溶液体积",prop:"code4",
					width: 280,
					headerSelectKey:"volumeUnit2",
					fillType:"preFill",
					headerOptions:volumeUnitOptions,
					defaultValue:"mg",
					bodyType:"inputNumber",
					bodySubType:"precisionNumber",
					bodySubKey:"volumePrecision2",
					bodyFillType:"preFill",
					bodySubFillType:"preFill",
				},
			],
			sysjColumns:[
				{label:"试剂名称",prop:"name"},
				{label:"编号",prop:"name"},
				{label:"批号",prop:"name"},
				{label:"浓度/含量/纯度",prop:"name"},
				{label:"来源",prop:"name"},
				{label:"失效日",prop:"name"},
			],
			yqsColumns:[
				{label:"仪器名称",prop:"name"},
				{label:"仪器型号",prop:"name"},
				{label:"仪器编号",prop:"name"},
				{label:"下次测试/校准/检定日期",prop:"name"},
			],
			storageFormConfig:[
			{
					type:"conditionItem",
					config:{
						storageCondition1:{
							label:"存储条件",
							type:"select",
							fillType:"preFill",
							options:this.$store.state.template.conditionOptions,
							otherCode:"other1",
						},
						
					}
				}
			],
			formConfig: [
				{
					type:"cardItem",
					config:{
						name:{
							label:"试验名称",
							type:"input",
							disabled:true,
						},
						code:{
							label:"试验编号",
							type:"input",
							disabled:true,
						},
						methodCode:{
							label:"方法编号",
							type:"input",
							fillType:"preFill",
							copyFrom:"name",//复制哪个字段
						},
						versionNum:{
							label:"版本号",
							type:"input",
							fillType:"actFill"
						},

					}
				},
				{
					type:"conditionItem",
					label:"试验配制条件",
					config:{
						pre:{
							label:"预填",
							type:"select",
							multiple:true,
							fillType:"preFill",
							options:[
								{label:"白光",value:"1"},
								{label:"黄光",value:"3"},
								{label:"其他",value:"-1"},
							],
							otherCode:"other1",
						},
						act:{
							label:"实际",
							type:"select",
							fillType:"actFill",
							otherCode:"other2",
							multiple:true,
							options:[
								{label:"白光",value:"1"},
								{label:"黄光",value:"3"},
								{label:"其他",value:"-1"},
							]
						}
					}
				},
				{
					type:"cellItem",
					label:"配置时间",
					config:{
						startDate:{
							label:"开始时间",
							type:"dateTime",
						},
						endDate:{
							label:"结束时间",
							type:"dateTime",
						},
					}
				}
			],
			stepFormConfig:[
				{
					type:"step",
					config:{
						startDate:{
							label:"目标溶液名称",
							type:"input",
						},
						endDate:{
							label:"目标溶液编号",
							type:"input",
							subType:"span",
							subKey:"targetCode1",
						},
						target:{
							label:"目标溶液预计浓度",
							type:"input",
							subType:"select",
							subKey:"taget1",
							subOptions:[
								{label:"mg",value:"mg"},
								{label:"ng",value:"ng"},
							],
						},
						target:{
							label:"目标溶液预计浓度",
							type:"input",
							subType:"clickable",
							subKey:"taget1c",
						},
					}
				}
			],
			formData:{}
		};
	},
	mounted() {
		setTimeout(()=>{
			this.formData = {
				code:"code1",name:"name1",act:["1","-1"],taget1:"mg",targetCode1:"123456",taget1c:"可点击",
				stepData:[
					{type: 'container', containerType: ''}
				]
			}
			
		},300)
		setTimeout(()=>{
			this.storageFormConfig[0].config.storageCondition1.options = [
								{label:"白光",value:"1"},
								{label:"黄光",value:"3"},
								{label:"其他",value:"-1"},
							]
		},400)
	},
	methods: {
		async onSave(){
			// const result1 = await this.$refs.baseInfo.getFormData();
			// const result2 = await this.$refs.storageCondition.getFormData();
			const result3 = await this.$refs.stepRef.getFormData();
			// const result = await this.$refs.stepFormPackage.getFormData();
			// const result1 = await this.$refs.stepTable.getFormData();
			console.log(...result3,"reee")
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20{
	margin-top: 20px;
}
</style>