<template>
	<view>
		<view class="search" style="position: fixed;top: 0;z-index: 99;">
			<button size="default" type="default" @tap="addStock" hover-class="is-hover">新增盘点</button>
			<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" @change="searchList" type="daterange" />
		</view>
		<view class="formBox">
			<u-alert description="点击可查看盘点功能使用教程" @click="goTutorial" type="primary"></u-alert>
			<view class="pd-box" v-for="(item,index) in stockList" :key="index" style="">
				<uni-card :title="item.createTime" :sub-title="'盘点人:'+item.createByName" :extra="item.delFlag == 0?'盘点中':'已完成'">
					<view style="display: flex;">
						<view class="pd-left">
							<view>
								总盘款数:{{item.totalCount == null ? 0 : item.totalCount}}
							</view>
							<view v-if="item.extraCount > 0">
								盘盈总数:{{item.extraCount}}    盘盈总额:{{item.extraTotal}}
							</view>
							<view v-if="item.lessCount > 0">
								盘亏总数:{{item.lessCount}}     盘亏总额:{{item.lessTotal}}
							</view>
						</view>
						<view class="pd-right">
							<view v-if="item.delFlag == 0" @tap="onItemClick(item)">继续盘点</view>
							<view v-else @tap="onItemClick(item)">查看详情</view>
							<view v-if="item.delFlag == 0" @tap.stop="delStock(item.id)">删除</view>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				pages: 1,
				totalPages: 0,
				range:[],
				stockList:[]
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if (this.pages >= this.totalPages) return;
			this.status = 'loading';
			this.pages = ++this.pages;
			this.getList();
		},
		methods: {
			getList() {
				this.status = 'loading';
				this.tui.request("/app/checkStock/getCheckStockList", "POST", {
					startDate:this.range[0],
					endDate:this.range[1],
					pageNum:this.pages,
					pageSize:10
				}, false, false).then((res) => {
					this.status = 'nomore';
					if (res.code == 200) {
						if (this.pages == 1) {
							this.stockList = res.result.records
						} else {
							this.stockList = [...this.stockList, ...res.result.records]
						}
						this.totalPages = res.result.pages
					} else {
						this.tui.toast(res.message)
					}

				})
			},
			searchList(res) {
				this.pages = 1;
				this.stockList = [];
				this.getList()
			},
			addStock(){
				this.tui.request("/app/checkStock/addCheckStock", "POST", {}, false, false).then((res) => {
					if (res.code == 200) {
						uni.setStorageSync('stockId',res.result.id);
						uni.navigateTo({
							url: '/package2/stock/addStockList'
						})
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			onItemClick(target) {
				uni.setStorageSync('stockId',target.id);
				uni.navigateTo({
					url: '/package2/stock/addStockList'
				})
			},
			goTutorial(){
				uni.navigateTo({
					url: `/package2/other/tutorialList`
				})
			},
			delStock(id){
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确认要删除此条盘点信息吗？",
					success: function(res) {
						if(res.confirm){
							that.tui.request("/app/checkStock/deleteCheckStock", "post", {
								id:id
							}, false, true).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
									setTimeout(res=> {
										that.getList();
									},2000)
									
								} else {
									uni.showToast({
										title: "盘点失败",
										icon: 'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formBox {
		margin-top: 226rpx;
	}
	@media screen and (min-width: 760px) {
		.formBox {
			margin-top: 175rpx;
		}
	}
	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 100%;
		margin-bottom: 20rpx;
	}
	.search {
		padding: 20upx;
		background-color: #fff;
		width: 100%;
		background-color: #fff;
	}
	.pd-container{
		width: 100%;
		height: 230rpx;
		background: #fff;
		border-top: 20rpx solid #eee;
		display: flex;
	}
	.pd-left{
		width: 60%;
		line-height: 60rpx;
	}
	.pd-right{
		width: 40%;
		line-height: 70rpx;
		view{
			width: 140rpx;
			height: 70rpx;
			font-size: 26rpx;
			color: #fff;
			background: #5fd9ee;
			margin-bottom: 25rpx;
			padding: 0;
			float: right;
			border-radius: 10px;
			text-align: center;
		}
	}
</style>