<!-- 
    filename: dialogForm.vue
    author: liubin
    date: 2023-08-15 10:32:36
    description: 弹窗的表单组件
-->

<template>
	<el-form
		class="equipment-info-form"
		ref="form"
		:model="form"
		label-width="200px"
		label-position="top"
		v-loading="formLoading">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item
					label="设备名称"
					prop="name"
					:rules="[
						{ required: true, message: '设备名称不能为空', trigger: 'blur' },
					]">
					<el-input
						v-model="form.name"
						:disabled="disabled"
						placeholder="请输入设备名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="设备编码" prop="code" :rules="[]">
					<el-input
						v-model="form.code"
						:disabled="disabled"
						placeholder="请输入设备编码"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="8">
				<el-form-item label="英文名称" prop="enName" :rules="[]">
					<el-input
						v-model="form.enName"
						:disabled="disabled"
						placeholder="请输入英文名称"></el-input>
				</el-form-item>
			</el-col> -->
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="所在区域" prop="location">
					<el-input
						v-model="form.location"
						:disabled="disabled"
						placeholder="请输入所在区域"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="负责人" prop="responsiblePeopleId">
					<el-select
						v-model="form.responsiblePeopleId"
						:disabled="disabled"
						placeholder="请输入负责人">
						<el-option
							v-for="rp in rpList"
							:key="rp.id"
							:label="rp.name"
							:value="rp.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="8">
				<el-form-item label="缩写" prop="abbr" :rules="[]">
					<el-input
						v-model="form.abbr"
						:disabled="disabled"
						placeholder="请输入名称缩写"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item
					label="设备类型"
					prop="equipmentTypeId"
					:rules="[
						{ required: true, message: '设备类型不能为空', trigger: 'blur' },
					]">
					<el-select
						v-model="form.equipmentTypeId"
						:disabled="disabled"
						filterable
						placeholder="请选择设备类型">
						<el-option
							v-for="eqType in rpList"
							:key="eqType.id"
							:label="eqType.name"
							:value="eqType.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col> -->

			<!-- <el-col :span="8">
				<el-form-item
					label="预计生产时间(min/天)"
					prop="workTime"
					:rules="[
						{
							required: true,
							message: '预计生产时间不能为空',
							trigger: 'blur',
						},
						{
							type: 'number',
							message: '请输入正确的数字值',
							trigger: 'blur',
							transform: (val) => Number(val),
						},
					]">
					<el-input
						v-model="form.workTime"
						:disabled="disabled"
						placeholder="请输入预计生产时间"></el-input>
				</el-form-item>
			</el-col> -->
		</el-row>
		<el-row :gutter="20">
			<el-col v-if="isFireEquipment" :span="12">
				<el-form-item label="有效期至" prop="dueDate" :rules="[]">
					<el-date-picker
						v-model="form.dueDate"
						:disabled="disabled"
						type="datetime"
						placeholder="请选择生产日期"
						value-format="timestamp"></el-date-picker>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="8">
				<el-form-item label="生产日期" prop="productionTime" :rules="[]">
					<el-date-picker
						v-model="form.enterTime"
						:disabled="disabled"
						type="datetime"
						placeholder="请选择生产日期"
						value-format="timestamp"></el-date-picker>
				</el-form-item>
			</el-col> -->
			<!-- <el-col :span="8">
				<el-form-item label="进场日期" prop="enterTime" :rules="[]">
					<el-date-picker
						v-model="form.enterTime"
						:disabled="disabled"
						type="datetime"
						placeholder="请选择进场日期"
						value-format="timestamp"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item
					label="设备TT值"
					prop="tvalue"
					:rules="[
						{ required: true, message: '设备TT值不能为空', trigger: 'blur' },
						{
							type: 'number',
							message: '请输入正确的数字值',
							trigger: 'blur',
							transform: (val) => Number(val),
						},
					]">
					<el-input
						v-model="form.tvalue"
						:disabled="disabled"
						placeholder="请输入设备TT值"></el-input>
				</el-form-item>
			</el-col> -->
		</el-row>
		<el-row :gutter="20">
			<!-- <el-col :span="8">
				<el-form-item
					label="产品加工时间(s)"
					prop="processingTime"
					:rules="[
						{
							required: true,
							message: '产品加工时间不能为空',
							trigger: 'blur',
						},
						{
							type: 'number',
							message: '请输入正确的数字值',
							trigger: 'blur',
							transform: (val) => Number(val),
						},
					]">
					<el-input
						v-model="form.processingTime"
						:disabled="disabled"
						placeholder="请输入产品加工时间"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="制造商" prop="manufacturer" :rules="[]">
					<el-input
						v-model="form.manufacturer"
						:disabled="disabled"
						placeholder="请输入制造商"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="设备规格" prop="spec" :rules="[]">
					<el-input
						v-model="form.spec"
						:disabled="disabled"
						placeholder="请输入设备规格"></el-input>
				</el-form-item>
			</el-col> -->
		</el-row>
		<!-- <el-row :gutter="20">
			<el-col>
				<el-form-item label="功能描述" prop="description" :rules="[]">
					<el-input
						type="textarea"
						:disabled="disabled"
						v-model="form.description"
						placeholder="请填写功能描述"></el-input>
				</el-form-item>
			</el-col>
		</el-row> -->
		<!-- <el-row :gutter="20">
			<el-col>
				<el-form-item label="备注" prop="remark" :rules="[]">
					<el-input
						v-model="form.remark"
						:disabled="disabled"
						placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-col>
		</el-row> -->
		<el-row :gutter="20">
			<!-- 上传资料  -->
			<el-col>
				<el-form-item label="上传图片" prop="assets" :rules="[]">
					<AssetsUpload v-model="form.assets" :disabled="disabled" />
				</el-form-item>
			</el-col>
		</el-row>
		<!-- 上传图片  -->
		<!-- <el-row :gutter="20">
			<el-col>
				<el-form-item label="上传图片" prop="pics" :rules="[]">
					<AssetsUpload
						:is-pic-mode="true"
						v-model="form.pics"
						:disabled="disabled" />
				</el-form-item>
			</el-col>
		</el-row> -->
	</el-form>
