<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" v-if="$hasPermissions('M_showCostPrice_mobile')">
				<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.stop="getDetail(item)">
					<view class="stockSearch-tit flex">
						<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>
						<view class="u-name">
							{{item.productName}}
						</view>
						<view class="u-last">
							<copyText :text="item.productName" label="产品名称"></copyText>
						</view>
					</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 || '--'}} <copyText :text="item.productCode" label="产品编码"></copyText></view>
							<view class="padding_3">原厂编码：{{item.productOrigCode && item.productOrigCode !== ' '? item.productOrigCode : '--'}}</view>
						</view>
					</view>
					<view class="stockSearch-item-footer flex align_center">
						<view class="font_13">
							可用库存数量
							<view>{{toThousands(item.currentStockQty||0)}}{{item.productUnit}}</view>
						</view>
						<view class="font_13" v-if="$hasPermissions('M_showCostPrice_mobile')">
							可用库存成本
							<view>￥{{toThousands(item.currentStockCost||0, 2)}}</view>
						</view>
						<view class="font_13">
							滞销天数
							<view>
								<span v-if="item.unsalableDays>=180&&item.unsalableDays<=360" style="color:#FF9900">{{ num(item.unsalableDays) }}</span>
								<span v-else-if="item.unsalableDays>360" style="color:#FF0000">{{ num(item.unsalableDays) }}</span>
								<span v-else >{{ num(item.unsalableDays) }}</span>
							</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'
	import copyText from '@/pages/common/copyText.vue'
	export default{
		components:{copyText},
		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: {
			// 格式化滞销天数为几个月零几天
			num (val) {
			  let days
			  if (val != null && val != undefined) {
			    if (val >= 30) {
			      const a = Math.floor(val / 30)
			      const b = val - a * 30
			      if (b > 0) {
			        days = a + '个月' + b + '天'
			      } else {
			        days = a + '个月'
			      }
			    } else {
			      days = val + '天'
			    }
			  } else {
			    days = '--'
			  }
			  return days
			},
			// 列表
			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="less">
	.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;
			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: 25upx;
					border-radius: 20upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					&:first-child{
						margin-top: 0;
					}
					.stockSearch-tit{
						padding-bottom: 20upx;
						border-bottom: 1px solid #e4e7ed;
						font-weight: 900;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						.u-line{
							display: inline-block;
							width: 6upx;
							height: 30upx;
							margin: 6upx 10upx 0 10upx;
							border-radius: 5upx;
						}
						.u-name{
							flex-grow: 1;
							width: 80%;
						}
						.u-last{
							width: 100upx;
							text-align: center;
						}
					}
					.stockSearch-item-con{
						padding: 20upx;
						font-size: 28upx;
						.pimgs{
							margin-right: 16upx;
						}
						.padding_3{
							padding: 6upx 0;
							word-break: break-all;
						}
					}
					.stockSearch-item-footer{
						border-top: 2upx solid #eee;
						.font_13{
							width: 33%;
							font-size: 26upx;
							text-align: center;
							border-left: 2upx solid #eee;
							padding-top: 20upx;
							&:first-child{
								border: 0;
							}
						}
					}
				}
			}
			
			
		}
	}
</style>
