<template>
	<el-container>
		<el-main>
			<el-scrollbar>
				<el-form ref="form" :size="size" :rules="rules" label-width="95px" :model="form">
					<div class="boxMain">
						<div class="title">工作时间</div>
						<div class="boxCom">
							<el-row>
								<el-col :span="8" :lg="6">
									<el-form-item label="报修客户" prop="customer">
										<el-select class="input" v-model="form.customer" @visible-change="getCustomerSelect('customer')" placeholder="请选择报修客户">
											<el-option v-for="(item,index) in setMap['customer']" :key="index" :value="item.id" :label="item.customer_name"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8" :lg="6">
									<el-form-item label="标准机型" prop="standard_model">
										<el-input class="input" type="text" v-model="form.standard_model" placeholder="请输入标准机型"></el-input>
									</el-form-item>
								</el-col>
								<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-row>
							<el-row>
								<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="6">
									<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="25" :lg="24">
									<el-form-item label="验证ERP库存" prop="is_verify_erp_inventory">
										<el-radio-group v-model="form.is_verify_erp_inventory">
											<el-radio :value="true">是</el-radio>
											<el-radio :value="false">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="orderView" v-if="!form.is_verify_erp_inventory">
								<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 v-else>
								<div v-for="(item,index) in form.component_info" :key="index">
									<el-row>
										<el-col :span="8" :lg="6">
											<el-form-item label="部件SN/Sp" :prop="'form.component_info.'+index+'.component_serial_no'">
												<el-input class="input" v-model="item.component_serial_no" placeholder="部件SN/Se"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8" :lg="6">
											<el-form-item label="部件厂商" :prop="'form.component_info.'+index+'.component_manufacturer'">
												<el-input class="input" v-model="item.component_manufacturer" type="text" placeholder="请输入部件厂商"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8" :lg="6">
											<el-form-item label="部件型号" :prop="'form.component_info.'+index+'.component_model'">
												<el-input class="input" v-model="item.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="'form.component_info.'+index+'.component_pn'">
												<el-input class="input" v-model="item.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="'form.component_info.'+index+'.sla_expiration'">
												<el-date-picker class="input" v-model="item.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="'form.component_info.'+index+'.bd_backup_count'">
												<el-input class="input" v-model="item.bd_backup_count" type="text" placeholder="请输入剩余BD数"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</div>
							</div>
							<el-row v-if="form.is_verify_erp_inventory">
								<div style="padding-left: 105px">
									<el-button type="primary" size="small" icon="el-icon-Plus" @click="addOrder"></el-button>
									<el-button type="danger" size="small" icon="el-icon-Minus" @click="deleteOrder" v-if="form.component_info.length>1"></el-button>
								</div>
							</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:{
				customer:"",  // 客户
				standard_model:"", // 标准机型
				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-铜牌；常量维护项
				is_verify_erp_inventory:true,
				component_info:[
					{
						component_serial_no:"",
						component_manufacturer:"",
						component_model:"",
						component_pn:""
					}
				]
			},
			rules:{
				fault_description:[{required:true,trigger:"blur",message:"故障描述不能为空"}],
				fault_type:[{required:true,trigger:"change",message:"故障类型不能为空"}],
				city:[{required:true,trigger:"blur",message:"机房城市不能为空"}],
				device_sn:[{required:true,trigger:"blur",message:"整机SN/Se不能为空"}],
				device_manufacturer:[{required:true,trigger:"blur",message:"整机厂商不能为空"}],
				device_model:[{required:true,trigger:"blur",message:"整机型号不能为空"}],
				sla_expiration:[{required:true,trigger:"change",message:"SLA截止时间不能为空"}],
				bd_backup_count:[{required:true,trigger:"blur",message:"剩余BD数不能为空"}],
			},
		}
	},
	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;
			}
		},
		async getCustomerSelect(name){
			let params = {
				field:"customer_name",
				id:{
					operator:"in",
					value:""
				}
			}
			const res = await this.$API.setup.customer.select.post(params);
			if(res.code == 200){
				this.setMap[name] = res.data;
			}
		},
		addOrder(){
			this.form.component_info.push({
				component_serial_no:"",
				component_manufacturer:"",
				component_model:"",
				component_pn:""
			})
		},
		deleteOrder(){
			this.form.component_info.pop();
		},
		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>
