<template>
	<!-- 物料订单 -->
	<view class="ware-house">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="物料订单" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
			<!-- 搜索 -->
		<view class="search-view" @click.self="handleClickSearch">
			<u-search :clearabled="false" disabled @custom="handleClickSearch" placeholder="请输入关键字"
				:action-style="actionStyle" placeholder-color="#999999" color="#333333" bg-color="#FFFFFF" height="72"
				search-icon-color="#999999">
			</u-search>
		</view>
		<!-- 各个tab -->
		<view class="u-tabs-box">
			<u-tabs height="66" activeColor="#2272FF" bg-color="none" inactive-color="#999" bar-height="4"
				bar-width="44" :offset="[0,0]" :list="list" count="total" :current="currentIndex" @change="change"
				:is-scroll="false" font-size="28" bold></u-tabs>
		</view>
		<!-- 列表 -->
		<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" @scroll="scroll"
				refresher-background="#F4F5F7" @refresherrefresh="onRefresh" @refresherrestore="onRestore" enable-back-to-top>
				<!-- 加载中 && 没有下拉：显示加载中 -->
				<view class="loading-view" v-if="!loaded && _freshing">
					<u-loading mode="flower"></u-loading>
				</view>
				<!-- 无数据 -->
				<NoOrder v-else-if="noParts" imageName="wupeijianxinxi.png" text="当前暂无物料信息"
					:customStyle="noPartsCustomStyle" />
				<template v-else>
					<!-- 列表 -->
					<view v-for="(item, index) in partsList" :key="item.id">
						<AppliedCell @operate="handleOperate" :info="item" @action="handleClickCell" @express="handleClickExpress"></AppliedCell>
					</view>
					<!-- 底部加载状态 -->
					<view class="load-more-view" v-show="(pageNumber == 1 && loaded) || pageNumber > 1">
						<u-loadmore :status="loadStatus"
							bgColor="#F4F5F7"></u-loadmore>
					</view>
				</template>
			</scroll-view>
		</view>
		<!-- 悬浮申请按钮 -->
		<view class="fixed-button">
			<ApplyButton :type.sync="buttonType" @click="handleClickApply" />
		</view>
		<!-- 通用提示框 -->
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import AppliedCell from "@/components/parts/appliedPartsCell.vue"
	import NoOrder from "@/components/order/noOrder.vue"
	import ApplyButton from "@/components/parts/applyButton.vue"
	export default {
		components: {
			AppliedCell,
			NoOrder,
			ApplyButton
		},
		data() {
			return {
				pageNumber: 0,
				pageSize: 10,
				partsList: [], // 物料订单列表
				currentIndex: 0, // 当前tab的index
				loadStatus: 'loading', // 底部加载状态
				loaded: false, // 页面加载
				triggered: true, // true:下拉刷新
				_freshing: false, // 防止下拉刷新重复触发
				buttonType: 'expand' // 申请按钮宽 collapse': '80rpx', 'expand': '220rpx''
			};
		},
		computed: {
			// 不传值  全部；待签收 15；待发货 10；待审核 1；已驳回 -2；已签收 20;已取消 -1；
			list() {
				return [
					{
						'name': '待签收',
						'status': 15
					},
					{
						'name': '待审核',
						'status': 1
					},
					{
						'name': '待发货',
						'status': 10
					},
					{
						'name': '已取消',
						'status': -1
					},
					{
						'name': '已驳回',
						'status': -2
					},
					{
						'name': '全部',
						'status': null
					},
				]
			},
			// 当下tab
			currentTab() {
				return this.list[this.currentIndex]
			},
			// 搜索图标
			sousuoImage() {
				return process.uniEnv.qn_base_url + 'sousuo.png'
			},
			// 无数据
			noParts() {
				return this.partsList.length == 0 && this.loaded
			},
			// 无数据页面样式
			noPartsCustomStyle() {
				return 'margin-top: 100rpx;background-color: #F4F5F7'
			},
			// 搜索控件右面'搜索'/'取消'按钮风格
			actionStyle() {
				return {
					'font-size': '32rpx',
					'color': '#2272FF',
					'margin-left': '20rpx'
				}
			},
		},
		onLoad(e) {
			getApp().trackPage('物料订单页')
			if (e && e.index) { // 跳转到第几个tab页
				this.currentIndex = e.index
			}
			this._freshing = false;
			this.reloadPartsList() // 加载数据
		},
		onShow() {
			let pages = getCurrentPages()
			let page = pages[pages.length - 1]
			if (page.needRefresh) { // 需要初始化页面
				page.needRefresh = null
				this.currentIndex = 0
				this.reloadPartsList()
			}
		},
		methods: {
			// tab栏切换
			change(index) {
				this.currentIndex = index;
				this.reloadPartsList()
			},

			// 页面数据：未入库
			getUnstockedList(status) {
				// 状态处理
				this.pageNumber += 1
				if (this.pageNumber == 1) {
					this.loaded = false
				}
				var param = {
					'pageSize': this.pageSize,
					'pageNumber': this.pageNumber,
				}
				if (status != null) {
					param.status = status //不传值  全部；待签收 15；待发货 10；待审核 1；已取消 -1；已驳回 -2；已签收 20
				}
				this.$u.api.applyList(param).then((res) => {
					if (res.code == 200) {
						if (this.pageNumber == 1) {
							this.partsList = []
						}
						let list = res.data || []
						this.partsList.push(...list)
						this.loadStatus = list.length < this.pageSize ? 'nomore' : 'loadmore' // 底部加载状态
					} else {
						console.log(res.message)
					}
					this.$nextTick(()=>{ // 页面刷新完之后更新下拉状态
						if (this._freshing) {
							this.triggered = false;
							this._freshing = false;
						}
					})
					this.loaded = true // 加载完成
				});
			},
			// 点击了订单cell的按钮
			handleOperate(partsId, operateType) {
				this.$u.api[operateType](partsId).then(res => {
					var type = 'error'
					var message = res.message
					if (res.code === 200) {
						type = 'success'
						message = '操作成功'
						this.currentIndex = 0
						this.reloadPartsList()
					} else {
						console.log(res.message)
					}
					this.$refs.uToast.show({
						title: message,
						type: type,
						duration: 1500,
						callback: function() {}
					})
				})
			},
			// 点击了订单cell本身，跳转到详情
			handleClickCell(info) {
				this.setPageInfo(info)
				uni.navigateTo({
					url: 'pages/mine/warehouse/partsDetail'
				})
			},
			// 点击了订单cell的物流号，跳转到物流页面
			handleClickExpress(info) {
				this.setPageInfo(info)
				uni.navigateTo({
					url: 'pages/mine/warehouse/express'
				})
			},
			// 本页数据设置，用于其他页面访问本页数据
			setPageInfo(info) {
				var pages = getCurrentPages();
				if (pages.length >= 1) {
					var page = pages[pages.length - 1];
					page.info = info
				}
			},
			// 点击了悬浮申请按钮
			handleClickApply() {
				uni.navigateTo({
					url: 'pages/parts/application?applyType=1'
				})
			},
			// 点击了搜索，跳转到搜索页面
			handleClickSearch() {
				var pages = getCurrentPages();
				uni.navigateTo({
					url: 'pages/mine/warehouse/searchParts'
				})
			},
			// 下拉刷新
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.reloadPartsList()
			},
			// 重置下拉状态
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 初始化加载
			reloadPartsList() { // 第一页数据
				this.pageNumber = 0
				this.loadStatus = 'loading'
				this.getUnstockedList(this.currentTab.status)
			},
			// 滚到底部
			reachBottom(e) {
				if (this.loadStatus != 'loadmore') return
				this.loadStatus == 'loading'
				this.getUnstockedList(this.currentTab.status)
			},
			// 滚动触发悬浮按钮变为收起状态
			scroll() {
				this.buttonType = 'collapse'
			},
		}
	};
</script>
<style lang="scss" scoped>
	.ware-house {
		padding: 0 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.search-view {
			margin-bottom: 20rpx;
			margin-top: 10rpx;

			/deep/ .u-search .u-content {
				padding-left: 40rpx;
			}

			/deep/ .u-search .u-input {
				margin: 0 20rpx;
			}

			/deep/ .u-search .u-icon--right .u-iconfont {
				font-size: 36rpx !important;
			}
		}

		.u-tabs-box {
			margin-bottom: 30rpx;
		}

		.tab-view {
			height: 100%;
			overflow: auto;

			.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 {
			position: fixed;
			right: 20rpx;
			bottom: 64rpx;

		}
	}
</style>
