<template>
	<view class="content">
		<view class="step_num">
			<view class="step step1">完善维修记录</view>
			<view class="step step2">添加维修事件</view>
		</view>
		<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" >
			<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note" :extra="item.extra" :tagType="item.tagType"
			 :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="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 class="handle1">总价:{{setTotal(item)}}元</view>
				 <!-- <view class="handle1">总价:
					<input type="number" v-model="item.total" disabled style="width: 50px; margin:0px 5px; height:50upx; border: 1px solid #3382FF;
					display: inline-block; vertical-align: bottom;" />
					元</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 class="goHome" @click='goMain("repairDealInfo")' style="bottom:250upx;">
		 	<img src="../../static/img/gohome.png">
		</view>
		<view class="add" @click="add_spare_part()">添加备件</view>
		<view class="bottom_btn">
			<view class="previous" @click="toPrevious()">上一步</view>
			<view class="next"  @click="tosubmit(0)">暂存</view>
			<view class="next"  @click="tosubmit(1)">提交</view>
		</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
		},
		data() {
			return {
				show_search_user:false,
					search_value_user:[],
				id: '',
				recordId:'',
				listCards: [],
				sparePartsCost: 0,
				// partList:[]
			}
		},
			computed: {
            // ...mapState(['repairRecordList']),
            ...mapState(['partList','repairRecordList']),
        },
		onLoad(option) {
			this.id = option.id;
			this.recordId = option.recordId;
			this.sparePartsCost = option.sparePartsCost;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'eqRepair'
				});
				return false;
			}
			this.listCards=this.partList;
		},
	watch:{
		search_value_user(newv){
			if(newv.length>0){
				this.listCards=this.listCards.concat(this.formaterData(newv))
			}
			
			this.setpartList(this.listCards);
			},
			partList:{
				handler(newV){
					if(newV.length>0){
						var sum = 0;
						for(var i=0;i<this.partList.length;i++){
						  sum +=(this.partList[i].amount*this.partList[i].price)
						}
						this.sparePartsCost = sum
						console.log(this.sparePartsCost)
					}
				},
				deep: true
			}
			
		},
		methods:{
			...mapMutations(['setpartList','setrepairRecordList']),
			//计算总价
			setTotal(item){
				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.partList.splice(index,1);
			},
			tosubmit(type){
			  var url;
			  if(type==0){//暂存
				  url="/apis/repairRecord/addRepairRecordTS"
			  }else if(type==1){//保存
				  url="/apis/repairRecord/addRepairRecord"
			  }
			  var json_= uni.getStorageSync('repairDealInfo').info;
			  json_.taglocationappearanceImage = uni.getStorageSync('repairDealInfo').imgsrc_list||[];
			  
			  var partIdArray=[];
			  var partList_=[];
			  for(var i=0;i<this.partList.length;i++){
				  partList_.push({
					  partId:this.partList[i].id,
					  amount:this.partList[i].amount,
					  content:"",
					  price:this.partList[i].price
				})
			  }
			  console.log(this.sparePartsCost)
			  json_.eventId=this.id;
			  json_.partIdArray=encodeURIComponent(JSON.stringify(partList_))
			  if(this.recordId){
				  json_.id=this.recordId;
			  }
			  var _this=this;
			  this.$http.request({
			  	url: url,
			  	params: json_,
			  }).then(res => {
			  	if (res.data.code == 0) {
					uni.removeStorageSync('repairDealInfo');
					this.setpartList([]);
					uni.showToast({
						    title: '操作成功',
						    duration: 	1000,
							icon:"none"
						});
					setTimeout(function(){
						// var text=type==0?"待处理":"待验收"
						// _this.$eventHub.$emit('changestate',{id:_this.id,state:text});
						// uni.navigateBack({
						// 	delta: 3
						// });
						//提交成功后写死跳转总还是有问题的。跳转到详情，我觉得没有问题，没必要非要跳转到列表。
						setTimeout(function(){
							uni.redirectTo({
							    url: 'repairDetail?id='+_this.id
							});
						},1000)
					},1000)
			  	}else{
					uni.showToast({
						    title:res.data.msg?res.data.msg:'操作失败',
						    duration: 	1000,
							icon:"none"
						});
				}
			  }).catch(err => {  
				  uni.showToast({
				  	    title: '提交失败',
				  	    duration: 1000,
				  		icon:"none"
				  	});
			  });
			  },
			toPrevious() {
				var _this = this;
				console.log(_this.sparePartsCost)
				//直接返回肯定有问题的。因此这边只能用跳转的方式了。
				// uni.navigateBack({});
				uni.navigateTo({
				    url: 'repairStep1?id='+_this.id+"&from=back"+"&sparePartsCost="+_this.sparePartsCost
				});
			},
			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: url
				//   });
			},
			
			//列表数据格式化
			formaterData(data) {
				var resData = [];
				data.forEach((vals, index) => {
					var combineJSON = {
						id: vals.id,
						title: vals.name,
						amount:1,//数量
						price:vals.salePrice,//单价
						titleNumber:"["+vals.serialNo+"]",
						checked:false,
						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
							}
						],
					}
					resData.push(combineJSON);
				});
				return resData;
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f7f5;
	}
</style>
<style scoped>
	.content {
		position: relative;
		min-height: 100%;
		overflow: auto;
		padding-bottom: 260upx;
		box-sizing: border-box;
	}

	.step_num {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 80upx;
		background-color: #fff;
		padding-right: 48upx;
		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: 60upx;
		height: 2upx;
		background-color: #000;
		top: 40upx;
		left: 200upx;
	}

	.step2 {
		margin-left: 64upx;
	}

	.step2:before {
		content: '2';
	}

	.step2:after{
		background-color: transparent;
	}
	
	.bottom_btn{
		position: absolute;
		left: 5%;
		bottom: 30upx;
		width: 90%;
		height: 82upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.next,.previous {
		width: 30%;
		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;
				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;
		}
		.itemtext{
			width: 60px !important;
		}
</style>
