<!-- 细胞CIC配制记录表 -->
<template>
	<div>
		<div class="detail-container">
			<div class="detail-title"><img src="@/assets/images/detail-title.png">{{ formData.bdmc }}<img
					src="@/assets/images/detail-title.png" /></div>
			<div class="detail-content">
				<div class="content">
					<BaseInfoFormPackage 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="yqColumns" :dataSource="yqResource" />

					<!-- 操作步骤 -->
					<LineLabel label="template.common.operationSteps" />
					<div class="template-form-item">
						<div>第1步：准备分析批：</div>
						<CustomTable
							:ref="`tableFirstRef`"
							:columns="tableFirstColumns"
							:formData="formData"
							:prefixKey = "`tableFirst`"
							fieldItemLabel = "template.common.operationSteps"
							:showOperation="fillType === 'preFill'"
						>
							<template slot="operation" slot-scope="{ row, rowIndex, columns }">
								<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns"  @deleteRow="deleteRow(rowIndex,'firstTable')" ></TableOpertaionDelete>
							</template>
						</CustomTable>

						<div class="mb10">
							<div>第2步：</div>
							<StepFormPackage ref = "stepFormPackageSecondRef" prefixKey="xb_czdsb"  :form-config="stepSecondConfig" :formData = "formData" />
						</div>

						<div class="mb10">
							<div>第3步：</div>
							<StepFormPackage ref = "stepFormPackageThirdRef" prefixKey="xb_czdtb"  :form-config="stepThirdConfig" :formData = "formData" />
						</div>

						<div class="mb10">
							<div>第4步：</div>
							<StepFormPackage ref = "stepFormPackageFourthRef" prefixKey="xb_czdfb"  :form-config="stepFourthConfig" :formData = "formData" />
						</div>

						<div>
							<div>第5步：</div>
							<StepFormPackage ref = "stepFormPackageFivthRef" prefixKey="xb_czdwb"  :form-config="stepFivthConfig" :formData = "formData" />
							<CustomTable
								:ref="`tableSecondRef`"
								:columns="tableSecondColumns"
								:formData="{stepTableFormData:formData.stepTableFormData_1,headerSelectFields:{}}"
								:prefixKey = "`tableSecond`"
								fieldItemLabel = "template.common.operationSteps"
								:showOperation="fillType === 'preFill'"
							>
								<template slot="operation" slot-scope="{ row, rowIndex, columns }">
									<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns"  @deleteRow="deleteRow(rowIndex,'secondTable')" ></TableOpertaionDelete>
								</template>
							</CustomTable>						
						</div>

						<div class="mb10">
							<div>第6步：</div>
							<StepFormPackage ref = "stepFormPackageSixthRef" prefixKey="xb_czdlb"  :form-config="stepSixthConfig" :formData = "formData" />
						</div>

					</div>
					
					<LineLabel label="template.xb.xb001.qtbz" />
					<Step ref="stepRef" :formData="formData.stepData"></Step>

					<BaseInfoFormPackage fieldItemLabel="template.xb.xb001.fj" label="template.xb.xb001.fj"
						ref="fjRef" :formConfig="getFjFormConfig" :formData="formData" />
					<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
						ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
				</div>
			</div>
		</div>
		<!-- <button @click="onSave">保存</button> -->
	</div>
</template>

<script>
import BaseInfoFormPackage from "@/components/Template/BaseInfoFormPackage";
import LineLabel from "@/components/Template/LineLabel";
import TableList from "@/components/Template/Table";
import Step from "@/components/Template/Step";
import templateMixin from "../../mixins/templateMixin";
import stepMixins from '@/components/Template/mixins/stepMixins.js';
import CustomTable from '@/components/Template/CustomTable.vue';
import { EventBus } from "@/utils/eventBus";
import { uniqeResource } from "@/utils/calUnitTools";
import { debounce } from 'lodash-es'
import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue"
import StepFormPackage from "@/components/Template/StepFormPackage.vue"
import { getStepSecond, getStepThird, getStepFourth, getStepFivth, getStepSixth} from "../../formConfig/xb/xb001.js";

