<template>
	<el-container>
		<el-main class="orderMain" v-loading="loading" element-loading-text="加载中...">
			<el-scrollbar>
				<detailView :data="info">
					<template #submit>
						<div class="cardItem">
							<div class="title titleFlex">
								<span class="name">维保部件信息</span>
								<el-button type="primary" plain :size="size" icon="el-icon-Plus" @click="addOrder">添加部件信息</el-button>
							</div>
							<el-row>
								<el-col :span="24" :lg="24" class="colFlex">
									<span class="label labelText">验证ERP库存：</span>
									<span class="text">
										<el-radio-group v-model="info.is_verify_erp_inventory">
											<el-radio :value="true" :label="true">是</el-radio>
											<el-radio :value="false" :label="false">否</el-radio>
										</el-radio-group>
									</span>
								</el-col>
							</el-row>
							<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 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="primary" :size="size" @click="editOrder(scope.row,scope.$index)">编辑</el-button>
											<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="btnView">
							<el-button type="primary" :size="size" @click="save" :loading="saveLoading">确认提交</el-button>
						</div>
					</template>
				</detailView>
			</el-scrollbar>
		</el-main>
	</el-container>

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

<script>
import detailView from "@/views/order/orderList/detailView";
import infoSaveDialog from "@/views/order/components/infoSave";
import manufacturerDialog from "@/views/order/orderList/components/manufacturer"
export default {
	name: "",
	components:{
		detailView,
		infoSaveDialog,
		manufacturerDialog
	},
	data(){
		return{
			size:"small",
			loading:false,
			saveLoading:false,
			params:{
				order_id:Number(this.$route.query.id),
			},
			info:{
				is_verify_erp_inventory:false,
				component_info:[]
			},
			statusList:[],

			dialog: {
				save: false,
				companyWf:false
			},
		}
	},
	mounted() {
		this.getData();
		this.getStatusList();
	},
	methods:{
		async getData() {
			this.loading = true;
			const res = await this.$API.orders.order.maintenance.info.post(this.params);
			if(res.code == 200){
				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.info = res.data;
				this.info.is_verify_erp_inventory = res.data.is_verify_erp_inventory?res.data.is_verify_erp_inventory:false;
				if(res.data.component_info.length==0){
					this.info.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 handleWfSuccess(data, mode) {
			if (mode === 'show') {
				const params = {
					order_ids: [this.params.order_id],
					maintenance_vendor:data.company_id,
					is_verify_erp_inventory: this.info.is_verify_erp_inventory,
					component_info: this.info.component_info.filter(em => !em.id),
				};
				const res = await this.$API.orders.order.maintenance.submit.post(params);
				if (res.code == 200) {
					this.$refs.companyWfDialog.hideVisible();
					await this.getData();
				}
			}
		},
		save() {
			this.saveLoading = true;
			this.dialog.companyWf = true;
			this.$nextTick(() => {
				this.saveLoading = false;
				this.$refs.companyWfDialog.open('show');
			})
		},
		async getStatusList() {
			const res = await this.$API.orders.order.maintenance.status.post();
			if (res.code == 200) {
				this.statusList = res.data;
			}
		},
		addOrder(){
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		handleSaveSuccess(data,mode){
			if(mode == 'add'){
				this.info.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);
				}
			}
		},
		editOrder(row,num){
			row.num = num;
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row);
			})
		},
		deleteOrder(row,num){
			this.info.component_info.forEach((em,index)=>{
				if(index === num){
					this.info.component_info.splice(index,1);
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
	.btnView{
		text-align: left;
	}
	.titleFlex{
		display: flex;align-items: stretch;justify-content: space-between;
	}
	.colFlex{
		display: flex;align-items: center;
	}
</style>
