<!-- 生物样品分析方法学样品制备表-最大样本数-生物样品分析方法学样品制备表(Sample Size) -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{ formData.bdmc ||
				 $t('template.sp.sp015.title') }}<img src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPcakge fieldItemLabel="template.common.baseInfo" label="template.common.baseInfo" ref="baseInfoRef"
						:formConfig="baseInfoFormConfig" :formData="formData" />
					<TableList label="template.common.reagentInfo" :columns="sysjColumns"
						:dataSource="resource" />
					<TableList label="template.common.instrumentInfo" :columns="yqsColumns"
						:dataSource="resource" />
					<BaseInfoFormPcakge fieldItemLabel="template.common.storageCondition" label="template.common.storageCondition" ref="storageConditionRef"
						:formConfig="storageFormConfig" :formData="formData" />
					<LineLabel label="template.common.operationSteps" />
					<div class="template-form-item">
						<BaseInfoFormPcakge fieldItemLabel="template.common.operationSteps" ref="stepFormPackageRef" :formConfig="stepFormConfig"
							:formData="formData" @clickable="handleJzClickable" />

						<CustomTable 
							@blur="onHandleTableBlur" 
							:ref="`tableRef`" 
							:columns="tableStepColumns" 
							:formData="formData"
							:prefixKey = "`table`"
							@clickable="handleClickable"
							fieldItemLabel = "template.common.operationSteps"
						>
							<template slot="operation" slot-scope="{ row, rowIndex}">
								<TableOpertaion 
									:fillType="fillType" 
									:row="row" 
									:rowIndex="rowIndex"
									@deleteRow="(rowIndex) => deleteRow(rowIndex)"
								></TableOpertaion>
							</template>
						</CustomTable>
					</div>
					<Step ref="stepRef" :formData="formData.stepData"></Step>
					<BaseInfoFormPcakge fieldItemLabel="template.common.remark" label="template.common.remark" ref="remarkRef" :formConfig="remarkConig"
						:formData="formData" />

				</div>
			</div>
		</div>
		<!-- <button @click = "onSave">保存</button> -->

		<SelectReagentDialog 
		@submit="onSelectReagentSubmit"
		ref="selectReagentDialogRef" >
		</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 { getLatestSn } from '@/api/template';
import {getSWYPFXFFXYPZBBTableConfig} from "../../../formConfig/SWYPFXFFXYPZBBTableConfig.js";
import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue"
import SelectReagentDialog from '../../../dialog/SelectReagentDialog.vue';
import { EventBus } from "@/utils/eventBus";