export default {
	name: "XB001",
	components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable, TableOpertaionDelete, StepFormPackage },
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	computed: {
		stepSecondConfig() {
			return getStepSecond(this);
		},
		stepThirdConfig() {
			return getStepThird(this);
		},
		stepFourthConfig() {
			return getStepFourth(this);
		},
		stepFivthConfig() {
			return getStepFivth(this);
		},
		stepSixthConfig() {
			return getStepSixth(this);
		},
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						jz: {
							label: 'template.sp.sp008.xzjz',
							type: "input",
							fillType: "preFill",
							subType: "sj",
							subKey: "subJz",
							subFillType: "actFill",
							maxlength: 20,
							labelWidth: 80,
						},
					}
				}
			]
		},
		// 备注表单配置
		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,
						},
					}
				},
				{
					type: "cellItem",
					label: 'template.xb.xb001.jcsj',
					config: {
						startDate: {
							label: 'template.common.startTime',
							type: "input",
						},
						endDate: {
							label: 'template.common.endTime',
							type: "input",
						},
					}
				}
			]
		},
		// 附件表单配置
		getFjFormConfig() {
			return [
				{
					type: "attachment",
					config: {
						attTitle: {
							label: 'template.xb.xb001.fj',
							type: "attachment",
							fillType: "actFill",
						},
					}
				}
			]
		},
		// 操作步骤第一步表格配置
		tableFirstColumns() {
			return [{
				label: 'template.xb.xb001.fpc',
				prop: 'fpc',
				bodyType: 'input',
				bodyFillType: 'preFill',
				width: 280,
				bodyMaxlength: 50,
			},{
				label: 'template.xb.xb001.zb',
				prop: 'yjzbs',
				bodyType: 'select',
				bodyOptions: this.getDictOptions('business_xbzb'),
				bodyFillType: 'preFill',
				width: 280,
				bodyMaxlength: 10,
				otherCode: "preOther1",
			},{
				label: 'template.xb.xb001.lx',
				prop: 'sjzbs',
				bodyType: 'select',
				bodyOptions: this.getDictOptions('business_xblx'),
				bodyFillType: 'preFill',
				width: 280,
				bodyMaxlength: 10,
				otherCode: "preOther2",
			}]
		},
		// 操作步骤第五步表格配置
		tableSecondColumns() {
			return [
				{
					label: 'template.xb.xb001.fpc',
					prop: 'fpc',
					bodyType: 'input',
					bodyFillType: 'preFill',
					width: 280,
					bodyMaxlength: 50,
				},
				{
					label: 'template.common.startTime',
					prop: 'startTime',
					bodyType: 'input',
					bodyFillType: 'actFill',
					width: 280,
					bodyMaxlength: 50,
				},
				{
					label: 'template.common.endTime',
					prop: 'endTime',
					bodyType: 'input',
					bodyFillType: 'actFill',
					width: 280,
					bodyMaxlength: 50,
				},
				{
					label: 'template.xb.xb001.fysc',
					prop: 'fysc',
					bodyType: 'input',
					bodyFillType: 'actFill',
					width: 280,
					bodyMaxlength: 50,
				},
		    ]
		},
	},
	data() {
		return {
			formData: {},
		};
	},
	mounted() {
	},
	methods: {
		//获取已填写的表单数据
		getFilledFormData() {
			return this.getFilledFormDataByRefs(
				[
				 "baseInfoRef",  "stepRef", "remarkRef", 
				 "fjRef", "tableFirstRef", "stepFormPackageSecondRef", 
				 "stepFormPackageThirdRef", "stepFormPackageFourthRef", 
				 "stepFormPackageFivthRef", "tableSecondRef", "stepFormPackageSixthRef"
				]
			)
		},
		//获取填写完成的表单数据
		async getFormData() {
			let content = await this.validFormFields([
				"baseInfoRef",  "stepRef", "remarkRef", 
				"fjRef", "tableFirstRef", "stepFormPackageSecondRef", 
				"stepFormPackageThirdRef", "stepFormPackageFourthRef", 
				"stepFormPackageFivthRef", "tableSecondRef", "stepFormPackageSixthRef"
			]);
			return content;
		},
		getResource() {
			//使用的试剂、仪器
			const stepResource = this.$refs.stepRef.getStepResource()
			this.resourceTmp = stepResource.sjResource || []
			this.yqResourceTmp = stepResource.yqResource || []
			return this.resourceTmp;
		},
		//保存
		async onSave() {
			let content = await this.$refs.stepRef.getFormData();
			console.log(content);
		},
		// 删除表格行
		deleteRow(rowIndex,type) {
			const tableRef1 = this.$refs['tableFirstRef'];
			const tableRef2 = this.$refs['tableSecondRef'];
			if (type == 'firstTable' && tableRef1) {
				tableRef1.deleteRow(rowIndex);
			}
			if (type == 'secondTable' && tableRef2) {
				tableRef2.deleteRow(rowIndex);
			}
		},
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
</style>