</template>

<script>
import AssetsUpload from './AssetsUpload.vue';

export default {
	name: 'EquipmentInfoForm',

	model: {
		prop: 'dataForm',
		event: 'update',
	},

	emits: ['update'],

	components: { AssetsUpload },

	props: {
		dataForm: {
			type: Object,
			default: () => ({}),
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		syncFilelist: {
			type: Number,
			default: null,
			required: false,
		},
		isFireEquipment: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			formLoading: false,
			form: {
				name: '',
				code: '',
				enName: '',
				abbr: '',
				equipmentTypeId: '',
				remark: '',
				productionTime: '',
				workTime: '',
				enterTime: '',
				tvalue: '',
				processingTime: '',
				manufacturer: '',
				spec: '',
				description: '',
				assets: [],
				pics: [],
				dueDate: ''
			},
			rpList: [],
			dataLoaded: false,
		};
	},

	watch: {
		dataForm: {
			handler(val) {
				// debugger;
				this.form = JSON.parse(JSON.stringify(val));
				this.form.assets =
					this.form.files?.filter((item) => item.fileType == '2') || [];
				this.form.pics =
					this.form.files?.filter((item) => item.fileType == '1') || [];
				delete this.form.files;
			},
			immediate: true,
			deep: true,
		},
		syncFilelist: {
			handler(val) {
				if (val != null) {
					this.updateForm();
				}
			},
			immediate: true,
		},
	},

	mounted() {
		this.getRpList();
	},

	methods: {
		updateForm() {
			this.form.files = [...this.form.assets, ...this.form.pics];
			delete this.form.assets;
			delete this.form.pics;
			this.$emit('update', this.form);
		},

		async getRpList() {
			this.formLoading = true;
			const { code, data } = await this.$axios(
				'/base/core-worker/listAll'
			);
			// debugger;
			if (code == 0) {
				this.rpList = data;
			}
			this.formLoading = false;
		},

		/** 模拟透传 ref  */
		validate(cb) {
			return this.$refs.form.validate(cb);
		},
		resetFields(args) {
			return this.$refs.form.resetFields(args);
		},
		// getCode
		async getCode(url) {
			const response = await this.$axios(url);
			return response.data;
		},
		// 上传成功的特殊处理
		beforeUpload() {},
		// 上传前的验证规则可通过 bind 属性传入
		handleUploadSuccess(response, file, fileList) {
			// 保存原始文件名
			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
			// 保存完整地址
			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
			this.$modal.msgSuccess('上传成功');
		},

		getFileName(fileUrl) {
			return fileUrl.split('/').pop();
		},
	},
};
</script>

<style scoped lang="scss">
.el-date-editor,
.el-select {
	width: 100%;
}
</style>
