<template>
	<el-container class="searchBox" @click="scSelectHide">
		<el-header class="searchHeader">
			<div class="searchHeaderBack">
				<el-input class="searchInput" :class="downBorder?'searchInputNoBorder':''" v-focus type="text" size="large" v-model="keyword">
					<template #prepend>
						<scSelect ref="scSelect" :listData="list" :name="dropdownName" :value="dropdownType" @scSelect="dropdownChange"></scSelect>
					</template>
					<template #append>
						<div class="searchBtn" @click="searchClick">
							<span class="name">搜索</span>
							<el-icon class="icon"><el-icon-Search/></el-icon>
						</div>
					</template>
				</el-input>
			</div>
		</el-header>
		<el-main v-loading="loading" element-loading-text="加载中...">
			<el-scrollbar v-model="activeNames" v-if="rows.length>0">
				<div class="collapseHeaderBack">
					<div class="collapseHeaderNav">
						<div class="item seq">序号</div>
						<template v-if="dropdownType=='a'">
							<div class="item" :style="{'width':item.width+'px'}" v-for="(item,index) in orderColumn" :key="index">{{item.label}}</div>
						</template>
						<template v-if="dropdownType=='b'">
							<div class="item" :style="{'width':item.width+'px'}" v-for="(item,index) in planColumn" :key="index">{{item.label}}</div>
						</template>
					</div>
				</div>
				<el-collapse class="collapseMain" @change="collapseChange" :accordion="true">
					<template v-for="(item,index) in rows" :key="index">
						<el-collapse-item :title="item.repair_order_no" :name="item.id">
							<template #title>
								<div class="collapseHeader">
									<div class="item seq">{{index+1}}</div>
									<template v-if="dropdownType=='a'">
										<div class="item" :style="{'width':em.width+'px'}" v-for="(em,index) in orderColumn" :key="index">
											<span v-if="em.prop == 'business_status'">
												<span v-for="(li,ind) in statusList" :key="ind">
													<span :style="{color:li.value==1?`var(--el-order-color-1)`:li.value==2?`var(--el-order-color-2)`:li.value==3?`var(--el-order-color-3)`:li.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
														  v-if="li.value == item[em.prop]">{{li.label}}</span>
												</span>
											</span>
											<!-- <el-tooltip effect="dark" :content="item[em.prop]"><span class="text">{{item[em.prop]}}</span></el-tooltip> -->
											<span v-else>{{item[em.prop]}}</span>
										</div>
									</template>
									<template v-if="dropdownType=='b'">
										<div class="item" :style="{'width':em.width+'px'}" v-for="(em,index) in planColumn" :key="index">
											<span v-if="em.prop == 'repair_status'">
												<span v-for="(li,ind) in statusList" :key="ind">
													<span :style="{color:li.value==1?`var(--el-order-color-1)`:li.value==2?`var(--el-order-color-2)`:li.value==3?`var(--el-order-color-3)`:li.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
														  v-if="li.value == item[em.prop]">{{li.label}}</span>
												</span>
											</span>
											<span v-else>{{item[em.prop]}}</span>
										</div>
									</template>
								</div>
							</template>
							<!-- 维保工单 -->
							<div class="collapseBody" v-if="dropdownType=='a'">
								<div class="title">工单详情</div>
								<div class="stepView">
									<el-steps class="orderSteps" :active="item.process_num" align-center>
										<el-step :status="item.status" v-for="(item,index) in item.process_engine" :key="index" :title="item.description"  />
									</el-steps>
								</div>
								<div class="orderInfo">
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">维修单ID:</span><span class="text">{{item.id}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">维修单号:</span><span class="text">{{item.repair_order_no}}</span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">是否关机:</span><span class="text">{{item.requires_shutdown}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">机房城市:</span><span class="text">{{item.city}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">园区:</span><span class="text">{{item.park_name}}</span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">机房:</span><span class="text">{{item.data_center_name}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">机架位:</span><span class="text">{{item.rack_position}}</span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">整机SN:</span><span class="text">{{item.device_sn}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">整机厂商:</span><span class="text">{{item.device_manufacturer}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">整机型号:</span><span class="text">{{item.device_model}}</span>
										</el-col>
									</el-row>
								</div>
								<div class="componentBox">
									<el-table :data="item.component_info" :size="size" stripe :header-cell-style="{'background': '#1367C1','color':'#fff'}">
										<el-table-column type="index" label="序号" align="center"></el-table-column>
										<el-table-column prop="component_serial_no" show-overflow-tooltip label="部件SN/Sp" width="160"></el-table-column>
										<el-table-column prop="component_manufacturer" show-overflow-tooltip label="部件厂商" width="130"></el-table-column>
										<el-table-column prop="component_model" show-overflow-tooltip label="部件型号" width="160"></el-table-column>
										<el-table-column prop="component_pn" show-overflow-tooltip label="部件PN/Sp" width="150"></el-table-column>
										<el-table-column prop="bd_backup_count" show-overflow-tooltip label="剩余BD数" width="120"></el-table-column>
									</el-table>
								</div>
							</div>

							<!-- 维修工单 -->
							<div class="collapseBody" v-if="dropdownType=='b'">
								<div class="title">工单详情</div>
								<div class="orderInfo orderInfoRepair">
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">维修单号:</span><span class="text">{{item.repair_order_no}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">PE确认时间:</span><span class="text">{{item.maintenance_order.pe_confirmation_time}}</span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">故障描述:</span><span class="text">{{item.maintenance_order.fault_description}}</span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">保修期结束:</span><span class="text">{{item.maintenance_order.warranty_end_date}}</span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">维修动作:</span><span class="text"></span>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="8" :lg="6">
											<span class="name">不良原因:</span><span class="text"></span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">不良现象:</span><span class="text"></span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">现场步骤分析:</span><span class="text"></span>
										</el-col>
										<el-col :span="8" :lg="6">
											<span class="name">SLA不达标原因:</span><span class="text"></span>
										</el-col>
									</el-row>
								</div>
								<div class="componentBox">
									<el-table :data="item.maintenance_order.component_info" :size="size" stripe :header-cell-style="{'background': '#1367C1','color':'#fff'}">
										<el-table-column type="index" label="序号" align="center"></el-table-column>
										<el-table-column prop="component_serial_no" show-overflow-tooltip label="部件SN/Sp" width="160"></el-table-column>
										<el-table-column prop="component_manufacturer" show-overflow-tooltip label="部件厂商" width="130"></el-table-column>
										<el-table-column prop="component_model" show-overflow-tooltip label="部件型号" width="160"></el-table-column>
										<el-table-column prop="component_pn" show-overflow-tooltip label="部件PN/Sp" width="150"></el-table-column>
										<el-table-column prop="bd_backup_count" show-overflow-tooltip label="剩余BD数" width="120"></el-table-column>
									</el-table>
								</div>
							</div>
						</el-collapse-item>
					</template>
				</el-collapse>
			</el-scrollbar>
		</el-main>
	</el-container>
</template>

<script>
import scSelect from '/src/components/scSearchSelect';
import {eventBus} from "@/utils/eventBus";
export default {
	name: "",
	components:{
		scSelect
	},
	data(){
		return{
			size:'small',
			loading:false,
			keyword:"",
			dropdownName:"维保工单",
			dropdownType:'a',
			downBorder:false,
			list:[
				{name:'维保工单',value:'a'},
				{name:'维修工单',value:'b'},
			],
			params:{
				repair_order_no:{
					operator:"like",
					value:""
				},
				component_serial_no:{
					operator:"like",
					value:""
				},
			},
			activeNames:[],
			orderColumn:[
				{label:"工单号",prop:"repair_order_no",width:160},
				{label:"客户名称",prop:"customer_name",width:140},
				{label:"故障描述",prop:"fault_description",width:200},
				{label:"生产日期",prop:"created_at",width:120},
				{label:"返厂日期",prop:"warranty_end_date",width:120},
				{label:"维修等级",prop:"maintenance_grade",width:120},
				{label:"维修分类",prop:"fault_classification",width:120},
				{label:"故障类型",prop:"fault_type",width:100},
				{label:"维保等级",prop:"maintenance_plan",width:100},
				{label:"是否开机",prop:"requires_shutdown",width:90},
				{label:"状态",prop:"business_status",width:100},
			],
			planColumn:[
				{label:"工单号",prop:"repair_order_no",width:160},
				{label:"外发日期",prop:"created_at",width:160},
				{label:"维保商场",prop:"repair_order_no",width:160},
				{label:"计划时间",prop:"created_at",width:160},
				{label:"完成时间",prop:"updated_at",width:160},
				{label:"故障类型",prop:"fault_type",width:160},
				{label:"状态",prop:"repair_status",width:160},
			],
			rows:[],
			statusList:[],
			component_info:[]
		}
	},
	mounted() {
		this.getStatusList();
		eventBus.$on('searchDownShow', this.downResult);
	},
	unmounted() {
		eventBus.$off('searchDownShow', this.downResult);
	},
	methods:{
		downResult(e){
			this.downBorder = e;
		},
		scSelectHide(){
			this.$refs.scSelect.downShow = false;
			this.downBorder = false;
		},

		async searchClick() {
			let params = this.setObj();
			this.loading = true;
			let res;
			if(this.dropdownType === 'a'){
				res = await this.$API.orders.order.maintenance.search.post(params);
			}else if(this.dropdownType === 'b'){
				res = await this.$API.orders.order.repair.search.post(params);
			}
			this.loading = false;
			if(res.code == 200){
				res.data.forEach(item=>{
					if(item.process_engine){
						let obj = this.processList(item.process_engine);
						item.process_engine = obj.processedList;
						item.process_num = obj.num;
					}
					if(item.maintenance_order && item.maintenance_order.component_info && item.maintenance_order.component_info==0){
						item.maintenance_order.component_info = [
							{
								component_serial_no:item.maintenance_order.component_serial_no,
								component_manufacturer:item.maintenance_order.component_manufacturer,
								component_model:item.maintenance_order.component_model,
								component_pn:item.maintenance_order.component_pn,
								bd_backup_count:item.maintenance_order.bd_backup_count
							}
						]
					}
					if(item.component_info && item.component_info.length===0){
						item.component_info = [
							{
								component_serial_no:item.component_serial_no,
								component_manufacturer:item.component_manufacturer,
								component_model:item.component_model,
								component_pn:item.component_pn,
								bd_backup_count:item.bd_backup_count
							}
						]
					}
				})
				this.rows = res.data;
			}
		},
		setObj(){
			for(let i in this.params){
				this.params[i].value = this.keyword===""?"":'%'+this.keyword+'%'
			}
			return this.params
		},
		collapseChange(){

		},
		async getStatusList() {
			const res = await this.$API.orders.order.maintenance.status.post();
			if (res.code == 200) {
				this.statusList = res.data;
			}
		},
		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;
		},
		dropdownChange(e){
			this.dropdownType = e.value;
			this.dropdownName = e.name;
			this.rows = [];
		}
	}
}
</script>

<style scoped lang="scss">
	.searchHeader{
		padding: 0;
		margin: 0;
		height: 70px;
		background: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/search_back.png) no-repeat;
		background-size: cover;
		position: relative;
	}
	.searchHeaderBack{
		height: 100%;width: 100%;
		padding: 0;
		background: rgba(231,243,255,0.4);
		position: absolute;left: 0;top: 0;z-index: 10;
		display: flex;align-items: center;justify-content: center;
	}
</style>
