<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 v-for="(item,index) in listCards" :key="index" class="myContainer myContentBox" style="position: relative;flex: 1;" >
				<dev-block :title="item.title" :titleNumber="item.titleNumber" 
				 :contentList="item.contentList" ></dev-block>
				 <view class="handle_container">
					 <view class="handle1">单价:
						<input type="number" v-model="item.price"  style="width: 50px; margin:0px 5px; height:50upx; border: 1px solid #3382FF;
						display: inline-block; vertical-align: bottom;" />
						元</view>
					 <view class="handle1">总价:{{setTotal(index,item)}}元</view>
					 <view class="handle2">
							<uni-icons class="handle_icon" type="minus" color="#3e84e4" @click="reduce(index)"></uni-icons>
							<input class="num" v-model="item.amount" type="number"/>
							<uni-icons class="handle_icon" type="plus-filled"  color="#3e84e4"  @click="plus(index)"></uni-icons>
					 </view>
				 </view>
				 <view class="itemtext" style="color:#007aff;position: absolute; top: 0; right: 20px;" @click="deleteItem(index)">
					<uni-icons type="trash" class="myarrowright" style="right:56upx; font-size: 36upx;color:#007aff;"></uni-icons>删除
				 </view>
			</view>
		</view>
		<view class="add" @click="add_spare_part()" >添加备件</view>
		<view class="bottom_btn">
			<view class="previous" @click="toPrevious()">上一步</view>
			<view class="next"  @click="toNext()">下一步</view>
		</view>
		<view class="goHome" @click='goMain()' style="bottom:250upx;">
			<img src="../../static/img/gohome.png">
		</view>
		<view class="mysearchlist" style="z-index: 10000;">
			<chooseMaterialMulti ref="mysearchlist" 
				:showsearch.sync="show_search_user"
				:itemInfo_.sync="search_value_user">
			</chooseMaterialMulti>
		</view>
	</view>
</template>
<script>
	import {mapState,mapMutations} from 'vuex'
	import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import chooseMaterialMulti from '@/components/xinsoft-search-list/chooseMaterialMulti.vue'
	export default {
		components: {
			devBlock,
			uniIcons,
			chooseMaterialMulti
		},
		computed: {
		...mapState(['keepPartList'])
		},
		data() {
			return {
				id: '',
				listCards: [],
				show_search_user:false,
				search_value_user:[],
			}
		},
		onShow(){
			// this.listCards = this.keepPartList;
			// this.$forceUpdate();
		},
		onLoad(option) {
			this.id = option.id;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'eqUpkeep'
				});
				return false;
			}
			if(this.id == this.keepPartList.id){
				this.listCards = this.keepPartList.keepPartList;
				this.$forceUpdate();
			}
			// this.listCards = this.keepPartList;
			
			
			// var _this = this;
			// this.$http.request({
			// 	url: '/apis/upkeepPlan/oneRecordDetail',
			// 	params: {
			// 		recordId: option.id
			// 	},
			// }).then(res => {
			// 	console.log(res);
			// 	if (res.data.code == 0) {
					
			// 		if(res.data.data && res.data.data.part.length>0){
			// 			this.listCards=this.formaterData(res.data.data.part);
			// 			this.setkeepPartList(this.listCards);
			// 		}
			// 	}
			// }).catch(err => {
			// 	console.log(err)
			// });
			
		},
		watch:{
			search_value_user(newv){
				if(newv.length>0){
					this.listCards=this.listCards.concat(this.formaterData(newv))
				}
				
				this.setkeepPartList(this.listCards);
				}
			},
		methods:{
			...mapMutations(['setkeepPartList']),
			//计算总价
			setTotal(index,item){
				// this.listCards[index].spart_sum=(item.price||0)*item.amount;
				return (item.price||0)*item.amount
			},
			reduce(index){
				if(this.listCards[index].amount>0){
					this.listCards[index].amount=JSON.parse(this.listCards[index].amount)-1;
				}
			},
			// 加
			plus(index){
				this.listCards[index].amount=JSON.parse(this.listCards[index].amount)+1;
			},
			//删除
			deleteItem(index){
				//删除 备件
				this.listCards.splice(index,1);
			},
			toPrevious() {
				uni.navigateTo({
					url: "keepStep1?id="+this.id
				});
			},
			formaterData(data){
				var resData = [];
				data.forEach((vals,index)=>{
					var combineJSON = {
						id: vals.id,
						title: vals.name,
						titleNumber:'['+(vals.serialNo||'')+']',
						contentList: [
							{
								id:1,
								isDouble:true,
								labelName:'规格型号',
								labelContent:vals.specification
							},						
							{
								id:2,
								isDouble:true,
								labelName:'库位',
								labelContent:vals.defaultFacilityName
							},
							{
								id: 3,
								isDouble: true,
								labelName: '设备类型',
								labelContent: vals.typeName
							}
						],
						price:vals.salePrice,
						amount:1,
						spart_sum:vals.spart_sum
					}
					resData.push(combineJSON);
				});
				return resData;
			},
			toNext:function(){
				this.setkeepPartList({id:this.id,keepPartList:this.listCards});
				//下一步。
				uni.navigateTo({
					url: "keepStep3?id="+this.id
				});
			},
			add_spare_part(){
				this.show_search_user=true;
				// var url;
				// if(this.recordId){
				// 	url='addSparePart?id='+this.id+"&recordId="+this.recordId+'&url=repairStep2'
				// }else{
				// 	url='addSparePart?id='+this.id+'&url=repairStep2'
				// }
				// uni.redirectTo({
				// 	url: 'addSparePart?id='+this.id
				// });
			}
		}
	}
</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: #000;
	}

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

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

	.step3:before {
		content: '3';
		border: 2upx solid #828282;
	}
	.step3:after {
		background-color: transparent;
	}
	
	.project_container {
			position: relative;
			margin-bottom: 160upx;
			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;
		}
	
	.bottom_btn{
		position: absolute;
		left: 5%;
		bottom: 30upx;
		width: 90%;
		height: 82upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.next,.previous {
		width: 48%;
		border-radius: 5px;
		border: 1px solid #3382FF;
		text-align: center;
		color: #3382FF;
		line-height: 82upx;
		background-color: #fff;
		}
		.next{
			border: none;
			background-color:#3382FF ;
			color: #fff;
		}
	
	.add{
		position: absolute;
		left: 5%;
		bottom: 142upx;
		width: 90%;
		height: 82upx;
		border-radius: 5px;
		border: 1px solid #3382FF;
		text-align: center;
		color: #3382FF;
		margin: 15px auto;
		line-height: 82upx;
		background-color: #EBF5FF;
	}
	>>>.dev-label{
		white-space: nowrap;
	}
	>>>.dev-block{
		border-radius: 12upx 12upx 0px 0px ;
		box-shadow:none;
	}
	.handle_container{
		margin: 0 24upx;
		position: relative;
		display: flex;
		 justify-content:space-around;
		  align-items:center;
		 font-size: 24upx;
		 color: #333;
		 background-color: #fff;
		 height: 121upx;
		 line-height: 121upx;
		 border-top: 1px solid #EDEDED;
		 text-align: center;
		 margin-top: -24upx;
		 border-radius: 0px 0px 12upx 12upx;
	}
	.handle1{
		flex:1 ;
	}
	.handle2{
		flex:0.8 ;
		display: flex;
		 justify-content:center;
		  align-items:center;
		  padding-right: 20upx;
		  box-sizing: border-box;
	}
	.handle_icon{
		font-size: 44upx !important;
	}
	.num{
		font-size: 22upx;
	}
</style>
