<template>
	<view class="container">
		<view class="tui-order-item boxbg">
			<view class="shop-box" v-if="type==0" v-for="(item,index) in list" :key="index">
				<view style="padding-left: 20rpx;margin: 40rpx 0; font-weight: bold;font-size: 36rpx;">
					<text>日期:{{item.createTime}}</text>
					<text style="display: inline-block;padding-left: 20rpx;">操作人:{{item.createByName}}</text>
				</view>
				<view style="text-align: center;margin-bottom:20rpx;">
					<text>客户:{{item.userName}}</text>
					<text style="padding: 0 20rpx;">总数量:{{item.productCount}}</text>
					<text style="padding: 0 20rpx;" v-if="userType == 0">利润:{{item.lirun.toFixed(2)}}</text>
				</view>
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr style="background: #eee;">
						<!-- <uni-th align="center" width="100">货号(名称)</uni-th> -->
						<uni-th align="center">规格</uni-th>
						<uni-th align="center" width="55">数量</uni-th>
						<uni-th align="center" width="70">销售价</uni-th>
						<uni-th align="center" width="80">采购价</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(items,index1) in item.saleDetailDTOList" :key="index1">
						<uni-td align="center">{{items.stockLogList1[0].attributeList | sliceMsg}}</uni-td>
						<!-- <uni-td>米黄色 | XXXL码</uni-td> -->
						<uni-td align="center">{{items.stockLogList1[0].productCount}}</uni-td>
						<uni-td align="center">{{items.discountAmount}}</uni-td>
						<uni-td align="center">{{userType == 0?items.purchasePrice:0}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="shop-box" v-if="type==1" v-for="(item,index3) in list" :key="index3">
				<!-- <uni-card :title="'供应商：'+ (item.purchase.supplierName?item.purchase.supplierName:'暂无')"
						:sub-title="item.purchase.createTime?item.purchase.createTime:'暂无'" >
					<view class="uni-body" style="text-align: center;"><text v-if="userType==0">采购价：{{item.purchaseDetails[0].purchasePrice?item.purchaseDetails[0].purchasePrice:'暂无'}}</text> 总数量：{{item.purchase.totalAmount?item.purchase.totalAmount:'暂无'}}</view>
					<view style="margin: 5px 0;height: 1px;background: #eee;"></view>
					<view style="display: flex;border-bottom: 1px solid #eee;height: 50rpx;line-height: 50rpx;">
						<view style="width: 49%;text-align: center;border-right: 1px solid #eee;">商品规格</view>
						<view style="width: 50%;text-align: center;">总数量</view>
					</view>
					<view v-for="(items,index1) in item.purchaseDetails" :key="index1">
						<view v-for="(data,index2) in items.stockLogList1" :key="index2" style='height: 50rpx;line-height: 50rpx;'>
							<view style="width: 49%;text-align: center;border-right: 1px solid #eee;float: left;">
								{{data.attributeList | sliceMsg}}
							</view>
							<view style="width: 50%;text-align: center;float: left;">
								{{data.productCount}}
							</view> 
						</view>
					</view>
				</uni-card> -->
				<view style="padding-left: 20rpx;margin: 40rpx 0; font-weight: bold;font-size: 36rpx;">
					<text>日期:{{item.purchase.createTime}}</text>
					<text style="display: inline-block;padding-left: 20rpx;">操作人:{{item.purchase.createByName}}</text>
				</view>
				<view style="text-align: center;margin-bottom:20rpx;">
					<text>供应商:{{item.purchase.supplierName}}</text>
					<text style="padding: 0 20rpx;" v-if="userType == 0">采购价:{{item.purchaseDetails[0].purchasePrice}}</text>
					<text style="padding: 0 20rpx;">总数量:{{item.purchase.totalAmount}}</text>
				</view>
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr style="background: #eee;">
						<!-- <uni-th align="center" width="100">货号(名称)</uni-th> -->
						<uni-th align="center">规格</uni-th>
						<uni-th align="center" width="55">数量</uni-th>
						<uni-th align="center" width="70">销售价</uni-th>
						<uni-th align="center" width="80">采购价</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(items,index1) in item.purchaseDetails" :key="index1">
						<uni-td align="center">{{items.stockLogList1[0].attributeList | sliceMsg}}</uni-td>
						<!-- <uni-td>米黄色 | XXXL码</uni-td> -->
						<uni-td align="center">{{items.stockLogList1[0].productCount}}</uni-td>
						<uni-td align="center">{{items.discountAmount}}</uni-td>
						<uni-td align="center">{{userType == 0?items.purchasePrice:0}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				status: 'loadmore',
				pages: 1,
				pageNum: 1,
				productId:'',
				type:'',
				userType:''
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			}
		},
		onLoad(option) {
			this.productId = option.id
			this.userType = uni.getStorageSync('type')
			this.type = option.type
			this.getWaitStorage()
		},
		onReachBottom() {
			if (this.pages >= this.pageNum) return;
			this.status = 'loading';
			this.pages = ++this.pages;
			this.getWaitStorage();
		},
		methods: {
			getWaitStorage(id) {
				this.status = 'loading';
				var url;
				if(this.type==0){ //销售
					url = "/app/sale/getSaleListByProductId"
				}else{ //入库
					url = "/app/purchase/getPurchaseListByProductId"
				}
				this.tui.request(url, "post", {
					productId: this.productId,
					pageSize: 10,
					pageNum: this.pageNum
				}, false, false).then((res) => {
					this.status = 'nomore';
					if (res.code == 200) {
						// this.list = res.result.records
						if (this.pages == 1) {
							this.list = res.result.records
						} else {
							this.list = [...this.list, ...res.result.records]
							
						}
						for(let i=0;i<this.list.length;i++){
							this.list[i].productCount = 0
							this.list[i].lirun = 0
							for(let m=0;m<this.list[i].saleDetailDTOList.length;m++){
								this.list[i].lirun += (this.list[i].saleDetailDTOList[m].discountAmount - this.list[i].saleDetailDTOList[m].purchasePrice) * this.list[i].saleDetailDTOList[m].stockLogList1[0].productCount
								this.list[i].productCount += this.list[i].saleDetailDTOList[m].stockLogList1[0].productCount
							}
						}
						this.pageNum = res.result.pages
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		},
	}
</script>

<style lang="scss">
	.uni-card__header-box{
		text-align: center !important;
	}
	.uni-card__header-content-title{
		font-weight: bold;
	}
	.container {
		padding-bottom: 118rpx;

		.boxbg {
			padding-top: 10rpx;
			background-color: #fff;
		}

		.tui-order-item {
			.u-collapse-content {
				display: flex;
				justify-content: space-between;
				line-height: 30px;
			}


			.tui-goods-info {
				width: 100%;
				box-sizing: border-box;
				background: #fff;
				line-height: 26px;
				border-top: 10px solid #eee;

				.tui-price-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.tui-size32 {
					font-size: 32rpx;
					font-weight: 500;
				}

				.tui-size-24 {
					font-size: 24rpx;
				}

				.tui-price-large {
					font-size: 32rpx;
					.lineText {
						text-decoration: line-through;
						font-size: 12px;
						color: #888;
					}
				}

				.tui-flex-shrink {
					flex-shrink: 0;
				}

				.tui-goods-price {
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: flex-end;
					font-size: 24rpx;
				}

				.tui-primary-color {
					color: #EB0909;
				}

				.tui-pbtm20 {
					padding-bottom: 20rpx;
				}

			}
		}
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		width:130rpx;
		height: 60rpx;
		background: #088FEB;
		color: #fff;
		border-radius: 10px;
		line-height: 60rpx;
		text-align: center;
		margin-right: 30rpx;
	}
	.shop-box {
		margin: 0 auto;
		position: relative;
	}
	.shop-name {
		width: 100%;
		height: 200rpx;
		line-height: 80rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		.uni-icons {
			color: #088FEB !important;
		}
	}
	
	.shop-productName {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}
	
	.shop-productName view {
		height: 55rpx;
	}
	
	.shop-collapse {
		display: flex;
		height: 80rpx;
		font-size: 26rpx;
		line-height: 80rpx;
	}
	
	.shop-collapse text {
		flex: 1;
		text-align: center;
		padding-right: 40rpx;
		border-right: 1px solid #eee;
	}
	.content-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		height: 80rpx;
		border-bottom: 1px solid #eee;
	}
	
	.content-list:last-child {
		border-bottom: none;
		height: auto;
	}
	
	.list-name {
		width: 200rpx;
		text-align: left;
		line-height: 40px;
		height: 80rpx;
		padding-left: 20rpx;
	}
	
	.list-val {
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.list-val input {
		width: 400rpx;
		height: 60rpx;
		display: inline-block;
		line-height: 60rpx;
		float: left;
		margin-top: 10rpx;
		padding-left: 20rpx;
		border-bottom: 1px solid #088FEB;
	}
	textarea {
		margin: 20rpx;
		border: 1px solid #eee;
		height: 150rpx;
		width: 500rpx;
	}
</style>