<!-- 配体结合分析溶液配制记录表 -->
<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.yp.yp003.ybxx" />

					<CustomTable
						:ref="`tableRef`"
						:columns="tableColumns"
						:formData="formData"
						operationWidth = "80px"
						:prefixKey = "`table`"
						fieldItemLabel = "template.yp.yp003.ybxx"
						@clickButton="handleClickButton"
						@onCheckboxTagChange="onCheckboxTagChange"
						:showOperation="fillType === 'preFill'"
					>
						<template slot="operation" slot-scope="{ row, rowIndex, columns }">
							<TableOpertaionDelete  :row="row" :rowIndex="rowIndex" :columns="columns"  @deleteRow="deleteRow" ></TableOpertaionDelete>
						</template>
					</CustomTable>
					
					<LineLabel label="template.yp.yp003.fqxx" />
					<Step ref="stepRef" :formData="formData.stepData"></Step>
					<BaseInfoFormPackage fieldItemLabel="template.yp.yp003.fqyq" label="template.yp.yp003.fqyq"
						ref="fqyqRef" :formConfig="fqyqConig" :formData="formData" />
					<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
						ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
				</div>
			</div>
		</div>
		<!-- <button @click="onSave">保存</button> -->
		<ImportExcelDialog ref="ImportExcelDialog" @onLoadData="onLoadExcelData" :downloadArr="['动物编号']" @downloadExcelTemplate="downloadExcelTemplate" />
	</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 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 ImportExcelDialog from '../../dialog/ImportExcelDialog'

export default {
	name: "YP003",
	components: { ImportExcelDialog,BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable,TableOpertaionDelete },
	mixins: [templateMixin],
	props: {
		fillType: {
			type: String,
			default: 'preFill',
		},
	},
	computed: {
		// 分取要求	
		fqyqConig() {
			return [
				{
					type: "cellItem",
					config: {
						fqyq: {
							label: "template.yp.yp003.sfyfzyq",
							type: "fqyq",
							fillType: "actFill",
							span: 1,
						}
					}
				}
			]
		},
		// 备注表单配置
		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: "conditionItem",
					label: 'template.common.processCondition',
					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,
							compareTo: "pre",
							options: this.getDictOptions('business_pztj')
						}
					}
				},
				{
					type: "conditionItem",
					label: 'template.yp.yp003.yplx',
					config: {
						yplx: {
							label: 'template.yp.yp003.yplx',
							type: "select",
							fillType: "preFill",
							options: this.getDictOptions('business_yplx'),
							otherCode: "yplxOther",
						},
					}
				},
				{
					type: "cellItem",
					label: 'template.lba.lba002.czsj',
					config: {
						startDate: {
							label: 'template.common.startTime',
							type: "input",
						},
						endDate: {
							label: 'template.common.endTime',
							type: "input",
						},
					}
				}
			]
		},
		// 样本信息
		tableColumns() {
			return [{
				label: 'template.yp.yp003.cyd',
				prop: 'cyd',
				bodyType: 'input',
				bodyFillType: 'actFill',
				width: 100,
				bodyMaxlength: 50,
			},{
				label: 'template.yp.yp003.dwbh',
				prop: 'dwbh',
				bodyType: 'checkboxTag',
				bodyFillType: 'actFill',
				bodySubType:"button",
				bodySubFillType:"preFill",
				bodySubButtonName:"template.common.importTemplate",
				bodySubKey:"exportBtn",
				showBodySub:this.fillType === "preFill",
				width: 280,
			},{
				label: 'template.yp.yp003.ypsl',
				prop: 'ypsl',
				bodyType: 'input',
				bodyDisabled: true,
				bodyFillType: 'actFill',
				width: 80,
			}]
		},
	},
	data() {
		return {
			formData: {},
			currentRowIndex: -1,
		};
	},
	mounted() {
	},
	methods: {
		// 点击按钮
		handleClickButton(key,rowIndex,colIndex,e,data){
			if(key === "exportBtn"){
				this.currentRowIndex = rowIndex;
				this.$refs.ImportExcelDialog.show()
			}
		},
		//获取已填写的表单数据
		getFilledFormData() {
			return this.getFilledFormDataByRefs(["baseInfoRef",  "tableRef", "stepRef", "fqyqRef","remarkRef"])
		},
		//获取填写完成的表单数据
		async getFormData() {
			let content = await this.validFormFields(["baseInfoRef",  "tableRef", "stepRef", "fqyqRef","remarkRef"]);
			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) {
			const tableRef = this.$refs['tableRef'];
			if (tableRef) {
				tableRef.deleteRow(rowIndex);
			}
		},


		showImportExcelDialog() {
			this.$refs.ImportExcelDialog.show()
		},
		onLoadExcelData(excelData) {
			const data = excelData.splice(1);
			const tagData = data.map((item)=>{
				return {
					checked:undefined,
					tagValue:item[0],
				}
			})
			this.$refs.tableRef.updateDataSourceByRowIndex(this.currentRowIndex,{dwbh:tagData});
			this.$refs.tableRef.onErrorUpdate(this.currentRowIndex, 1, 'dwbh', false)
			this.$refs.ImportExcelDialog.cancel()
			setTimeout(() => {
				this.justUpdateFilledFormData();
			}, 100);
		},
		downloadExcelTemplate(arr){
			this.exportExcel(arr)
		},
		onCheckboxTagChange(rowIndex,colIndex,data){
			const num = data.filter((item)=>item.checked).length;
			this.$refs.tableRef.updateDataSourceByRowIndex(rowIndex, {'ypsl':num})
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
</style>