<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">
							<el-col :span="24" class="flexCol">
								<span class="name">维修动作</span>
								<span class="text">
									<el-radio-group v-model="item.action" :size="size">
									  <el-radio value="1">更换</el-radio>
									  <el-radio value="2">修复</el-radio>
									  <el-radio value="3">无需修复</el-radio>
									</el-radio-group>
								</span>
							</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 :size="size" v-model="item.new_part_mpn"></el-input>
								</div>
							</el-col>
							<el-col :span="6" :lg="6" :md="8" :xs="24">
								<span class="name">不良现象</span>
								<div class="text">
									<el-input :size="size" v-model="item.new_part_sn"></el-input>
								</div>
							</el-col>
							<el-col :span="6" :lg="6" :md="8" :xs="24">
								<span class="name">现场步骤分析</span>
								<div class="text">
									<el-input :size="size" v-model="item.sla_non_compliance_reason"></el-input>
								</div>
							</el-col>
							<el-col :span="6" :lg="6" :md="8" :xs="24">
								<span class="name">SLA不达标原因</span>
								<div class="text">
									<el-input :size="size" v-model="item.confirmed_defects"></el-input>
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="btnAdd">
						<el-button type="primary" plain :size="size">添加部件信息</el-button>
						<div class="cardBody">
							<sc-table ref="table" :data="info.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
								<sc-table-column type="index" label="序号" width="65"></sc-table-column>
								<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>
						</div>
					</div>
				</div>
				<div class="btnBox">
					<el-button type="primary" @click="submit" :size="size">提交维修</el-button>
				</div>
			</el-scrollbar>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "repairInfo",
	data(){
		return{
			size:'small',
			params:{
				order_id:Number(this.$route.query.order_id),
				repair_id:Number(this.$route.query.id),
				repair_info:[
					{
						new_part_mpn:"",
						new_part_sn:"",
						sla:"",
						sla_non_compliance_reason:"",
						confirmed_defects:"",
						analysis_steps:"",
						action:""
					}
				]
			},
			info:{
				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;
			}
		},
		async submit() {
			const res = await this.$API.orders.order.repair.submit.post(this.params);
			if(res.code == 200){
				console.log(res.data)
			}
		},

	}
}
</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;
		}
	}
	.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>
