<template>
	<!-- 收货列表 -->
	<view class="ware-house">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="收货列表" titleColor="#333333" :border-bottom="false" title-bold></u-navbar>
		<received-head ref="received-head" :current.sync="form.status" :value="form.brandId" @currentChange="currentChange" @pickerchange="pickerchange"></received-head>
		<!-- 列表 -->
		<view class="tab-view">
			<scroll-view
				scroll-y
				style="height: 100%;width: 100%;"
				@scrolltolower="reachBottom"
				scroll-anchoring
				refresher-enabled="true"
				:refresher-triggered="triggered"
				:refresher-threshold="100"
				refresher-background="#F4F5F7"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				enable-back-to-top
			>
				<NoOrder v-if="noParts" imageName="zwdd.png" text="暂无数据" :customStyle="noOrderCustomStyle" />
				<template v-else>
					<view v-for="(item, index) in list" :key="index"><receiving-info :detail="item" @handleClick="handleClick"></receiving-info></view>
					<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="toAdd"></fixed-button>
		<!-- 通用提示框 -->
		<view><u-toast ref="uToast" /></view>
	</view>
</template>

<script>
import ReceivedHead from './components/received/receivedHead.vue';
import FixedButton from '@/components/mine/fixed-button.vue';
import ReceivingInfo from './components/received/receivingInfo.vue';
import NoOrder from '@/components/order/noOrder.vue';
import ApplyButton from '@/components/parts/applyButton.vue';
import { receiveStatusOptions } from '@/common/optinos/mine/received.js';
import { showToast } from '@/common/common.js';
export default {
	components: {
		ReceivedHead,
		ReceivingInfo,
		NoOrder,
		ApplyButton,
		FixedButton
	},
	data() {
		return {
			receiveStatusOptions,
			list: [], // 物料订单列表
			form: {
				pageNumber: 0,
				pageSize: 10,
				status: 0,
				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'
			}
		};
	},
	computed: {
		// 当下tab
		currentTab() {
			return this.receiveStatusOptions[this.form.status];
		},
		// 无数据
		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.status = e.index;
		// }
		this.freshing = false;
		this.getBrandList(); // 获取品牌列表
		this.reloadList(); // 加载数据
	},
	onShow() {
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		if (page.needRefresh) {
			// 需要初始化页面
			page.needRefresh = null;
			this.form.status = 0;
			this.reloadList();
		}
	},
	methods: {
		// tab栏切换
		currentChange() {
			this.reloadList();
		},
		pickerchange(data) {
			this.form.brandId = data.id || '';
			this.reloadList();
		},
		// 获取品牌列表
		getBrandList() {
			this.$refs['received-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.receiveListByReceivedModules(param);
			if (res.code == 200) {
				if (this.form.pageNumber == 1) {
					this.list = [];
				}
				let { list, count } = res.data;
				let arr = list || [];
				this.list.push(...arr);
				this.loadStatus = arr.length < this.form.pageSize ? 'nomore' : 'loadmore'; // 底部加载状态
			} else {
				// this.loadStatus = 'loadmore';
				console.log(res.message);
				showToast(res.message);
			}
			this.$nextTick(() => {
				// 页面刷新完之后更新下拉状态
				if (this.freshing) {
					this.triggered = false;
					this.freshing = false;
				}
			});
			this.loaded = true; // 加载完成
		},
		// 跳转到详情
		handleClick(id) {
			let url = 'pages/mine/warehouse/receiveDetail';
			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;
		}
	}
};
</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 */
		.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>
