<!-- 试验物质配制计划表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{formData.bdmc || $t('template.gsp.SYWZPZJHB.title')}}<img
					src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPcakge label="template.common.baseInfo" ref="baseInfoRef" :formConfig="baseInfoFormConfig"
						:formData="formData" />
					<LineLabel label="template.gsp.SYWZPZJHB.jhxx" />
					<div class="template-form-item">
						<BaseInfoFormPcakge  ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur"
							:formData="formData" />
						<CustomTable @blur="onHandleTableBlur" :showHeaderSelect="fillType === 'actFill'" :showAddRow="fillType === 'actFill'" :showOperation="fillType === 'actFill'" ref="stepTableRef" :columns="stepColumns"
							:formData="formData" >
							<template slot="operation" slot-scope="{ row, rowIndex}">
								<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" @deleteRow="deleteRow" ></TableOpertaionDelete>
							</template>
						</CustomTable>
					</div>
					<BaseInfoFormPcakge label="template.gsp.SYWZPZJHB.tbsm" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
import LineLabel from "@/components/Template/LineLabel";
import templateMixin from "../../mixins/templateMixin";
import CustomTable from '@/components/Template/CustomTable.vue';
import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue"

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

			}
		},
		fillType: {
			immediate: true,
			handler(v) {
				console.log(v,"fillType")
			}
		},
	},
	computed: {
		
		// 备注表单配置
		remarkConig() {
			return [
				{
					type: "cellItem",
					config: {
						remark: {
							label: "",
							type: "textarea",
							fillType: "actFill",
							span: 1,
							placeholder: "template.common.remarkPlaceholder",
							maxlength: 1000,
							rows: 5
						}
					}
				}
			]
		},
		// 试验基本信息表单配置
		baseInfoFormConfig() {
			return [
				{
					type: "cardItem",
					config: {
						studyMc: {
							label: "template.common.testName",
							type: "input",
							disabled: true,
						},
						studySn: {
							label: "template.common.testNumber",
							type: "input",
							disabled: true,
						},

					}
				},
			]
		},
		// 操作步骤表单配置
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						drawTime: {
							label: "template.gsp.SYWZPZJHB.lqsj",
							type: "dateTime",
							fillType: "actFill",
						},
						analyzeTime: {
							label: "template.gsp.SYWZPZJHB.fxsj",
							type: "dateTime",
							fillType: "actFill",
						},
						testSubstance: {
							label: "template.gsp.SYWZPZJHB.sywz",
							type: "input",
							fillType: "actFill",
						},
						configFrequency: {
							label: "template.gsp.SYWZPZJHB.pzpl",
							type: "input",
							fillType: "actFill",
						},
					}
				}
			]
		},
		// 步骤表格列配置
		stepColumns() {
			return [
				{
					label: "template.gsp.SYWZPZJHB.gyzjhzb", 
					prop: "startSolutionCode",
					width: 280,
					bodyType: "input",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
				{
					label: "template.gsp.SYWZPZJHB.pznd", 
					prop: "preparationConcentration",
					width: 280,
					headerSelectKey: "preparationConcentrationUnit",
					fillType: "actFill",
					headerOptions: this.$store.state.template.volumeOptions,
					defaultValue: "mg",
					bodyType: "inputNumber",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
				{
					label: "template.gsp.SYWZPZJHB.pztj", 
					prop: "preparationVolume",
					width: 280,
					headerSelectKey: "preparationVolumeUnit",
					fillType: "actFill",
					headerOptions: this.$store.state.template.volumeOptions,
					bodyType: "inputNumber",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
			]
		},
	},
	data() {
		return {
			selectReagentVisible: false,
			subSolutionVisible: false,
			currentSubKey: "",//当前点击的子项key
			dataSource: [],
			stepTableDataSource: [],

		};
	},
	mounted() {
	
	},
	methods: {
		//获取已填写的表单数据
		getFilledFormData(){
			return this.getFilledFormDataByRefs(["baseInfoRef","stepFormPackageRef",  "remarkRef","stepTableRef"])
		},
		async getFormData() {
			return await this.validFormFields(["baseInfoRef", "stepFormPackageRef","stepTableRef","remarkRef"]);
		},
		async onSave() {
			const formData = await this.getFormData();
			// const formData = await this.$refs.stepTableRef.getFormData();
			console.log(formData, "formData")
		},
		// 添加行
		addRow() {
			this.$refs.stepTableRef.addRow({
				startSolutionCode: "",
				preparationConcentration: "",
				preparationVolume: "",
			})
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}

</style>