<template>
	<view class="container">
		<uni-datetime-picker style="margin-bottom:10px;" v-model="range" type="daterange"
			@change="searchList" />
		<view class="tui-order-item boxbg">
			<view class="content">
					<view class="shop-box" v-for="(item,index) in list" :key="index"
						style="background: #fff;display: block;overflow: hidden;margin: 0 auto 10px;">
						<view>
							<view
								style="padding-left: 20rpx;margin: 40rpx 0; font-weight: bold;font-size: 36rpx;text-align: center;">
								<text>货号:{{item.productSn == null?'':item.productSn}}</text>
							</view>
							<view style="text-align: center;margin-bottom:20rpx;">
								<text>名称:{{item.productName == null?'':item.productName}}</text>
								<text
									style="padding: 0 20rpx;">总数量:{{item.productCount == undefined ?'0':item.productCount}}</text>
								<text style="padding: 0 20rpx;">采购价:{{item.customerBuySaleVoList[0].customerBuyProductDetailLogVos[0].purchasePrice == null ?'':item.customerBuySaleVoList[0].customerBuyProductDetailLogVos[0].purchasePrice}}</text>
							</view>
							<uni-table border stripe emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr style="background: #eee;">
									<uni-th align="center" width="100">日期</uni-th>
									<uni-th align="center" width="50">数量</uni-th>
									<uni-th align="center" width="70">单价</uni-th>
									<uni-th align="center" width="70">总价</uni-th>
									<uni-th align="center" width="70">利润</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item1,index1) in item.customerBuySaleVoList" :key="index1"
									@tap="xiaoshouDetail('2',item1)">
									<uni-td align="center">{{item1.createTime | removeStr}}</uni-td>
									<uni-td align="center">{{item1.productCount}}</uni-td>
									<uni-td
										align="center">{{item1.customerBuyProductDetailLogVos[0].realPrice}}</uni-td>
									<uni-td
										align="center">{{item1.customerBuyProductDetailLogVos[0].realPrice * item1.productCount}}</uni-td>
									<uni-td
										align="center">{{((item1.customerBuyProductDetailLogVos[0].realPrice - item1.customerBuyProductDetailLogVos[0].purchasePrice) * item1.productCount).toFixed(2)}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				
			</view>
			
		</view>
		<u-loadmore :status="status" />
		<!-- 弹出销售商品规格 -->
		<uni-popup ref="xsdetailPopup" background-color="#fff">
			<view class="detail-popup">
				<view @tap="$refs.xsdetailPopup.close()"
					style='width: 50rpx;height: 50rpx;position: absolute;right: 20rpx;top: 25rpx;'>
					<uni-icons type="closeempty" color="red" size="22"></uni-icons>
				</view>
				<view style="height: 100rpx;line-height: 100rpx;font-weight: bold;font-size: 36rpx;text-align: center;">
					规格数量详情
				</view>
				<uni-table border stripe emptyText="暂无更多数据" style="margin-bottom: 20rpx;border-radius: 10px;">
					<!-- 表头行 -->
					<uni-tr style="background: #eee;">
						<uni-th align="center" width="80">规格</uni-th>
						<uni-th align="center" width="55">数量</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in GDList" :key="index">
						<uni-td align="center">{{item.attributeList | sliceMsg}}</uni-td>
						<uni-td align="center">{{item.productCount}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				range: [],
				GDList: [],
				status: 'loadmore',
				pages: 1,
				pageNum: 1,
				createBy: '',
				shopId: '',
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			},
			removeStr(val) {
				if (val == null) {
					return "";
				} else {
					var dotIndex = val.indexOf('.');
					if (dotIndex !== -1) {
						return val.substring(0, dotIndex);
					}
					return val;
				}
			}
		},
		onLoad(option) {
			this.createBy = option.createBy
			this.range = JSON.parse(option.range)
			this.getList();
		},
		onShow(){
			if(this.range ==''){
				this.getMonth();
			}
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum++;
			this.getList();
		},
		methods: {
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString() //'年'
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
					.toString() //'月'
				let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString() //'日'
				let end = year + '-' + month + '-' + da //当天
				let beg = year + '-' + month + '-01' //当月第一天
				this.range = [beg, end]
			},
			xiaoshouDetail(type, item) {
				if (item) {
					this.GDList = item.customerBuyProductDetailLogVos
					this.$refs.xsdetailPopup.open()
				}
			},
			getList() {
				this.status = 'loading';
				this.tui.request("/app/sale/getCustomerBuyProductLog", "post", {
					createBy: this.createBy,
					pageSize: 10,
					startDate: this.range[0],
					endDate: this.range[1],
					pageNum: this.pageNum,
					shopId: uni.getStorageSync('shopId')
				}, false, false).then((res) => {
					this.status = 'nomore';
					if (res.code == 200) {
						if (this.pages == 1) {
							this.list = res.result.records
						} else {
							this.list = [...this.list, ...res.result.records]

						}
						this.pages = res.result.pages
						for (let i = 0; i < this.list.length; i++) {
							this.list[i].productCount = 0
							for (let j = 0; j < this.list[i].customerBuySaleVoList.length; j++) {
								this.list[i].customerBuySaleVoList[j].productCount = 0

								for (let m = 0; m < this.list[i].customerBuySaleVoList[j]
									.customerBuyProductDetailLogVos.length; m++) {
									this.list[i].productCount += this.list[i].customerBuySaleVoList[j]
										.customerBuyProductDetailLogVos[m].productCount
									this.list[i].customerBuySaleVoList[j].productCount += this.list[i]
										.customerBuySaleVoList[j].customerBuyProductDetailLogVos[m]
										.productCount
								}
							}
						}
						this.$forceUpdate()
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			
			searchList() {
				this.list = []
				this.pageNum = 1
				this.getList()
			},
		},
	}
</script>

<style lang="scss">
	.container {
		.boxbg {
			padding-top: 10rpx;
			background-color: #FAF7F7;
		}
		.tui-order-item {
			.u-collapse-content {
				display: flex;
				justify-content: space-between;
				line-height: 30px;
			}
		}
	}

	.shop-box {
		margin: 0 auto;
		position: relative;
	}

	.uni-table-scroll {
		width: 100%;
		overflow-x: auto;
		border-radius: 10px;
	}

	.uni-table-th {
		background: #FAE7B5 !important;
		color: #000 !important;
	}
	.detail-popup{
		width: 500rpx;
		min-height: 500rpx;
		max-height: 1000rpx;
		overflow: scroll;
	}
	@media screen and (min-width: 760px) {
		.detail-popup{
			max-height: 750px;
		}
	}
</style>