<template>
	<block>
		<view class="nav-right-item flex" v-for="item in list" :key="item.productSn">
			<view class="uni-col-2">
				<image
				:src="item.images ? item.images+'?x-oss-process=image/resize,m_fixed,h_60,w_60,color_ffffff' : '/static/def_imgs.png'" 
				@click="viewImg(item)" 
				style="width:100rpx;height:100rpx;border-radius: 30rpx;background-color: #EBEBEB;"
				>
				</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="flex align_center">
								<text class="item-detail-text flex_1">{{item.code}}</text>
								<uni-tag v-if="commonPartCode.includes(item.code)" size="small" style="margin-left: 5px;" text="通用" :circle="true" type="success"></uni-tag>
							</view>
							<text class="item-detail-text" style="width: 50%;text-align: right;" v-if="item.affiliation=='SHELF'">库存：{{item.currentInven?item.currentInven:0}} {{item.unit}}</text>
						</view>
						<view class="flex" v-if="item.productTypeSn=='543766811373752320'">
							<uni-tag :text="item.origCode" inverted :circle="true" type="success"></uni-tag>
						</view>
						<view class="flex justify_between">
							<view class="item-detail-text">
								<!-- 货架产品 -->
								<view class="flex align_center" @click="openPriceModal(item,1,showShelfDetial)" v-if="item.affiliation=='SHELF'">
									<view class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice&&configPrice&&configPrice.shelf_price_show == '1'">{{item.price?'￥'+item.price:'暂无价格'}}</view>
									<view class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice&&configPrice&&configPrice.shelf_cost_show == '1'">{{item.cost?'￥'+item.cost:'暂无价格'}}</view>
									<uni-icons type="arrowright" color="#00aaff" size="12" v-if="priceShowVal&&showShelfDetial"></uni-icons>
								</view>
								<!-- 非货架 -->
								<view class="flex align_center" @click="openPriceModal(item,1,showNonShelfDetial)" v-else>
									<view class="item-price" :style="{color:!item.price?'#666':''}" v-if="showCarPrice&&configPrice&&configPrice.non_shelf_price_show == '1'">{{item.price?'￥'+item.price:'暂无价格'}}</view>
									<view class="item-price" :style="{color:!item.cost?'#666':''}" v-if="showCostPrice&&configPrice&&configPrice.non_shelf_cost_show == '1'">{{item.cost?'￥'+item.cost:'暂无价格'}}</view>
									<uni-icons type="arrowright" color="#00aaff" size="12" v-if="priceShowVal&&showNonShelfDetial"></uni-icons>
								</view>
							</view>
							<view class="item-detail-text" v-if="item.currentInven">
								<view
								class="qty-btn flex align_center justify_center"
								@click="e=>{addPart(e,item)}" 
								v-if="!item.checked"
								>+</view>
								<view class="flex align_center qty-box" v-else>
									<view class="qty-btn" @click="e=>{changeQty(null,item.qty-1,item,1)}" :class="(item.qty <= 0)?'qty-disabled':''">-</view>
									<view class="qty-num" :style="{width:Number(item.qty).toString().length*8+8+'px'}"><input type="number" @blur="e=>changeQty(null,Number(e.detail.value),item,0)" :value="item.qty"/></view>
									<view class="qty-btn" @click="e=>{changeQty(e,item.qty+1,item,1)}" :class="(item.qty >= item.currentInven)?'qty-disabled':''">+</view>
								</view>
							</view>
							<view class="item-detail-text" v-if="item.affiliation=='NON_SHELF'||!item.currentInven">
								<text v-if="!item.checked" @click="e=>{addPart(e,item)}" class="phtxt">我要急送</text>
								<view class="flex align_center qty-box" v-else>
									<view class="qty-btn" @click="e=>{changeQty(null,item.qty-1,item,1)}" :class="(item.qty <= 0)?'qty-disabled':''">-</view>
									<view class="qty-num" :style="{width:Number(item.qty).toString().length*8+8+'px'}"><input type="number" @blur="e=>changeQty(null,Number(e.detail.value),item,0)" :value="item.qty"/></view>
									<view class="qty-btn" @click="e=>{changeQty(e,item.qty+1,item,1)}" :class="(item.qty >= 999)?'qty-disabled':''">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</block>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			commonPartCode: {
				type: Array,
				default: () => {
					return []
				}
			},
			configPrice: {
				type: Object,
				default: () => {
					return {}
				}
			},
			showCarPrice: {
				type: Boolean,
				default: false
			},
			showCostPrice: {
				type: Boolean,
				default: false
			},
			showShelfDetial: {
				type: Boolean,
				default: false
			},
			showNonShelfDetial: {
				type: Boolean,
				default: false
			},
			priceShowVal: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
			}
		},
		methods: {
			openPriceModal(item, type, show) {
				this.$emit('openPrice', item, type, show)
			},
			addPart(e,item) {
				this.$emit('addPart', e, item, 'vin')
			},
			changeQty(event,value,item,type) {
				const max = item.currentInven || 999
				const v = value > max ? max : value
				if(value > max && type == 0){
					this.updateNums(event,value,item.productSn)
					this.$nextTick(()=>{
						this.updateNums(event,v,item.productSn)
					})
				}else{
					this.updateNums(value > max ? null : event,v,item.productSn)
				}
			},
			updateNums(event,value, id) {
				this.$emit('updateVinNums', {
					value: Number(value),
					index: id,
					event:event
				})
			},
			viewImg(item){
				if(item.images){
					this.$emit('viewImg',item)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '/flex.css';
	.qty-box{
		display: flex;
		.qty-num{
			width: 25px;
			height: 22px;
			line-height: 22px;
			padding:0 3px;
			input{
				width: 100%;
				height: 100%;
				text-align: center;
				color: #333;
			}
		}
	}
	.qty-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50px;
		font-size: 18px;
		background-color: #066cff;
		color: #fff;
		&.qty-disabled{
			background-color: #c0c0c0;
		}
	}
	.nav-right-item{
		padding: 15upx 25upx;
		border-bottom: 2rpx solid #f5f5f5;
		.uni-col-2{
			width: 50px;
		}
		.item-info{
			padding-left: 10upx;
			width: 80%;
			flex-grow: 1;
			.item-name{
				font-size: 30upx;
				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;
					/deep/ .uni-tag{
						word-break: break-all;
						font-size: 28rpx;
						color: #0fab04eee;
						border: 0;
						padding: 0.2rem 0.3rem;
					}
					> 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;
							}
						}
					}
				}
			}
		}
	}
</style>