<template>
	<view class="stockSearch-wrap">
		<!-- 统计 -->
		<view class="panel-box">
			<view class="item-box">
				<view>查询结果</view>
				<u-count-to :end-val="totalNum ? totalNum : 0" separator="," font-size="30"></u-count-to>条
			</view>
			<view class="item-box">
				<view>可用库存数量</view>
				<u-count-to :end-val="totalData&&totalData.totalCurrentStockQty ? totalData.totalCurrentStockQty : 0" separator="," font-size="30"></u-count-to>个
			</view>
			<view class="item-box">
				<view>可用库存成本</view>
				￥<u-count-to :end-val="totalData&&totalData.totalCurrentStockCost ? totalData.totalCurrentStockCost : 0" separator="," font-size="30" :decimals="2"></u-count-to>
			</view>
		</view>
		<!-- 查询结果 -->
		<scroll-view class="stockSearch-con" scroll-y @scrolltolower="onreachBottom">
			<view class="stockSearch-main">
				<view class="stockSearch-main-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
					<view class="stockSearch-tit">
						<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.productName}}
					</view>
					<view class="stockSearch-item-con flex align_center">
						<view class="pimgs">
							<u-image :src="item.product&&item.product.productMsg?item.product.productMsg:`../../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">原厂编码：{{item.productOrigCode || '--'}}</view>
							<view class="flex align_center justify_between">
								<view class="font_13">
									可用数量：
									<u-count-to :end-val="item.currentStockQty ? item.currentStockQty : 0" separator="," font-size="26"></u-count-to>{{item.productUnit}}
								</view>
								<view class="font_13">
									库存成本：
									￥<u-count-to :end-val="item.currentStockCost ? item.currentStockCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
								</view>
							</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>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { stockList, stockCount } from '@/api/stock'
	export default{
		data(){
			return {
				totalData: null,
				totalNum: 0,
				listData: [],
				pageNo: 1,
				pageSize: 6,
				params: {},
				noDataText: '暂无数据',
				theme: ''
			}
		},
		onLoad(option) {
			this.theme = getApp().globalData.theme
			this.params = option.data ? JSON.parse(option.data) : {}
			this.getList()
		},
		methods: {
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize })
				stockList(params).then(res => {
					this.getTotal(params)
					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
					}
				})
			},
			// 合计
			getTotal (params) {
				stockCount(params).then(res => {
					if (res.status == 200 && res.data) {
						this.totalData = res.data
					} else {
						this.totalData = null
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			// 详情
			getDetail(data){
				uni.navigateTo({ url: "/pages/stock/detaiList?data="+JSON.stringify(data) })
			}
		}
	}
</script>

<style lang="scss">
	.stockSearch-wrap{
		width: 100%;
		height: 100vh;
		.panel-box {
			background-color: #ffffff;
			padding: 20upx 0;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-bottom: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-box{
				text-align: center;
				width: 33.33%;
				border-right: 1px solid #e4e7ed;
			}
			.item-box:last-child{
				border-right: none;
			}
		}
		.stockSearch-con{
			height: calc(100vh - 138upx);
			.stockSearch-main{
				.stockSearch-main-item{
					background: #ffffff;
					padding: 20upx;
					margin-bottom: 25upx;
					border-radius: 25upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					.stockSearch-tit{
						padding-bottom: 20upx;
						border-bottom: 1px solid #e4e7ed;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						.u-line{
							display: inline-block;
							width: 6upx;
							height: 40upx;
							background-color: red;
							vertical-align: bottom;
							margin: 0 20upx 0 10upx;
						}
					}
					.stockSearch-item-con{
						padding: 20upx 20upx 6upx;
						font-size: 26upx;
						.pimgs{
							margin-right: 16upx;
						}
						.font_13{
							font-size: 26upx;
						}
						.padding_3{
							padding: 6upx 0;
						}
					}
				}
			}
			
			
		}
	}
</style>
