<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2024-06-11 15:14:28
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="120px">
		<el-form-item label="设备名称" prop="equipmentName">
			<el-input
				v-model="dataForm.equipmentName"
				clearable
				placeholder="请输入设备名称" />
		</el-form-item>
		<el-form-item label="设备编码" prop="equipmentCode">
			<el-input
				v-model="dataForm.equipmentCode"
				clearable
				placeholder="请输入设备编码" />
		</el-form-item>
		<el-form-item label="设备类型" prop="typeId">
			<el-select
				v-model="dataForm.typeId"
				clearable
				@change="setInfo"
				placeholder="请选择设备类型">
				<el-option
					v-for="item in urlOptions.optionArr.arr0"
					:key="item.id"
					:label="item.typeName"
					:value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="设备数量" prop="equipmentNumber">
			<el-input-number
				v-model="dataForm.equipmentNumber"
				:min="0"
				placeholder="请输入设备数量" />
		</el-form-item>
		<el-form-item label="备注" prop="remark">
			<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
		</el-form-item>
	</el-form>
</template>

<script>
import basicAdd from '../mixins/basic-add';
import {
	createEquipment,
	updateEquipment,
	getEquipment,
} from '@/api/oth/equipmentList';
import { getEquipmentTypePage } from '@/api/oth/equipmentType';

export default {
	mixins: [basicAdd],
	data() {
		return {
			urlOptions: {
				createURL: createEquipment,
				updateURL: updateEquipment,
				infoURL: getEquipment,
				getOption: true,
				optionArrUrl: [getEquipmentTypePage],
			},
			dataForm: {
				id: undefined,
				equipmentName: undefined,
				equipmentCode: undefined,
				typeId: undefined,
				equipmentNumber: undefined,
				remark: undefined,
				typeCode: undefined,
				typeName: undefined,
			},
			dataRule: {
				equipmentName: [
					{ required: true, message: '设备名称不能为空', trigger: 'blur' },
				],
				equipmentCode: [
					{ required: true, message: '设备编码不能为空', trigger: 'blur' },
				],
				typeId: [
					{ required: true, message: '设备类型不能为空', trigger: 'change' },
				],
				equipmentNumber: [
					{ required: true, message: '设备数量不能为空', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		setInfo(id) {
			const info = this.urlOptions.optionArr.arr0.find(
				(item) => item.id === id
			);
			this.dataForm.typeCode = info.typeCode;
			this.dataForm.typeName = info.typeName;
		},
	},
};
</script>
