<template>
	<el-container class="mainView">
		<el-main>
			<el-scrollbar style="width: 100%;">
				<div class="title">维修单信息</div>
				<div class="boxList boxListBorderBottom">
					<el-row :gutter="24" style="margin: 0">
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">维修单号</span>
							<div class="text">
								<el-input disabled v-model="info.repair_order_no" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">PE确认时间</span>
							<div class="text">
								<el-input disabled v-model="info.pe_confirmation_time" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">故障类型</span>
							<div class="text">
								<el-input disabled v-model="info.fault_type" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">故障描述</span>
							<div class="text">
								<el-input disabled v-model="info.fault_description" :size="size"></el-input>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="24" style="margin: 0">
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">保修期结束</span>
							<div class="text">
								<el-input disabled :size="size"></el-input>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="title">部件信息</div>
				<div class="boxList boxListBorderBottom">
					<el-row :gutter="24" style="margin: 0">
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">部件序列号</span>
							<div class="text">
								<el-input disabled v-model="info.component_serial_no" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">部件厂商</span>
							<div class="text">
								<el-input disabled v-model="info.component_manufacturer" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">部件型号</span>
							<div class="text">
								<el-input disabled v-model="info.component_model" :size="size"></el-input>
							</div>
						</el-col>
						<el-col :span="6" :lg="6" :md="8" :xs="24">
							<span class="name">零部件PN号</span>
							<div class="text">
								<el-input disabled v-model="info.component_pn" :size="size"></el-input>
							</div>
						</el-col>
					</el-row>
					<div v-for="(item,index) in params.repair_info" :key="index">
						<el-row style="margin: 0" v-if="index==0">
							<el-col :span="24" class="flexCol">
								<span class="name">维修动作</span>
								<span class="text">
									<el-radio-group v-model="item.repair_action" @change="repairAction" :size="size" :disabled="info.repair_order && info.repair_order.repair_status=== 4">
										<el-radio :value="1" :label="1">修复</el-radio>
										<el-radio :value="2" :label="2">更换</el-radio>
										<el-radio :value="3" :label="3">无需修复</el-radio>
									</el-radio-group>
								</span>
							</el-col>
						</el-row>
						<el-row :gutter="24" style="margin: 0" v-if="item.repair_action != 3 && index==0">
							<el-col :span="6" :lg="6" :md="8" :xs="24">
								<span class="name" :class="item.repair_action==2?'required':''">不良现象</span>
								<div class="text">
									<el-input :size="size" v-model="item.confirmed_defects" placeholder="不良现象"></el-input>
								</div>
							</el-col>

							<el-col :span="6" :lg="6" :md="8" :xs="24">
								<span class="name" :class="item.repair_action==1 || item.repair_action==2?'required':''">SLA不达标原因</span>
								<div class="text">
									<el-input :size="size" v-model="params.sla_reason"
										placeholder="SLA不达标原因"></el-input>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="24" style="margin: 0" v-if="item.repair_action != 3 && index==0">
							<el-col :span="12" :lg="12" :md="12" :xs="24">
								<span class="name" :class="item.repair_action==2?'required':''">现场步骤分析</span>
								<div class="text">
									<el-input type="textarea" :size="size" v-model="item.analysis_steps"
										placeholder="现场步骤分析"></el-input>
								</div>
							</el-col>
						</el-row>
						<div class="btnAdd" v-if="item.repair_action != 3 && index==0">
							<div class="cardBody">
								<sc-table ref="table" :data="params.repair_info" style="width: 100%;" :hidePagination="true"
									:hideDo="true" :hideEmpty="true" :size="size">
									<el-table-column prop="m_ascription" align="left" label="部件类型" :show-overflow-tooltip="true" width="80">
										<template #default="scope">
											{{scope.row.m_ascription===1?'旧部件':'新部件'}}
										</template>
									</el-table-column>
									<el-table-column prop="part_mpn" label="部件MPN" :show-overflow-tooltip="false" width="250">
										<template #default="scope">
											<div class="flexBox">
												<span class="requiredText" v-if="item.repair_action==2">*</span>
												<el-input :size="size" v-model="scope.row.part_mpn" placeholder="部件MPN" style="width: 230px;"></el-input>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="part_sn" label="部件SN" :show-overflow-tooltip="false" width="250">
										<template #default="scope">
											<div class="flexBox">
												<span class="requiredText" v-if="item.repair_action==2">*</span>
												<el-input :size="size" v-model="scope.row.part_sn" placeholder="部件SN" style="width: 230px;"></el-input>
											</div>
										</template>
									</el-table-column>
								</sc-table>
							</div>
						</div>
					</div>
				</div>
				<div class="btnBox">
					<el-button type="primary" @click="submit" :size="size" v-if="!info.repair_order || info.repair_order.repair_status!== 4">提交维修</el-button>
				</div>
			</el-scrollbar>
		</el-main>
	</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: "repairAction",
		components: {
			infoSaveDialog
		},
		data() {
			return {
				size: 'small',
				dialog: {
					save: false,
				},
				params: {
					order_id: Number(this.$route.query.order_id),
					repair_id: Number(this.$route.query.id),
					sla_reason:"",
					repair_info: [
						{
							m_ascription:1,  // 1 旧部件 2 新部件
							part_mpn: "",
							part_sn: "",
							sla_non_compliance_reason: "",
							confirmed_defects: "",
							analysis_steps: "",
							repair_action: 3
						},
						{
							m_ascription:2,
							part_mpn: "",
							part_sn: "",
							sla_non_compliance_reason: "",
							confirmed_defects: "",
							analysis_steps: "",
							repair_action: 3
						}
					]
				},
				info: {
					is_verify_erp_inventory: false,
					component_info: [],
				}
			}
		},
		mounted() {
			this.getInfo();
		},
		unmounted() {

		},
		methods: {
			async getInfo() {
				let params = {
					order_id: this.params.order_id
				}
				const res = await this.$API.orders.order.repair.info.post(params);
				if (res.code == 200) {
					this.info = res.data;
					this.params.repair_info[0].part_mpn = res.data.component_pn;
					this.params.repair_info[0].part_sn = res.data.device_sn;

					if(res.data.repair_records && res.data.repair_records.length>0){
						this.params.repair_info = res.data.repair_records;
					}

					if(res.data.repair_order && (res.data.repair_order.repair_status===1 || res.data.repair_order.repair_status===2)){
						await this.repairing();
					}
				}
			},
			async repairing() {
				let params = {
					repair_id: this.info.repair_order?this.info.repair_order.id:""
				}
				await this.$API.orders.order.repair.repairing.post(params);
			},
			repairAction(e){
				if(e===2){
					const un_repair_action = this.params.repair_info.find(em=>em.m_ascription===2);
					if(!un_repair_action){
						this.params.repair_info.push({
							m_ascription:2,
							part_mpn: "",
							part_sn: "",
							sla_non_compliance_reason: "",
							confirmed_defects: "",
							analysis_steps: "",
							repair_action: 3
						})
					}
				}else if(e===1){
					this.params.repair_info = this.params.repair_info.filter(em=>em.m_ascription===1);
				}
			},
			handleSaveSuccess() {

			},
			async submit() {
				let data = this.$TOOL.objCopy(this.params);
				data.repair_info.forEach((em)=>{
					em.repair_action = data.repair_info[0].repair_action;
					em.analysis_steps = data.repair_info[0].analysis_steps;
					em.confirmed_defects = data.repair_info[0].confirmed_defects;
					em.sla_non_compliance_reason = data.repair_info[0].sla_non_compliance_reason;
				})
				// const repair_action_num = data.repair_info[0].repair_action;
				data.repair_info.forEach((item) => {
					// if(repair_action_num===1 && index===0){
					// 	data.repair_info.splice(index,1);
					// }
					if (item.repair_action === 3) {
						delete item.part_mpn
						delete item.part_sn
						delete item.confirmed_defects
						delete item.sla_non_compliance_reason
						delete item.analysis_steps
					}
				});
				const row = data.repair_info.find(em=>em.m_ascription === 1);
				if(row && row.repair_action===2){
					if(row.confirmed_defects == ''){
						this.$message.warning('不良现象不能为空');
						return
					}
					if(row.analysis_steps == ''){
						this.$message.warning('现场步骤分析不能为空');
						return
					}
				}
				const res = await this.$API.orders.order.repair.submit.post(data);
				if (res.code === 200) {
					this.$message.success('操作成功');
					await this.getInfo();
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.mainView {
		background: #fff;
	}

	.title {
		color: #222;
		font-weight: 600;
	}

	.boxListBorderBottom {
		border-bottom: 1px solid #e8e8e8;
		padding-bottom: 5px;
		margin-bottom: 15px;
	}

	.boxList {
		margin-top: 15px;

		.el-row {
			margin: 0;
			padding: 0;

			.el-col {
				margin: 0 0 12px 0;
				padding: 0;
			}

			.flexCol {
				padding: 5px 12px 6px 12px;
			}
		}

		.name {
			color: #555;
			display: inline-block;
			margin-bottom: 6px;
		}
		.required{
			position: relative;
			padding-left: 10px;
		}
		.required:after{
			content: "*";
			position: absolute;
			left: 0;
			top: 0;
			color: var(--el-color-danger);
		}
	}
	.flexBox{
		display: flex;
		align-items: center;
		.requiredText{
			height: 100%;
			display: flex;
			align-items: center;
			color: var(--el-color-danger);
			margin-right: 4px;
		}
	}
	.btnBox {
		text-align: right;
	}

	.cardBody {
		margin-top: 15px;
	}

	.flexCol {
		display: flex;
		align-items: center;

		.name {
			margin-bottom: 0;
			margin-right: 15px;
		}

		.text {
			font-weight: 400;
		}
	}

	.btnAdd {
		margin-top: 15px;
	}
</style>
