<template>
	<view class="temproaryPages flex flex_column">
		<view class="temproary-head">
			<view>经销商：{{$store.state.vuex_storeShelf.dealerName}}</view>
			<view class="notes">具体的临配价格请与配件经销商沟通确认</view>
		</view>
		<view class="temproary-body">
			<div class="cpb_cart-box flex flex_column">
				<div class="cpb_cart-tit">
					<div class="flex align_center">
						<span class="line"></span>
						<span>选择配件</span>
					</div>
					<div class="add" @click="morePart">添加更多临配配件</div>
				</div>
				<div class="cpb_cart-list">
					<view class="nav-right-item flex" v-for="(item, index) in partList" :key="item.id">
						<view class="uni-col-2">
							<u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_120,w_120,color_ffffff'" @click="viewImg(item)" border-radius="30" width="120" height="120" bg-color="#EBEBEB" ></u-image>
						</view>
						<view class="item-info uni-col-10">
							<view class="item-name">
								<text>{{item.name}}</text>
							</view>
							<view class="item-detail">
								<view class="item-detail-info">
									<view class="flex justify_between">
										<view class="item-detail-text flex_1">
											<text class="item-detail-text">{{item.code}}</text>
										</view>
										<view class="item-detail-text">
											<u-number-box v-model="item.qty" @change="numberChange" :index="'cart_'+item.productSn" :min="0"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</div>
			</div>
		</view>
		<view class="temproary-footer">
			<u-button type="primary" @click="submitForm" :custom-style="{background:'#1283d4',fontSize:'32rpx'}" shape="circle">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	import { shelfTemporarySave } from '@/api/shelf.js'
	export default {
		data() {
			return {
				vinNumber: '',
				dealerPhone: ''
			}
		},
		computed: {
			partList() {
				return this.$store.state.vuex_shelfChoosePart
			}
		},
		onLoad(option) {
			this.vinNumber = option.vinNumber
		},
		onReady() {
			const shelfInfo = this.$store.state.vuex_storeShelf
			this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			if(this.dealerPhone==''){
				webView.setTitleNViewButtonStyle(0,{text:"",color:"#FFFFFF"}); 
			}
			// #endif
		},
		// 点击导航栏按钮
		onNavigationBarButtonTap() {
			if(this.dealerPhone!=''){
				uni.makePhoneCall({
					phoneNumber: this.dealerPhone
				})
			}
		},
		methods: {
			viewImg(item){
				uni.previewImage({
					urls: [item.images]
				})
			},
			numberChange(e){
				console.log(e)
				const rowIndex = this.partList.findIndex(item => 'cart_'+item.productSn == e.index)
				if(e.value == 0){
					this.partList.splice(rowIndex,1)
				}
			},
			formatData(){
				let ret = []
				this.partList.map(item => {
						ret.push({
						 "productSn" : item.productSn,
						 "price": item.cost,
						 "qty":item.qty
						})
				})
				return ret
			},
			// 更多配件
			morePart(){
				uni.navigateTo({
					url:"/pages/digitalShelf/temproaryStockIn/moreShelfProduct?vinNumber="+this.vinNumber
				})
			},
			// 确认提交
			submitForm(){
				if(this.partList.length){
					shelfTemporarySave({
					 "temporaryDispatchingBillDetailApiEntityList": this.formatData()
					}).then(res => {
						uni.showToast({icon: 'none',title: res.message})
						if(res.status == 200){
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}
					})
				}else{
					uni.showToast({icon: 'none',title: "请选择配件"})
				}
			}
		}
	}
</script>

<style lang="less">
.temproaryPages{
	height: 100vh;
	.temproary-head{
		background-color: #fff;
		padding: 20rpx;
		font-size: 32rpx;
		.notes{
			font-size: 30rpx;
			color: #FF9528;
		}
	}
	.temproary-footer{
		background-color: #fff;
		padding: 20rpx 10%;
	}
	.temproary-body{
		flex-grow: 1;
	}
	.nav-right-item{
		background-color: #fff;
		padding: 15upx 25upx;
		border-bottom: 2rpx solid #f5f5f5;
		.item-info{
			padding-left: 20upx;
			.item-name{
				font-size: 32upx;
				color: #191919;
				display: flex;
				align-items: center;
				>image{
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
				}
				>text{
					flex: 1;
					word-break: break-all;
				}
			}
			.item-detail{
				.item-detail-info{
					padding: 10upx 0 4upx;
					> view{
						padding-bottom: 10rpx;
						align-items: center;
						.item-detail-text{
							color: #999;
							.phtxt{
								color: #0485F6;
								font-size: 28upx;
							}
							.item-price{
								color: #FB1E1E;
								font-size: 28upx;
							}
						}
					}
				}
			}
		}
	}
	.cpb_cart-box{
		width: 100%;
		padding: 20rpx 0 0;
		font-size: 32rpx;
		height: 100%;
		.cpb_cart-tit{
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			.add{
				color: #0485F6;
			}
			.line{
				width: 8rpx;
				height: 34rpx;
				background-color: #0485F6;
				border-radius: 6rpx;
				margin-right: 15rpx;
			}
		}
		.cpb_cart-list{
			flex-grow: 1;
			overflow: auto;
			.item-info{
				border-bottom:2rpx solid #f8f8f8;
			}
			.item-detail{
				.item-detail-info{
					padding: 10upx 0 4upx;
					> view{
						padding-bottom: 30rpx;
						align-items: center;
						.item-detail-text{
							color: #999;
							.phtxt{
								color: #0485F6;
								font-size: 28upx;
							}
							.item-price{
								color: #FB1E1E;
								font-size: 28upx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
