<template>
	<el-container>
		<el-main>
			<el-scrollbar>
				<el-form ref="form" :size="size" label-width="90px" :model="form">
					<div class="boxMain">
						<div class="title">工作时间</div>
						<div class="boxCom">
							<el-row>
<!--								<el-col :span="8" :lg="6">-->
<!--									<el-form-item label="创建时间">-->
<!--										<el-date-picker class="input" type="date" value-format="YYYY-MM-DD" placeholder="请选择创建时间"></el-date-picker>-->
<!--									</el-form-item>-->
<!--								</el-col>-->
								<el-col :span="8" :lg="6">
									<el-form-item label="PE确认时间" prop="pe_confirmation_time">
										<el-date-picker class="input" v-model="form.pe_confirmation_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择PE确认时间"></el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="过保时间" prop="warranty_end_date">
										<el-date-picker class="input" v-model="form.warranty_end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择过保时间"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="boxMain">
						<div class="title">维保单号</div>
						<div class="boxCom">
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="维修单号" prop="repair_order_no">
										<el-input class="input" type="text" v-model="form.repair_order_no" disabled placeholder="请输入维修单号"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="boxMain">
						<div class="title">维保工单信息</div>
						<div class="boxCom">
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="维修单等级" prop="maintenance_grade">
										<el-input class="input" v-model="form.maintenance_grade" type="text" placeholder="请输入维修等级"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="维修分类" prop="maintenance_level">
										<el-select class="input" v-model="form.maintenance_level" @visible-change="getSelect('maintenance_level',2)" placeholder="请选择维修分类">
											<el-option v-for="(item,index) in setMap['maintenance_level']" :key="index" :value="item.id" :label="item.item_name"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="12">
									<el-form-item label="故障内容" prop="fault_description">
										<el-input class="input" v-model="form.fault_description" type="text" placeholder="请输入维修单号"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="故障类型" prop="fault_type">
										<el-select class="input" v-model="form.fault_type" @visible-change="getSelect('fault_type',1)" placeholder="请选择故障类型">
											<el-option v-for="(item,index) in setMap['fault_type']" :key="index" :value="item.id" :label="item.item_name"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="维保等级" prop="maintenance_plan">
										<el-input class="input" v-model="form.maintenance_plan" placeholder="维保等级">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="是否关机" prop="requires_shutdown">
										<el-select class="input" v-model="form.requires_shutdown" placeholder="请选择是否关机">
											<el-option label="是" :value="1"></el-option>
											<el-option label="否" :value="0"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="机房城市" prop="city">
										<el-input class="input" v-model="form.city" placeholder="机房城市">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="园区" prop="park_name">
										<el-input class="input" v-model="form.park_name" placeholder="园区">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="机房/IDC" prop="data_center_name">
										<el-input class="input" v-model="form.data_center_name" placeholder="机房/IDC">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="机架位" prop="rack_position">
										<el-input class="input" v-model="form.rack_position" type="text" placeholder="请输入机架位"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="整机SN/Se" prop="device_sn">
										<el-input class="input" v-model="form.device_sn" placeholder="整机SN/Se">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="整体厂商" prop="device_manufacturer">
										<el-input class="input" v-model="form.device_manufacturer" type="text" placeholder="请输入整体厂商"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="整体型号" prop="device_model">
										<el-input class="input" v-model="form.device_model" type="text" placeholder="请输入整体型号"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="boxMain">
						<div class="title">维保工单信息</div>
						<div class="boxCom">
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="部件SN/Sp" prop="component_serial_no">
										<el-input class="input" v-model="form.component_serial_no" placeholder="部件SN/Se">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="部件厂商" prop="component_manufacturer">
										<el-input class="input" v-model="form.component_manufacturer" type="text" placeholder="请输入部件厂商"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="部件型号" prop="component_model">
										<el-input class="input" v-model="form.component_model" type="text" placeholder="请输入部件型号"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="部件PN/Sp" prop="component_pn">
										<el-input class="input" v-model="form.component_pn" type="text" placeholder="请输入部件SN/Sp"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="SLA截止时间" prop="sla_expiration">
										<el-date-picker class="input" v-model="form.sla_expiration" type="date" value-format="YYYY-MM-DD" placeholder="请选择SLA截止时间"></el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="剩余BD数" prop="bd_backup_count">
										<el-input class="input" v-model="form.bd_backup_count" type="text" placeholder="请输入剩余BD数"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="btnBox">
						<el-button type="primary" :size="size" @click="save" :loading="isSave">确认保存</el-button>
					</div>
				</el-form>
			</el-scrollbar>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "create-order",
	data(){
		return{
			size:"small",
			isSave:false,
			setMap:{
				maintenance_level:[],
				fault_type:[],
			},
			form:{
				repair_order_no:"",
				maintenance_grade:"", // 维修等级
				maintenance_level: "", // 维修等级
				fault_type: "", // 故障类型
				fault_description: "", // 故障描述
				requires_shutdown: "", // 是否需要关机
				city: "", // 机房城市
				park_name: "", // 园区名称
				data_center_name: "", // 机房/IDC名称
				rack_position: "", // 机架位置
				device_sn: "", // 整机SN
				device_manufacturer: "", // 整机厂商
				device_model: "", // 整机型号
				component_serial_no: "", // 部件序列号
				component_manufacturer: "", // 部件厂商
				component_model: "", // 部件型号
				component_pn: "", // 部件零件PN号
				sla_expiration: "", // SLA到期时间
				bd_backup_count: "", // 剩余BD数
				pe_confirmation_time: "", // PE确认时间
				warranty_end_date: "", // 保修期结束
				maintenance_plan: '' // 维保等级：1-铜牌；常量维护项
			}
		}
	},
	mounted() {

	},
	methods:{
		async getSelect(name,num) {
			const res = await this.$API.orders.order.maintenance.optionList.post({const_type:num});
			if(res.code == 200){
				this.setMap[name] = res.data;
			}
		},
		save(){
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					const res = await this.$API.orders.order.maintenance.add.post(this.form);
					this.isSave = false;
					if(res.code == 200){
						this.$message.success("操作成功");
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.boxMain{
	border-bottom: 1px solid #f2f2f2;
	padding: 10px 0 5px 0;
	.title{
		margin-bottom: 10px;
	}
	.boxCom{
		.el-row{
			.el-col{
				padding: 0 10px;
				::v-deep .input{
					width: 100%;
				}
			}
		}
	}
}
.btnBox{
	margin-top: 15px;
	text-align: left;
	padding: 0 10px;
}
</style>
