<template>
	<view class="chooseProduct-wrap">
		<!-- 标题 -->
		<u-navbar title="选择产品" :safeAreaInsetTop="false" :border-bottom="true">
			<view class="u-nav-slot" slot="right" style="padding-right: 40rpx;">
				<u-icon name="search" color="#999" size="28" @click="openModal=true"></u-icon>查询
			</view>
		</u-navbar>
		<!-- 产品列表 -->
		<view class="product-list-box">
			<scroll-view class="product-list-con" :style="{height: scrollH+'upx'}" scroll-y @scrolltolower="onreachBottom">
				<view class="product-list-item font_13" v-for="(item, index) in listData" :key="item.id">
					<view class="list-item-tit">
						<view class="item-tit ellipsis-one" :style="{borderColor: $config('primaryColor')}">{{item.productName}}</view>
					</view>
					<view class="list-item-con flex align_center justify_between">
						<view class="pimgs">
							<u-image :src="item.productMainPic&&item.productMainPic.imageUrl?item.productMainPic.imageUrl:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="flex_1">
							<view>产品编码：{{item.productCode || '--'}}</view>
							<view class="padding_3 flex align_center justify_between">
								<view>原厂编码：{{item.productOrigCode || '--'}}</view>
								<u-icon name="plus-circle" :color="$config('primaryColor')" size="40" class="close-circle" @click="clearWarehouse"></u-icon>
							</view>
							<view v-if="item.warehouseName || item.warehouseLocationName">仓库仓位：{{item.warehouseName}} > {{item.warehouseLocationName}}</view>
						</view>
					</view>
					<view class="list-item-footer flex align_center justify_between">
						<view class="footer-item">
							<view>{{toThousands(item.currentQty||0)}}{{item.unit}}</view>
							<view class="color_6">库存数量</view>
						</view>
						<view class="footer-item">
							<view>
								<text :style="{color: $config('errorColor')}">{{toThousands((item.lastSalePrice ? item.lastSalePrice : item.salePrice)||0, 2)}}</text>
								<text v-if="item.origSalePriceFlag == 1">（原）</text>
							</view>
							<view class="color_6">参考售价</view>
						</view>
					</view>
				</view>
				<view v-if="listData && listData.length == 0">
					<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
				</view>
			</scroll-view>
		</view>
		<!-- 已选产品 -->
		<view ref="productTotal" class="selected-box flex align_center justify_between">
			<view class="choose-info flex_1 flex align_center justify_between" @click="lookProduct">
				<text>已选 3 款，合计 ￥96.00</text>
				<u-icon name="arrow-up" :color="$config('primaryColor')" size="34" class="close-circle"></u-icon>
			</view>
			<view class="choose-btn" @click="handleChoose" :style="{backgroundColor: $config('primaryColor')}">选好了</view>
		</view>
		<!-- 查询右侧弹框 -->
		<productSearch :openModal="openModal" :defaultParams="searchForm" @refresh="refresh" @close="openModal=false" />
	</view>
</template>

<script>
	import ProductSearch from './productSearch.vue'
	import { toThousands } from '@/libs/tools'
	import { querySumByProductLocation } from '@/api/stock'
	export default{
		components: { ProductSearch },
		data(){
			return{
				toThousands,
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				searchForm: {},
				searchParams: {},
				openModal: false,
				theme: '',
				chooseProductList: [],
				scrollH: 0,
			}
		},
		onLoad(opt) {
			this.theme = getApp().globalData.theme
			if(opt){
				this.chooseProductList = opt.data ? JSON.parse(opt.data) : null
			}
			console.log(this.chooseProductList)
			this.getList()
			
			const _this = this
			uni.getSystemInfo({
				success: function (res) {
					const winH = res.windowHeight * 2
					_this.scrollH = winH - 200
				}
			})
		},
		methods: {
			// 获取查询参数 刷新列表
			refresh(params){
				const _this = this
				this.searchParams = Object.assign(params, this.searchForm)
				this.getList(1)
			},
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				querySumByProductLocation(Object.assign(params, this.searchParams)).then(res => {
					if (res.status == 200) {
						if(this.pageNo>1){
							this.listData = this.listData.concat(res.data.list || [])
						}else{
							this.listData = res.data.list || []
						}
						this.totalNum = res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			// 选好了
			handleChoose(){},
			// 查看已选产品
			lookProduct(){
				
			}
		}
	}
</script>

<style lang="scss">
	.chooseProduct-wrap{
		width: 100%;
		position: relative;
		.padding_3{
			padding: 6upx 0;
		}
		.color_6{
			color: #666;
		}
		.product-list-box{
			padding: 20upx 20upx;
			.product-list-con{
				.product-list-item{
					background: #ffffff;
					padding: 20upx 20upx 0;
					margin-bottom: 25upx;
					border-radius: 25upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					.list-item-tit{
						padding-bottom: 12upx;
						border-bottom: 1px solid #e4e7ed;
						.item-tit{
							font-weight: bold;
							color: rgb(48, 49, 51);
							font-size: 28upx;
							padding-left: 10upx;
							border-left: 6upx solid #000;
							line-height: 1;
						}
					}
					.list-item-con{
						padding: 14upx 14upx 16upx;
						font-size: 26upx;
						.pimgs{
							margin-right: 16upx;
						}
					}
					.list-item-footer{
						border-top: 1px solid #e4e7ed;
						.footer-item{
							width: 50%;
							text-align: center;
							border-right: 1px solid #e4e7ed;
							font-size: 26upx;
							padding: 8upx 0 12upx;
						}
						.footer-item:last-child{
							border: none;
						}
					}
				}
			}
		}
		.selected-box{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 1px -1px 3px #EEEEEE;
			.choose-info{
				padding: 0 30upx;
			}
			.choose-btn{
				color: #fff;
				width: 28%;
				padding: 26upx 0;
				text-align: center;
			}
		}
	}
</style>