<template>
	<view class="content">
		<view class="step_num">
			<view class="step step1">完善保养项目</view>
			<view class="step step2">确认备件使用情况</view>
			<view class="step step3">保养总结</view>
		</view>
		<view class="project_container">
			<view class="myContentBox myContainer" v-for="(items,index) in details" :key="index">
				<view class="top_container detail_list_top">
					<view class="report_status">保养项目-{{items.code}}</view>
					<view class="edit" @click="edit(index)">编辑</view>
				</view>
				<view style="clear: both;">
					<view class="multi_list_item">
						<view class="list_item">
							<view class="list_item_name">项目:</view>
							<view class="list_item_content">{{items.name}}</view>
						</view>						
					</view>
					<view class="multi_list_item">
						<view class="list_item list_item-">
							<view class="list_item_name">工时:</view>
							<view class="list_item_content">{{items.manhour}}小时</view>
						</view>						
						<view class="list_item list_item-">
							<view class="list_item_name">结果:</view>
							<view class="list_item_content" v-if="items.result==1">通过</view>
							<view class="list_item_content" v-else-if="items.result=='0'">不通过</view>
						</view>
					</view>
					<view class="multi_list_item">
						<view class="list_item list_item-">
							<view class="list_item_name">保养工时费：</view>
							<view class="list_item_content" style="padding-left: 180upx;">{{items.manHourCost || 0}}元</view>
						</view>
					</view>
					<view class="multi_list_item">
						<view class="list_item">
							<view class="list_item_name">方法:</view>
							<view class="list_item_content" >{{items.function}}</view>
						</view>
					</view>
				<view class="list_item" >
					<view class="list_item_name" >备注:</view>
					<view class="list_item_content">{{items.remark}}</view>
				</view>
				</view>
			</view>
		</view>
		<view class="next" @click="toNext()">下一步</view>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>
<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				details:[]
			}
		},
		computed: {
		...mapState(['keepDetails'])
        },
		onLoad(option) {
			this.id = option.id;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'eqUpkeep'
				});
				return false;
			}
			
			var _this = this;
			this.$http.request({
				url: '/apis/upkeepPlan/oneRecordDetail',
				params: {
					recordId: option.id
				},
			}).then(res => {
				if (res.data.code == 0) {
					if(this.keepDetails.keepDetails==undefined){
						if(res.data.data && res.data.data.project.length>0){
							_this.details = res.data.data.project;
							_this.setkeepDetails({id:_this.id,keepDetails:_this.details});
							
							var listCards=this.formaterData(res.data.data.part);
							this.setkeepPartList({
								id:_this.id,
								keepPartList:listCards
							});
						}
					}else if(this.keepDetails.id==this.id){
						this.details = this.keepDetails.keepDetails
						this.$forceUpdate();
					}
					
				}
			}).catch(err => {
				console.log(err)
			});
		},
	
		methods:{
			...mapMutations(['setkeepDetails','setkeepPartList']),
			  toNext(){
				  uni.navigateTo({
					  url: "keepStep2?id="+this.id
				  });
			  },
			  //编辑
			  edit(index){
				  	uni.redirectTo({
				  	    url: "keepEdit?id="+this.id+'&index='+index
				  	});
			  },
			  formaterData(data){
			  	var resData = [];
			  	data.forEach((vals,index)=>{
			  		var combineJSON = {
			  			id: vals.part_id,
			  			title: vals.spartName,
			  			titleNumber:'['+vals.code+']',
			  			contentList: [
			  				{
			  					id:1,
			  					isDouble:true,
			  					labelName:'规格型号',
			  					labelContent:vals.type
			  				},						
			  				{
			  					id:2,
			  					isDouble:true,
			  					labelName:'库位',
			  					labelContent:vals.locationName
			  				}
			  			],
			  			price:vals.price,
			  			amount:vals.spart_amount,
			  			spart_sum:vals.spart_sum
			  		}
			  		resData.push(combineJSON);
			  	});
			  	return resData;
			  }
		}
	}
</script>

<style scoped>
	.content {
		position: relative;
		min-height: 100%;
		overflow: auto;
		padding-bottom: 140upx;
		box-sizing: border-box;
	}

	.step_num {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 80upx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.step {
		position: relative;
		font-size: 28upx;
		line-height: 80upx;
		padding-left: 30upx;
		float: left;
	}

	.step:before {
		position: absolute;
		left: 0px;
		content: '1';
		border: 1px solid #000;
		width: 28upx;
		height: 28upx;
		box-sizing: border-box;
		line-height: 28upx;
		border-radius: 200upx;
		font-size: 20upx;
		text-align: center;
		top: 26upx;
	}

	.step:after {
		position: absolute;
		content: '';
		width: 30upx;
		height: 2upx;
		background-color: #000;
		top: 40upx;
		left: 200upx;
	}

	.step2 {
		margin-left: 34upx;
		color: #828282;
	}

	.step2:before {
		content: '2';
		border: 2upx solid #828282;
	}

	.step2:after,
	.step3:after {
		left: 250upx;
		background-color: #828282;
	}

	.step3 {
		margin-left: 34upx;
		color: #828282;
	}

	.step3:before {
		content: '3';
		border: 2upx solid #828282;
	}
	.step3:after {
		background-color: transparent;
	}
	
	.project_container {
			position: relative;
			margin-top: 20upx;
			overflow: auto;
		}
	
	
		.top_container {
			position: relative;
			width: 100%;
			background-color: #fff;
			padding: 30upx 30upx 30upx 30upx;
			box-sizing: border-box;
			color: #333;
			box-shadow: 2px 2px 20upx rgba(0, 0, 0, 0.1);
		}
	
		.detail_list_top {
			border-bottom: 1px solid #EDEDED;
			box-shadow: none;
			padding-right: 100upx;
		}
	.edit{
		position: absolute;
		font-size: 28upx;
		color: #3382FF;
		right: 30upx;
		top: 30upx;
		
	}
		.report_status {
			line-height: 40upx;
			word-break: break-all;
			font-size: 28upx;
		}
	
		.detail_list{
			position: relative;
			background-color: #fff;
			width: 90%;
			margin: auto;
			box-shadow: 1px 1px 20upx rgba(0,0,0,0.1);
			margin-bottom: 30upx;
			overflow: auto;
		}
		.list_item {
			position: relative;
			width: 100%;
			min-height: 70upx;
			padding: 0 30upx;
			box-sizing: border-box;
		}
	
		.multi_list_item {
			position: relative;
			overflow: auto;
		}
	
		.list_item- {
			width: 50%;
			float: left;
		}
	
		.list_item_name {
			position: absolute;
			left: 30upx;
			font-size: 28upx;
			color: #999;
			line-height: 70upx;
			/* width: 120upx; */
		}
	
/* 		.list_item- .list_item_name {
			width: 120upx ;
		} */
	
		.list_item_content {
			position: relative;
			padding: 0 0 0 140upx;
			font-size: 28upx;
			line-height: 70upx;
			color: #333;
			overflow: hidden;
			height: 70upx;
			text-overflow: ellipsis;
			white-space: nowrap
			
		}
	
	.next {
		position: absolute;
		left: 5%;
		bottom: 15px;
		width: 90%;
		height: 82upx;
		border-radius: 5px;
		text-align: center;
		color: #fff;
		line-height: 82upx;
		background-color: #3382FF;

	}
</style>
