<!-- 试验物质配制计划表 -->
<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="baseInfoRef" :formConfig="baseInfoFormConfig"
						:formData="formData" />
					<LineLabel label="计划信息" />
					<div class="template-form-item">
						<BaseInfoFormPcakge  ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur"
							:formData="formData" />
						<CustomTable @blur="onHandleTableBlur" :showHeaderSelect="fillType === 'actFill'" :showOperation="fillType === 'actFill'" ref="stepTableRef" :columns="stepColumns"
							:formData="formData" >
							<template slot="operation" slot-scope="{ row, rowIndex}">
								<TableOpertaion :fillType="fillType" :row="row" :rowIndex="rowIndex" @deleteRow="deleteRow"></TableOpertaion>
							</template>
						</CustomTable>
						<div class="add-row">
							<el-button type="primary" plain @click="addRow">添加行</el-button>
						</div>
					</div>
					<BaseInfoFormPcakge label="特别说明" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />

				</div>
			</div>
			<button @click="onSave">保存</button>
		</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 TableOpertaion from "@/components/Template/operation/TableOpertaion.vue"

export default {
	name: "SYWZPZJHB",
	components: { BaseInfoFormPcakge, LineLabel, CustomTable, TableOpertaion },		
	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: "请输入特别说明",
							maxlength: 1000,
							rows: 5
						}
					}
				}
			]
		},
		// 试验基本信息表单配置
		baseInfoFormConfig() {
			return [
				{
					type: "cardItem",
					config: {
						studyMc: {
							label: "试验名称",
							type: "input",
							disabled: true,
						},
						studySn: {
							label: "试验编号",
							type: "input",
							disabled: true,
						},

					}
				},
			]
		},
		// 操作步骤表单配置
		stepFormConfig() {
			return [
				{
					type: "step",
					config: {
						drawTime: {
							label: "领取时间",
							type: "dateTime",
							fillType: "actFill",
						},
						analyzeTime: {
							label: "分析时间",
							type: "dateTime",
							fillType: "actFill",
						},
						testSubstance: {
							label: "试验物质",
							type: "input",
							fillType: "actFill",
						},
						configFrequency: {
							label: "配置频率",
							type: "input",
							fillType: "actFill",
						},
					}
				}
			]
		},
		// 步骤表格列配置
		stepColumns() {
			return [
				{
					label: "给药剂量或组别", 
					prop: "startSolutionCode",
					width: 280,
					bodyType: "input",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
				{
					label: "配制浓度", 
					prop: "preparationConcentration",
					width: 280,
					headerSelectKey: "preparationConcentrationUnit",
					fillType: "actFill",
					headerOptions: this.$store.state.template.volumeOptions,
					defaultValue: "mg",
					bodyType: "inputNumber",
					bodyFillType: "actFill",
					bodyMaxlength: 10,
				},
				{
					label: "配制体积", 
					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() {
console.log("mounted")
	},
	methods: {
		
		async getFormData() {
			const baseData = await this.$refs.baseInfoRef.getFormData();
			const stepFormData = await this.$refs.stepFormPackageRef.getFormData();
			const stepTableFormData = await this.$refs.stepTableRef.getFormData();
			const remarkData = await this.$refs.remarkRef.getFormData();
			if(!stepTableFormData.stepTableFormData.length){
				this.$message.error("请添加计划信息");
				return;
			}
			return {
				...baseData,
				...stepFormData,
				...remarkData,
				...stepTableFormData
			}
		},
		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;
}
.add-row{
	display: flex;
	justify-content: center;
	padding: 20px 0;
}
</style>