<template>
	<view class="content flex flex_column">
		<uni-nav-bar left-icon="arrowleft" title="按编码查询" @clickLeft="back" statusBar fixed></uni-nav-bar>
		<view class="check-list">
			<scroll-view scroll-y type="custom" class="scroll-view" @scrolltolower="onreachBottom">
				<sticky-header>
					<view class="searchBar">
						<uni-search-bar
						radius="100" 
						focus 
						cancelButton="none"
						placeholder="请输入产品编码搜索" 
						bg-color="#f3f3f3"
						@input="change"
						@confirm="search" 
						@blur="search"
						@clear="clearSearch"
						v-model="queryWord" 
						clearButton="auto"/>
					</view>
				</sticky-header>
				<view class="partList-list-box" v-for="item in partList" :key="item.id">
					<view class="product flex align_center" @click="toEdit(item)">
						<view class="flex align_center flex_1">
							<view class="pimgs">
								<u-image :src="item.images?item.images:`/static/def_imgs.png`" width="128" height="128" border-radius="10"></u-image>
							</view>
							<view class="pinfo">
								<view class="pname flex align_center justify_between">
									<view class="code"><text>{{item.shelfPlaceCode}}</text>{{item.code}}</view>
								</view>
								<view class="flex align_center" v-if="item.productTypeSn=='543766811373752320'&&item.origCode" style="padding-top: 5px;">
									<text class="item-detail-text">原厂编码：</text>
									<view style="width: 50%;flex-grow: 1;">
										<uni-tag :text="item.origCode" inverted :circle="true" type="warning"></uni-tag>
									</view>
								</view>
								<view class="ptxt">
									<view>
										<text class="pcode">{{item.name}}</text>
									</view>
								</view>
								<view class="pname flex align_center justify_between">
									<view class="pcode">
										<text class="item-price" v-if="showCarPrice">价格：{{item.price?'￥'+item.price:'暂无'}}</text>
										<text class="item-price" v-if="showCostPrice">价格：{{item.cost?'￥'+item.cost:'暂无'}}</text>
									</view>
									<view class="kc">库存：<text>{{item.currentInven}}</text>{{item.unit}}</view>
								</view>
							</view>
						</view>
						<view class="flex align_center justify_center">
							<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				<view style="padding: 20upx;">
					<sklineTemp v-if="partList.length==0 && status!='loading'" :text="noDataText"/>
					<uni-load-more v-if="(total>=partList.length&&partList.length)||status=='loading'" :status="status"/>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import sklineTemp from '@/components/skline/sklineTemp.vue'
	import { getShelfProductList,findShelfUserParam } from '@/api/shelf'
	export default {
		components:{
			sklineTemp
		},
		data() {
			return {
				queryWord: '',
				shelfName:'',
				shelfSn: '',
				pageNo:1,
				pageSize: 20,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'nomore',
				partList: [],
				priceShowVal: null, // 是否可以查看所有价格
				showCarPrice: false, // 显示车主价
				showCostPrice: false, // 显示成本价
			}
		},
		onLoad(opts) {
			this.shelfSn = this.$store.state.vuex_storeShelf.shelfSn
			uni.$on("updateQueryByCodeList",()=>{
				this.getpartList()
			})
			// 价格显示权限
			this.getShowPriceType()
		},
		computed: {
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			isAdmin(){
				return this.userInfo.superAdmin == 1
			}
		},
		onUnload() {
			uni.$off("updateQueryByCodeList")
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getShowPriceType(){
				findShelfUserParam({shelfSn: this.shelfSn}).then(res => {
					this.priceShowVal = res.data ? res.data.carOwnerPrice == '1' && res.data.purchasesPrice == '1' : false
					// 选中了2中价格，则从列表显示价格中取值
					if(this.priceShowVal){
						// 进货价
						this.showCostPrice = res.data.priceShowType == 'PURCHASES_PRICE'
						// 车主价
						this.showCarPrice = res.data.priceShowType == 'CAR_OWNER_PRICE'
					}else{
						// 进货价
						this.showCostPrice = res.data ? res.data.purchasesPrice == '1' : false
						// 车主价
						this.showCarPrice = res.data ? res.data.carOwnerPrice == '1' : false
					}
				})
			},
			//拿货
			toEdit(item){
				if(item.currentInven){
					const params = {
						shelfSn: this.shelfSn, 
						billSource: 'product_code',
						showPrice: this.showCarPrice ? item.price : (this.showCostPrice?item.cost:'')
					}
					this.$store.state.vuex_tempData = Object.assign(params, item)
					uni.navigateTo({
						url: '/pagesA/queryByCode/confirmQh'
					})
				}else{
					uni.showToast({
						icon:'none',
						title: '库存不足，不能拿货！',
						duration: 4000
					})
				}
			},
			change(v){
				if(v==''){
					this.clearSearch()
				}
			},
			clearSearch(){
				this.queryWord = ''
				this.pageNo = 1
				this.partList = []
			},
			search(){
				if(this.queryWord == ''){
					return
				}
				this.pageNo = 1
				this.partList = []
				this.getpartList()
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
				    pageNo: this.pageNo,
				    pageSize: this.pageSize,
					code: this.queryWord.trim(),
				}
				_this.status = 'loading'
				getShelfProductList(params).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						let list = res.data.list
						if (list && list.length){
							// 分页 拼接数据
							if (_this.pageNo != 1) {
								_this.partList = _this.partList ? _this.partList.concat(list) : list
							} else {
								_this.partList = list
							}
							this.total = res.data.count
							if (_this.partList.length == res.data.count) {
								_this.status = 'nomore'
							} else {
								_this.status = 'loadmore'
							}
						} else {
							_this.partList = list || []
							this.total = 0
							_this.status = 'nomore'
						}
						_this.noDataText = '暂无匹配产品'
					}else{
						_this.status = 'loadmore'
						_this.partList = []
						_this.total = 0
						_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
					this.showTab = false
				})
			},
			// 加载更多
			onreachBottom () {
				if(this.partList.length < this.total ){
					this.pageNo++
					this.getpartList()
				}else{
					this.status = "nomore"
				}
			},
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	padding: 0;
	background: #fff;
	.check-list{
		flex-grow: 1;
		background: #f8f8f8;
		.scroll-view{
			height: 100%;
			box-sizing: border-box;
			.searchBar{
				background-color: #fff;
			}
		}
		.partList-list-box{
			padding: 10rpx 20rpx;
			&:last-child{
				border:0;
			}
			.product{
				flex-grow: 1;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 1px 1px 3px #eee;
				&:active{
					opacity: 0.6;
					background-color: #f8f8f8;
				}
				.pinfo{
					flex-grow: 1;
					padding-left: 20rpx;
					width: 80%;
					::v-deep .uni-tag{
						word-break: break-all;
						font-size: 28rpx;
						color: #0fab04eee;
						border: 0;
						padding: 0.2rem 0.3rem;
					}
					.item-detail-text{
						color: #999;
					}
					.pname{
						font-size: 28rpx;
						color: #191919;
						.code{
							display: flex;
							align-items: center;
							text{
								font-weight: normal;
								margin-right: 6rpx;
								padding: 0 10rpx;
								background: rgba(3, 54, 146, 0.15);
								border-radius: 20rpx;
								color: #033692;
								font-size: 24rpx;
							}
						}
						.kc{
							display: flex;
							align-items: center;
							color: #999;
							text{
								color: #333;
							}
						}
					}
					.ptxt{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin: 10rpx 0;
						.pnums{
							color: #222;
						}
					}
				}
			}
		} 
	}
}
</style>
