<template>
	<!-- 收货列表 -->
	<view class="ware-house">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="盘点" titleColor="#333333" :border-bottom="false" title-bold></u-navbar>
		<inventory-head ref="inventory-head" @toAdd="toAdd" :value="form.brandId" @pickerchange="pickerchange"></inventory-head>
		<goods-count :inventoryCount="inventoryCount" :checkCount="checkCount"></goods-count>
		<!-- 列表 -->
		<view class="tab-view" @click="closeAll">
			<scroll-view
				scroll-y
				style="height: 100%;width: 100%;"
				@scrolltolower="reachBottom"
				scroll-anchoring
				refresher-enabled="true"
				:refresher-triggered="triggered"
				:refresher-threshold="100"
				:scroll-top="scrollTop"
				refresher-background="#F4F5F7"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@scroll="scroll"
				enable-back-to-top
			>
				<NoOrder v-if="noParts" imageName="zwdd.png" :customStyle="noOrderCustomStyle" />
				<template v-else>
					<uni-swipe-action ref="uni-swipe-action">
						<view class="swipe-action" v-for="(item, index) in list" :key="item.id">
							<inventory-info :detail="item" :options="brandList" @handleClick="handleClick" @handleDelete="handleDelete"></inventory-info>
						</view>
					</uni-swipe-action>

					<view class="load-more-view" v-show="(form.pageNumber == 1 && loaded) || form.pageNumber > 1"><u-loadmore :status="loadStatus" bgColor="#F4F5F7"></u-loadmore></view>
				</template>
				<view class="loading-view" v-if="!loaded && !freshing"><u-loading mode="flower"></u-loading></view>
			</scroll-view>
		</view>

		<!-- 底部按钮 -->
		<fixed-button text="确认盘点" @handleClick="confirm"></fixed-button>
		<!-- 通用提示框 -->
		<view><u-toast ref="uToast" /></view>
	</view>
</template>

<script>
import inventoryHead from './components/inventory/inventoryHead.vue';
import GoodsCount from './components/inventory/goodsCount.vue';
import FixedButton from '@/components/mine/fixed-button.vue';
import InventoryInfo from './components/inventory/inventoryInfo.vue';
import NoOrder from '@/components/order/noOrder.vue';
import ApplyButton from '@/components/parts/applyButton.vue';
import { receiveStatusOptions } from '@/common/optinos/mine/received.js';
export default {
	components: {
		inventoryHead,
		InventoryInfo,
		NoOrder,
		ApplyButton,
		FixedButton,
		GoodsCount
	},
	data() {
		return {
			receiveStatusOptions,
			
			list: [
				{ id: 1, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 2, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 3, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 4, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 5, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 6, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 7, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 8, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 9, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 10, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 11, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 12, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 13, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 14, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 15, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 16, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 17, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 18, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 19, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 20, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 21, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 22, status: 1, code: 'dsadq4231', brand: 'byd', show: false },
				{ id: 23, status: 1, code: 'dsadq4231', brand: 'byd', show: false }
			], // 物料订单列表
			form: {
				pageNumber: 0,
				pageSize: 10,
				brandId: '',
				
			},
			show: false,
			loadStatus: 'loading', // 底部加载状态
			loaded: false, // 页面加载
			triggered: true, // true:下拉刷新
			freshing: false, // 防止下拉刷新重复触发
			buttonType: 'expand', // 申请按钮宽 collapse': '80rpx', 'expand': '220rpx''
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			buttonStyle: {
				width: '100%',
				height: '80rpx',
				fontSize: '32rpx',
				fontWeight: 'bold'
			},
			inventoryCount: 0,
			checkCount: 0
		};
	},
	computed: {
		// 无数据
		noParts() {
			return this.list.length == 0 && this.loaded;
		},
		// 无数据页面样式
		noPartsCustomStyle() {
			return 'margin-top: 100rpx;background-color: #F4F5F7';
		}
	},
	onLoad(e) {
		// getApp().trackPage('物料订单页');
		// if (e && e.index) {
		// 	// 跳转到第几个tab页
		// 	this.currentIndex = e.index;
		// }
		this.freshing = false;
		this.reloadList(); // 加载数据
	},
	onShow() {
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		if (page.needRefresh) {
			// 需要初始化页面
			page.needRefresh = null;
			this.reloadList();
		}
	},
	methods: {
		pickerchange(data) {
			this.form.brandId = data.id||"";
			this.reloadList();
		},
		// 获取品牌列表
		getBrandList(){
			this.$refs["inventory-head"].getBrandList()
		},
		// 页面数据：未入库
		async getList() {
			// 状态处理
			this.form.pageNumber += 1;
			if (this.form.pageNumber == 1) {
				this.loaded = false;
			}
			var param = this.form
			let res = await this.$u.api.inventoryListByReceivedModules(param);
			if (res.code == 200) {
				if (this.form.pageNumber == 1) {
					this.list = [];
				}
				let list = res.data || [];
				list.forEach(item => (item.show = false));
				this.list.push(...list);
				this.loadStatus = list.length < this.pageSize ? 'nomore' : 'loadmore'; // 底部加载状态
			} else {
				// this.loadStatus = 'loadmore';
				console.log(res.message);
			}
			this.$nextTick(() => {
				// 页面刷新完之后更新下拉状态
				if (this.freshing) {
					this.triggered = false;
					this.freshing = false;
				}
			});
			this.loaded = true; // 加载完成
		},
		// 跳转到详情
		handleClick(id) {
			let url = 'pages/mine/warehouse/inventoryDetail';
			if (id) url += `?id=${id}`;
			uni.navigateTo({
				url
			});
		},
		// 新增收货
		toAdd() {
			this.handleClick();
		},
		// 本页数据设置，用于其他页面访问本页数据
		setPageInfo(info) {
			var pages = getCurrentPages();
			if (pages.length >= 1) {
				var page = pages[pages.length - 1];
				page.info = info;
			}
		},
		// 下拉刷新
		onRefresh() {
			if (this.freshing) return;
			this.freshing = true;
			this.reloadList();
		},
		// 重置下拉状态
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		// 初始化加载
		reloadList() {
			// 第一页数据
			this.form.pageNumber = 0;
			this.loadStatus = 'loading';
			this.getList();
		},
		// 滚到底部加载下一页
		reachBottom(e) {
			if (this.loadStatus != 'loadmore') return;
			this.loadStatus == 'loading';
			this.getList();
		},
		scroll(e) {
			// this.old.scrollTop = e.detail.scrollTop;
		},
		closeAll() {
			if (this.list.length) {
				this.$refs['uni-swipe-action'].closeOther(undefined);
			}
		},
		async handleDelete(id) {
			console.log('删除--', id);
			// let {code,data}=await onDelete(id)
		},
		// 确认盘点
		async confirm() {
			if (this.list.length) {
				// let res=await confirmSubmit()
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.ware-house {
	padding: 0 30rpx;
	height: 100vh;
	// min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: constant(safe-area-inset-bottom);
	/* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom);
	/* 兼容 iOS >= 11.2 */
	.tab-view {
		height: 100%;
		overflow: auto;
		margin-bottom: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		.swipe-action {
			padding-bottom: 20rpx;
		}
		.load-more-view {
			padding-bottom: 64rpx;
		}

		.loading-view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 300rpx;
			position: absolute;
		}
	}
	.fixed-button {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		bottom: 20rpx;
	}
}
</style>
