<template>
	<view class="stockSearch-wrap">
		<!-- 统计 -->
		<view class="panel-box">
			<view class="item-box">
				<view>查询结果</view>
				<view>{{toThousands(totalNum||0)}}条</view>
			</view>
			<view class="item-box">
				<view>可用库存数量</view>
				<view>{{toThousands(totalData&&totalData.totalCurrentStockQty||0)}}个</view>
			</view>
			<view class="item-box">
				<view>可用库存成本</view>
				<view>￥{{toThousands(totalData&&totalData.totalCurrentStockCost||0, 2)}}</view>
			</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.productMsg?item.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">
									可用数量：{{toThousands(item.currentStockQty||0)}}{{item.productUnit}}
								</view>
								<view class="font_13">
									库存成本：
									￥{{toThousands(item.currentStockCost||0, 2)}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="listData&&listData.length==0">
					<u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
				<view style="padding: 20upx;" v-if="totalNum>pageSize || status=='loading'">
					<u-loadmore :status="status" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { toThousands } from '@/libs/tools'
	import { stockList, stockCount } from '@/api/stock'
	export default{
		data(){
			return {
				totalData: null,
				totalNum: 0,
				status: 'loading',
				listData: [],
				pageNo: 1,
				pageSize: 50,
				params: {},
				noDataText: '暂无数据',
				theme: '',
				toThousands
			}
		},
		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
				}
				this.status = 'loading'
				let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize })
				stockList(params).then(res => {
					this.getTotal(params)
					if(res.status == 200){
						let list = res.data.list
						if (list && list.length){
							// 分页 拼接数据
							if (_this.pageNo != 1) {
								_this.listData = _this.listData ? _this.listData.concat(list) : list
							} else {
								_this.listData = list
							}
							this.totalNum = res.data.count
							if (_this.listData.length == res.data.count) {
								_this.status = 'nomore'
							} else {
								_this.status = 'loadmore'
							}
						} else {
							_this.listData = list || []
							this.totalNum = 0
							_this.status = 'nomore'
						}
						_this.noDataText = '暂无配件'
					}else{
						_this.status = 'loadmore'
						_this.listData = []
						_this.totalNum = 0
						_this.noDataText = res.message ? 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()
				}else{
					this.status = "nomore"
				}
			},
			// 详情
			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>