export default {
	name: "ZDYBS",
	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable,TableOpertaion,SelectReagentDialog },
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	computed: {
		storageFormConfig() {
			return [
				{
					type: "conditionItem",
					config: {
						storageCondition: {
							label: '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: '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,
						},
						methodCode: {
							label: 'template.common.methodCode',
							type: "input",
							fillType: "preFill",
							maxlength: 50
						},
						versionNum: {
							label: 'template.common.versionNumber',
							type: "input",
							fillType: "actFill",
							maxlength: 50
						},
						//处理批编号
						clpbg: {
							label: 'template.sp.sp008.clpbh',
							type: "input",
							fillType: "actFill",
							maxlength: 50
						},

					}
				},
				{
					type: "conditionItem",
					label: 'template.common.testConfigurationConditions',
					config: {
						pre: {
							label: 'template.common.preFill',
							type: "select",
							multiple: true,
							fillType: "preFill",
							options: this.getDictOptions('business_pztj'),
							otherCode: "preOther",
						},
						act: {
							label: 'template.common.actualFill',
							type: "select",
							fillType: "actFill",
							otherCode: "actOther",
							multiple: true,
							options: this.getDictOptions('business_pztj')
						}
					}
				},
				{
					type: "cellItem",
					label: 'template.sp.sp008.rqcz',
					config: {
						rqcz: {
							type: "select",
							multiple: true,
							fillType: "actFill",
							options: this.getDictOptions('business_rqcz'),
							otherCode: "rqczOther",
						},
					}
				},
				{
					type: "cellItem",
					label: 'template.sp.sp008.clsj',
					config: {
						startDate: {
							label: 'template.common.startTime',
							type: "input",
						},
						endDate: {
							label: 'template.common.endTime',
							type: "input",
						},
					}
				}
			]
		},
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						jz: {
							label: 'template.sp.sp008.xzjz',
							type: "input",
							fillType: "preFill",
							subType: "clickable",
							subKey: "subJz",
							subFillType: "actFill",
							maxlength: 20,
							labelWidth: 80,
						},
					}
				}
			]
		},
		tableStepColumns() {
			return getSWYPFXFFXYPZBBTableConfig(this,'business_sp_zdybs');
		},
	},
	data() {
		return {
			reagentType: "",//本表单特殊字段：选择试剂的类型1选择基质，2表格里面选择试剂

			currentSubKey: "",//当前点击的子项key
			rowIndex:0,//当前表格点击的行数

			resource: [],
			sysjColumns: [
				{ label: 'template.common.reagentName', prop: "mc" },//名称
				{ label: 'template.common.reagentCode', prop: "bh" },//编号
				{ label: 'template.common.reagentNo', prop: "ph" },//批号 试剂，供试品才有
				{ label: 'template.common.concentration', prop: "nd" },//浓度
				{ label: 'template.common.source', prop: "source" },//来源 
				{ label: 'template.common.reagentExpireDate', prop: "sxrq" },//失效日期
			],
			yqsColumns: [
				{ label: 'template.common.instrumentName', prop: "instrumentName" },
				{ label: 'template.common.instrumentModel', prop: "instrumentModel" },
				{ label: 'template.common.instrumentCode', prop: "instrumentCode" },
				{ label: 'template.common.nextTestDate', prop: "nextTestDate" },
			],
			formData: {}
		};
	},
	mounted() {

	},
	watch: {
		formData: {
			immediate: true,
			handler(v) {
				if(this.fillType === "actFill"){
					this.getCode(v);
				}
			}
		}
	},
	methods: {
		//点击基质选择
		handleJzClickable(obj){
			this.reagentType = 1//本表单特殊字段
			this.currentSubKey = obj.subKey;
			this.$refs.selectReagentDialogRef.show(this.formData.id)
		},
		//选择试剂提交事件
		onSelectReagentSubmit(code,row){
			if(this.reagentType===1){
				this.$refs.stepFormPackageRef.updateFormData(this.currentSubKey, code);
			}else{
				this.$refs.tableRef.updateDataSourceByRowIndex(this.rowIndex,{
					[this.currentSubKey]: code,
				})
			}
			this.$refs.selectReagentDialogRef.onCancel()
		},
		//点击表格单元格
		handleClickable(col, rowIndex) {
			//本表单特殊字段
			this.reagentType = 2

			this.rowIndex = rowIndex
			this.currentSubKey = col.prop;
			console.log("clickable",rowIndex, col)
			if(col.prop === "sjry"){
				//调用对应弹窗的方法-多个点击的需要判断是哪个字段点击
				this.$refs.selectReagentDialogRef.show(this.formData.id)
			}
		},
		//获取目标溶液编号
		async getCode(v){
			const {stepTableFormData = []} = v;
			if(stepTableFormData && stepTableFormData.length>0 && !stepTableFormData[0].bhCode){
				const result = await getLatestSn({
					count: stepTableFormData.length,
				})
				if(result.code == 200){
					if(stepTableFormData.length===1){
						this.$refs.tableRef.updateDataSourceByRowIndex(0,{
							bhCode: result.data,
						})
					}else{
						for(let i=0;i<stepTableFormData.length;i++){
							this.$refs.tableRef.updateDataSourceByRowIndex(i,{
								bhCode: result.data[i],
							})
						}
					}

					const params = {
						type: "fieldChanged",
						newRecord: null,
						resourceList: null,
					}
					setTimeout(() => {
						debugger
						EventBus.$emit('onModifyRecord', params,)
					}, 10);
				}
			}
		},
		//获取已填写的表单数据
		getFilledFormData(){
			return this.getFilledFormDataByRefs(["baseInfoRef", "storageConditionRef", "stepFormPackageRef", "tableRef","stepRef", "remarkRef"])
		},
		async getFormData() {
			let content = await this.validFormFields(["baseInfoRef", "storageConditionRef", "stepFormPackageRef","tableRef" ,"stepRef", "remarkRef"]);
			//生成resource
			let tmpResource = []

			let tableList = content.stepTableFormData
			if(tableList && tableList.length>0){
				for(let i=0;i<tableList.length;i++){
					//配置的试剂
					let item = tableList[i]
					tmpResource.push({
						mc: null,
						bh: item.bh+item.bhCode,
						ph: null,
						nd: item.hhwznd + content.headerSelectFields.hhwzndUnit,
						source: 'ELN配制',
						sxrq: null,
						ndz: item.hhwznd,
						nddw: content.headerSelectFields.hhwzndUnit,
						kc: item.sjjzxql+item.sjryxql,//todo 单位不一致-计算
						kcdw: content.headerSelectFields.sjryxqlUnit || content.headerSelectFields.sjjzxqlUnit,//todo 单位不一致-计算-按最小算
						syl: null,
						syldw:content.headerSelectFields.sjryxqlUnit || content.headerSelectFields.sjjzxqlUnit,//todo 单位不一致-计算-按最小算,
						yxzq:null,
						yxzqdw:null,
					})
				}
			}
			
			//使用的试剂
			this.resource=tmpResource
			return content;
		},
		async onSave() {
			const formData = await this.getFilledFormData();

			console.log(formData, "formData")
		},
		// 删除表格行
		deleteRow(rowIndex) {
			const tableRef = this.$refs['tableRef'];
			if (tableRef) {
				tableRef.deleteRow(rowIndex);
			}
		},
		

	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.mt-20 {
	margin-top: 20px;
}
</style>