<template>
	<div class="cardBox">
		<div class="headerView">
			<div class="title">工单时间</div>
			<div class="status">
				<span class="name">当前状态：</span>
				<span class="text">
					<span v-for="(item,ind) in setMap.statusList" :key="ind">
						<span :style="{color:item.value==1?`var(--el-order-color-1)`:item.value==2?`var(--el-order-color-2)`:item.value==3?`var(--el-order-color-3)`:item.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
							  v-if="item.value == info.business_status">{{item.label}}</span>
					</span>
				</span>
			</div>
		</div>
		<div class="cardBody">
			<el-row>
				<el-col :span="8" :lg="6">
					<span class="label">报修客户：</span>
					<span class="text">
						<span v-for="(item,index) in  setMap.customerList" :key="index">
							<span v-if="item.id == info.customer_id">{{item.customer_name}}</span>
						</span>
					</span>
				</el-col>
				<el-col :span="8" :lg="6">
					<span class="label">标准机型：</span>
					<span class="text">{{info.standard_model}}</span>
				</el-col>
				<el-col :span="8" :lg="6">
					<span class="label">创建时间：</span>
					<span class="text">{{info.created_at}}</span>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8" :lg="6">
					<span class="label">PE确认时间：</span>
					<span class="text">{{info.pe_confirmation_time}}</span>
				</el-col>
				<el-col :span="8" :lg="6">
					<span class="label">过保时间：</span>
					<span class="text">{{info.warranty_end_date}}</span>
				</el-col>
				<el-col :span="8" :lg="6">
					<span class="label">SLA截止时间：</span>
					<span class="text">{{info.sla_expiration}}</span>
				</el-col>
			</el-row>
		</div>
	</div>
	<div class="cardBox footerCard">
		<div class="cardItem">
			<div class="title">流程进度</div>
			<div class="cardBody">
				<el-steps class="orderSteps" :active="info.process_num" align-center>
					<el-step :status="item.status" v-for="(item,index) in info.process_engine" :key="index" :title="item.description"  />
				</el-steps>
			</div>
		</div>
		<div class="cardItem">
			<div class="title">维保单号</div>
			<div class="cardBody">
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">维修单号：</span>
						<span class="text">{{info.repair_order_no}}</span>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="cardItem">
			<div class="title">维保工单信息</div>
			<div class="cardBody">
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">维修单等级：</span>
						<span class="text">{{info.maintenance_plan}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">维修分类：</span>
						<span class="text">{{info.maintenance_level}}</span>
					</el-col>
					<el-col :span="8" :lg="12">
						<span class="label">故障内容：</span>
						<span class="text">{{info.fault_description}}</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">故障类型：</span>
						<span class="text">{{info.fault_type}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">维保等级：</span>
						<span class="text">{{info.maintenance_plan}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">是否关机：</span>
						<span class="text">{{info.requires_shutdown}}</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">机房城市：</span>
						<span class="text">{{info.city}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">园区：</span>
						<span class="text">{{info.park_name}}</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">机房：</span>
						<span class="text">{{info.data_center_name}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">机架位：</span>
						<span class="text">{{info.rack_position}}</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :lg="6">
						<span class="label">整机SN：</span>
						<span class="text">{{info.device_sn}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">整机厂商：</span>
						<span class="text">{{info.device_manufacturer}}</span>
					</el-col>
					<el-col :span="8" :lg="6">
						<span class="label">整机型号：</span>
						<span class="text">{{info.device_model}}</span>
					</el-col>
				</el-row>
			</div>
		</div>
		<slot name="submit"></slot>

		<slot name="review"></slot>
	</div>
</template>

<script>
export default {
	name: "detailView",
	props:{
		data:{
			type:Object
		}
	},
	watch:{
		data(val){
			this.info = val;
		}
	},
	data(){
		return{
			size:'small',
			info:{
				component_info:[]
			},
			setMap:{
				statusList:[],
				customerList:[]
			}
		}
	},
	mounted() {
		this.getStatusList();
		this.getCustomerSelect();
	},
	methods:{
		async getStatusList() {
			const res = await this.$API.orders.order.maintenance.status.post();
			if (res.code == 200) {
				this.setMap['statusList'] = res.data;
			}
		},
		async getCustomerSelect(){
			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['customerList'] = res.data;
			}
		},
	}
}
</script>

<style scoped lang="scss">

</style>
