<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-scrollbar max-height="380">

			<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="140px">
	<!--			<el-form-item label="区域" prop="region">-->
	<!--				<el-select v-model="form.region" placeholder="请选择区域" filterable clearable style="width: 100%;">-->
	<!--					<el-option v-for="(item,index) in setMap.roomList" :key="index" :label="item.room_name" :value="item.room_code"></el-option>-->
	<!--				</el-select>-->
	<!--			</el-form-item>-->
				<el-form-item label="产品编码" prop="part_sn">
					<el-input v-model="form.part_sn" placeholder="请输入产品编码" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="部件类别" prop="part_category">
					<el-input v-model="form.part_category" placeholder="请输入部件类别" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="部件MPN" prop="part_mpn">
					<el-input v-model="form.part_mpn" placeholder="请输入部件MPN" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="在保备件出货总数" prop="total_protected_parts">
					<el-input v-model="form.total_protected_parts" placeholder="请输入出货总数" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="在保备件水位" prop="protected_spares_water_level">
					<el-input v-model="form.protected_spares_water_level" placeholder="请输入备件水位" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="在保备件数量" prop="protected_spares_quantity">
					<el-input v-model="form.protected_spares_quantity" placeholder="请输入备件数量" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="预计六个月用量" prop="estimated_dosage">
					<el-input v-model="form.estimated_dosage" placeholder="请输入预计六个月用量" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="时长" prop="duration">
					<el-input v-model="form.duration" placeholder="请输入时长" clearable type="text"></el-input>
				</el-form-item>
				<el-form-item label="治理计划" prop="governance_plan">
					<el-input v-model="form.governance_plan" placeholder="请输入治理计划" clearable type="textarea" :rows="3"></el-input>
				</el-form-item>
				<el-form-item label="风险描述" prop="risk_description">
					<el-input v-model="form.risk_description" placeholder="请输入风险描述" clearable type="textarea" :rows="3"></el-input>
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增预警',
				edit: '编辑预警',
				show: '查看详情'
			},
			visible: false,
			isSave: false,

			setMap:{
				roomList:[]
			},
			//表单数据
			form: {
				id:"",
				region: "",
				part_category: "",
				part_mpn: "",
				total_protected_parts: "",
				protected_spares_water_level: "",
				protected_spares_quantity: "",
				estimated_dosage:"",
				governance_plan: "",
				risk_description: "",
				duration:6
			},
			//验证规则
			rules: {
				region:[
					{required:true,message:"区域不能为空"}
				],
				part_sn:[
					{required:true,message:"产品编码不能为空"}
				],
				part_category:[
					{required:true,message:"部件类别不能为空"}
				],
				part_mpn:[
					{required:true,message:"部件MPN不能为空"}
				],
				total_protected_parts:[
					{required:true,message:"在保备件出货总数不能为空"}
				],
				protected_spares_water_level:[
					{required:true,message:"在保备件水位不能为空"}
				],
				protected_spares_quantity:[
					{required:true,message:"在保备件数量不能为空"}
				]
			},

			roomParams:{
				field:"room_code",
				room_code:{
					operator:"link",
					value:""
				}
			}
		}
	},
	mounted() {
		// this.roomList()
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		//加载树数据
		async roomList(){
			const res = await this.$API.early.earlyWarn.room.post(this.roomParams);
			if(res.code == 200){
				this.setMap.roomList = res.data;
			}
		},
		//表单提交方法
		submit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					const res = await this.$API.early.earlyWarn.add.post(this.form);
					this.isSave = false;
					if(res.code == 200){
						this.$emit('success', this.form, this.mode);
						this.visible = false;
						this.$message.success("操作成功");
					}
				}
			})
		},
		//表单注入数据
		async setData(data) {
			Object.assign(this.form, data);
		}
	}
}
</script>

<style>
</style>
