<template>
	<block>
		<view class="nav-right-item flex" v-for="item in list" :key="item.productSn">
			<view class="uni-col-2">
				<u-image :src="item.images+'?x-oss-process=image/resize,m_fixed,h_60,w_60,color_ffffff'" @click="viewImg(item)" border-radius="30" width="100" height="100" 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="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">
								<button @click="addPart(item)" v-if="!item.checked" :style="{width:'48rpx',height:'48rpx',background:'#066cff',borderRadius:'50px',padding:0,border:'none'}" type="primary" size="mini">
									<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>
								</button>
								<uni-number-box v-else @change="e=>updateVinNums(e,item.productSn)" v-model="item.qty" :min="0" :max="item.currentInven"></uni-number-box>
							</view>
							<view class="item-detail-text" v-if="item.affiliation=='NON_SHELF'||!item.currentInven">
								<text v-if="!item.checked" @click="addPart(item)" class="phtxt">我要急送</text>
								<uni-number-box v-else @change="e=>updateVinNums(e,item.productSn)" v-model="item.qty" :min="0"></uni-number-box>
							</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(item) {
				this.$emit('addPart', item, 'vin')
			},
			updateVinNums(value,id) {
				this.$emit('updateVinNums', {value:value,index:id})
			},
			viewImg(item){
				this.$emit('viewImg',item)
			}
		}
	}
</script>

<style lang="less">
	@import '/flex.css';
	.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>