<template>
	<view class="st-detailList-wrap">
		<view class="panel-box">
			<view class="type-box">
				<u-subsection @change="sectionChange" mode="subsection" height="60" :list="list" :current="curNow" :active-color="$config('primaryColor')"></u-subsection>
			</view>
			<view class="st-detailList-info">
				<view class="st-detailList-tit">
					<!-- <view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view> -->
					{{stockInfo&&stockInfo.productName || '--'}}
				</view>
				<view class="st-detailList-info-con flex align_center">
					<view class="pimgs">
						<u-image :src="stockInfo&&stockInfo.productMsg||`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
					</view>
					<view class="flex_1">
						<view>产品编码：{{stockInfo&&stockInfo.productCode || '--'}}</view>
						<view class="padding_3">原厂编码：{{stockInfo&&stockInfo.productOrigCode || '--'}}</view>
						<view class="flex align_center justify_between">
							<view class="font_13">
								可用总数量：{{toThousands(stockInfo&&stockInfo.currentStockQty||0)}}{{stockInfo&&stockInfo.productUnit||''}}
							</view>
							<view class="font_13" v-if="$hasPermissions('M_showCostPrice_mobile')">
								可用总成本：
								￥{{toThousands(stockInfo&&stockInfo.currentStockCost||0, 2)}}
							</view>
						</view>
						<view class="flex align_center justify_between">
							<view class="font_13">
								冻结总数量：{{toThousands(stockInfo&&stockInfo.freezeQty||0)}}{{stockInfo&&stockInfo.productUnit||''}}
							</view>
							<view class="font_13" v-if="$hasPermissions('M_showCostPrice_mobile')">
								冻结总成本：
								￥{{toThousands(stockInfo&&stockInfo.freezeCost||0, 2)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 查询结果 -->
		<scroll-view class="st-detailList-con" scroll-y @scrolltolower="onreachBottom">
			<view class="st-detailList-main">
				<!-- 库存详情 -->
				<view v-if="curNow==0" class="st-detailList-main-item flex align_center" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
					<view>
						<view class="flex align_center justify_between margin-b20">
							<view :style="{color: $config('infoColor')}">{{item.putTime || '--'}}</view>
							<u-tag v-if="item.putBizTypeDictValue" :text="item.putBizTypeDictValue" :border-color="$config('primaryColor')" shape="circle" size="mini" />
						</view>
						<view class="flex align_center justify_between">
							<view v-if="item.warehouseName || item.warehouseLocationName">{{item.warehouseName}} > {{item.warehouseLocationName}}</view>
							<view v-else>--</view>
							<view><text v-if="$hasPermissions('M_showCostPrice_mobile')">￥{{toThousands(item.putCost||0, 2)}} * {{toThousands(item.currentQty||0)}}</text><text v-else>{{toThousands(item.currentQty||0)}}</text>{{item.unit}}</view>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
				</view>
				<!-- 出入库明细 -->
				<view v-if="curNow==1" class="st-detailList-main-item flex align_center" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
					<view>
						<view class="flex align_center justify_between margin-b20">
							<view :style="{color: $config('infoColor')}">{{item.auditTime || '--'}}</view>
							<u-tag v-if="item.bizTypeDictValue" :text="item.bizTypeDictValue" :border-color="$config('primaryColor')" shape="circle" size="mini" />
						</view>
						<view class="flex align_center justify_between">
							<view>
							<text v-if="item.unitType&&item.unitType=='CUSTOMER'">{{ item.unitNameCurrent||'--' }}</text>
							<text v-else>{{ item.unitName||'--' }}</text>
							</view>
							<view>
								<view :style="{color: item.qty && item.qty!=0 ? (item.flowType=='PUT' ? 'green':'red'):'', display:'inline-block'}"><text v-if="item.qty && item.qty!=0">{{ item.flowType=='PUT' ? '+':'-' }}</text>{{ toThousands(item.qty||0) }}</view>
								{{item.product && item.product.unit}}
							</view>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
					</view>
				</view>
				<view v-if="listData && listData.length == 0">
					<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { toThousands } from '@/libs/tools'
	import { stockDetailList, stockFlowList } from '@/api/stock'
	export default{
		data(){
			return {
				list: [
					{ name: '库存详情' },
					{ name: '出入库明细' }
				],
				totalData: null,
				totalNum: 0,
				listData: [],
				pageNo: 1,
				pageSize: 10,
				stockInfo: null,
				noDataText: '暂无数据',
				curNow: 0,
				theme: '',
				toThousands
			}
		},
		onLoad(option) {
			this.theme = getApp().globalData.theme
			this.stockInfo = option.data ? JSON.parse(option.data) : null
			this.getList()
		},
		methods: {
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {}
				let url = stockDetailList
				if(this.curNow == 0){  // 库存详情
					url = stockDetailList
					params = {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						stockSn: this.stockInfo && this.stockInfo.stockSn || '',
						isSellOut: '0'
					}
				}else if(this.curNow == 1){  // 出入库明细
					url = stockFlowList
					params = {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						productSn: this.stockInfo && this.stockInfo.productSn || ''
					}
				}
				url(params).then(res => {
					if (res.status == 200) {
						if(res.data && res.data.list){
							if(this.curNow == 1){  // 出入库明细
								res.data.list.map(item => {
									if(item.flowType == 'PUT'){
										item.qty = item.putQty || 0
									}else if(item.flowType == 'OUT'){
										item.qty = item.outQty || 0
									}
								})
							}
							if(this.pageNo>1){
								this.listData = this.listData.concat(res.data && res.data.list || [])
							}else{
								this.listData = res.data.list || []
							}
						}else{
							this.listData = []
						}
						this.totalNum = res.data && 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()
				}
			},
			// 详情
			getDetail(data){
				if(this.curNow == 0){  // 库存详情
					uni.navigateTo({ url: "/pages/stock/stockDetail?productData="+JSON.stringify(this.stockInfo)+"&data="+JSON.stringify(data) })
				}else if(this.curNow == 1){  // 出入库明细
					uni.navigateTo({ url: "/pages/stock/warehouseDetail?productData="+JSON.stringify(this.stockInfo)+"&data="+JSON.stringify(data) })
				}
			},
			sectionChange(index) {
				this.curNow = index
				this.getList(1)
			}
		}
	}
</script>

<style lang="less">
	.st-detailList-wrap{
		width: 100%;
		height: 100vh;
		.panel-box {
			background-color: #ffffff;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-bottom: 20upx;
			.type-box{
				margin: 0 auto 20upx;
				width: 65%;
			}
			.st-detailList-info{
				background: #ffffff;
				padding: 20upx;
				margin-bottom: 25upx;
				border-radius: 25upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				.st-detailList-tit{
					padding-bottom: 20upx;
					border-bottom: 1px solid #e4e7ed;
					font-weight: bold;
					.u-line{
						display: inline-block;
						width: 6upx;
						height: 40upx;
						background-color: red;
						vertical-align: bottom;
						margin: 0 20upx 0 10upx;
					}
				}
				.st-detailList-info-con{
					padding: 20upx 20upx 6upx;
					font-size: 26upx;
					.pimgs{
						margin-right: 16upx;
					}
					.font_13{
						font-size: 26upx;
					}
					.padding_3{
						padding: 6upx 0;
					}
				}
			}
		}
		.st-detailList-con{
			height: calc(100vh - 370upx);
			.st-detailList-main{
				.st-detailList-main-item{
					background-color: #fff;
					margin: 0 20upx 10upx;
					border-radius: 15upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					padding: 20upx 20upx;
					.margin-b20{
						margin-bottom: 20upx;
					}
					> view{
						&:first-child{
							flex-grow: 1;
						}
						&:last-child{
							padding: 0 0 0 20upx;
						}
					}
				}
			}
			
		}
	}
</style>
