<template>
	<el-container class="mainView">
		<el-scrollbar style="width: 100%">
			<el-main>
				<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_id" @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-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截止时间" style="width: 100%"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</div>
					<div class="boxMain cardItem">
						<div class="title">流程进度</div>
						<div class="boxCom cardBody">
							<el-steps class="orderSteps" :active="form.process_num" align-center>
								<el-step :status="item.status" v-for="(item,index) in form.process_engine" :key="index" :title="item.description"  />
							</el-steps>
						</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.repair_order_no" type="text" 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 boxMainNoBorder">
						<div class="title titleFlex">
							<span class="name">维保部件信息</span>
							<el-button type="primary" plain :size="size" icon="el-icon-Plus" @click="addOrder">添加部件信息</el-button>
						</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" :label="true">是</el-radio>
											<el-radio :value="false" :label="false">否</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<sc-table ref="table" :data="form.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
								<sc-table-column prop="component_serial_no" label="部件SN/Sp" :show-overflow-tooltip="true" width="160"></sc-table-column>
								<sc-table-column prop="component_manufacturer" label="部件厂商" :show-overflow-tooltip="true" width="130"></sc-table-column>
								<sc-table-column prop="component_model" label="部件型号" :show-overflow-tooltip="true" width="160"></sc-table-column>
								<sc-table-column prop="component_pn" label="部件PN/Sp" :show-overflow-tooltip="true" width="150"></sc-table-column>
								<sc-table-column prop="bd_backup_count" label="甚于BD数" :show-overflow-tooltip="true" width="120"></sc-table-column>
								<sc-table-column label="操作" fixed="right" width="120">
									<template #default="scope">
										<el-button link type="danger" :size="size" @click="deleteOrder(scope.row,scope.$index)">删除</el-button>
									</template>
								</sc-table-column>
							</sc-table>
						</div>
					</div>
					<div class="btnBox">
						<el-button type="primary" :size="size" @click="save" :loading="isSave">确认保存</el-button>
					</div>
				</el-form>
			</el-main>
		</el-scrollbar>
	</el-container>

	<info-save-dialog ref="saveDialog" v-if="dialog.save" @success="handleSaveSuccess" @closed="dialog.save=false"></info-save-dialog>
</template>

<script>
import infoSaveDialog from "@/views/order/components/infoSave";
export default {
	name: "order-edit",
	components:{
		infoSaveDialog
	},
	data(){
		return{
			size:"small",
			isSave:false,
			setMap:{
				maintenance_level:[],
				fault_type:[],
				customer:[],
			},
			params:{
				order_id:Number(this.$route.query.id)
			},
			form:{
				id:"",
				customer_id:"",  // 客户
				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:false,
				component_info:[],
				process_engine:[]
			},
			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数不能为空"}],
			},

			dialog: {
				save: false,
			},
		}
	},
	mounted() {
		this.getData();
		this.getCustomerSelect('customer');
		this.getSelect('fault_type',1);
		this.getSelect('maintenance_level',2);
	},
	methods:{
		async getData() {
			this.loading = true;
			const res = await this.$API.orders.order.maintenance.info.post(this.params);
			if(res.code == 200){
				for(let i in this.form){
					this.form[i] = res.data[i]===0?'':res.data[i];
				}

				if(res.data.process_engine){
					let obj = this.processList(res.data.process_engine);
					res.data.process_engine = obj.processedList;
					res.data.process_num = obj.num;
				}
				this.form.is_verify_erp_inventory = res.data.is_verify_erp_inventory?res.data.is_verify_erp_inventory:false;
				this.form.process_engine = res.data.process_engine;
				this.form.component_info = res.data.component_info;
				if(res.data.component_info.length==0){
					this.form.component_info = [
						{
							component_serial_no:res.data.component_serial_no,
							component_manufacturer:res.data.component_manufacturer,
							component_model:res.data.component_model,
							component_pn:res.data.component_pn,
							bd_backup_count:res.data.bd_backup_count
						}
					]
				}
			}
			this.loading = false;
		},
		processList(list) {
			let obj = {
				num:0,
				processedList:this.$TOOL.objCopy(list)
			}
			let foundNodeTrue = false;
			for (let i = 0; i < obj.processedList.length; i++) {
				if (obj.processedList[i].node === true) {
					foundNodeTrue = true;
					obj.processedList[i].status = 'finish';
					obj.num = i;
				} else if (!foundNodeTrue) {
					obj.processedList[i].status = 'success';
				}
				if (foundNodeTrue && obj.processedList[i].node !== true) break;
			}
			return obj;
		},

		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.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		handleSaveSuccess(data,mode){
			if(mode == 'add'){
				this.form.component_info.push(data);
			}
			if(mode == 'edit'){
				if(this.info.component_info.length>0){
					this.info.component_info.forEach((item,index)=>{
						if(index == data.num || (data.id && item.id == data.id)){
							item.num = index;
							item.component_manufacturer = data.component_manufacturer;
							item.component_model = data.component_model;
							item.component_pn = data.component_pn;
							item.component_serial_no = data.component_serial_no;
						}
					})
				}else{
					this.info.component_info.push(data);
				}
			}
		},
		deleteOrder(row,num){
			this.form.component_info.forEach((em,index)=>{
				if(index === num){
					this.form.component_info.splice(index,1);
				}
			});
		},

		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">
.mainView{
	background: var(--el-color-white);
}
.boxMain{
	border-bottom: 1px solid #f2f2f2;
	padding: 10px 0 5px 0;
	.title{
		margin-bottom: 10px;
	}
	.titleFlex{
		display: flex;align-items: stretch;justify-content: space-between;
	}
	.boxCom{
		.el-row{
			.el-col{
				padding: 0 10px;
				::v-deep .input{
					width: 100%;
				}
			}
		}
	}
}
.boxMainNoBorder{
	border-bottom: 0;
}
.btnBox{
	margin-top: 15px;
	text-align: left;
	padding: 0 10px;
}
</style>
