<template>
	<!-- 返件信息 -->
	<view class="ware-house-return">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="返件信息" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<view class="search-view">
			<u-search v-model="keyword" :action-text="searchButtonText" @search="handleClickSearch" @clear="handleClear"
				@custom="handleClickButton" placeholder="请输入关键字" :action-style="actionStyle" placeholder-color="#999999"
				color="#333333" bg-color="#FFFFFF" height="72"  search-icon-color="#999999">
			</u-search>
		</view>
		<NoOrder v-if="noParts" imageName="wupeijianxinxi.png" text="当前暂无返件信息" :customStyle="noPartsCustomStyle" />
		<view v-else class="tab-view">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" scroll-anchoring enable-back-to-top>
				<view class="loading-view" v-if="!loaded">
					<u-loading mode="flower"></u-loading>
				</view>
				<template v-else>
					<view v-for="item in partsList" :key="item.id">
						<ReturnCell :info="item"></ReturnCell>
					</view>
					<view class="load-more-view" v-if="(pageNumber == 1 && loaded) || pageNumber > 1">
						<u-loadmore :status="loadStatus" bgColor="#F4F5F7"></u-loadmore>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import ReturnCell from "@/components/parts/returnCell.vue"
	import NoOrder from "@/components/order/noOrder.vue"

	export default {
		components: {
			ReturnCell,
			NoOrder
		},
		data() {
			return {
				pageNumber: 0,
				pageSize: 20,
				partsList: [],
				loadStatus: 'loading',
				loaded: false,
				keyword: '',
				searchedKeyword: ''
			};
		},
		computed: {
			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'
			},
			searchButtonText() {
				return this.searchedKeyword == this.keyword && this.keyword ? '取消' : '搜索'
			},
			actionStyle() {
				return {
					'font-size': '32rpx',
					'color': '#2272FF',
					'margin-left': '20rpx'
				}
			},
		},
		onLoad(e) {
			getApp().trackPage('我的配件页')
			this.reloadPartsList()
		},
		methods: {
			getReturnedParts() { // 返件列表
				this.pageNumber += 1
				if (this.pageNumber == 1) {
					this.loaded = false
				}
				var param = {
					'pageSize': this.pageSize,
					'pageNumber': this.pageNumber,
					'items': true,
					'type': 'new'
				}
				if (this.keyword) {
					param.keyword = this.keyword
				}
				this.searchedKeyword = this.keyword
				this.$u.api.returnedParts(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.loaded = true
				});

			},
			handleClickCell(info) {
				var pages = getCurrentPages();
				if (pages.length >= 1) {
					var page = pages[pages.length - 1];
					page.info = info
				}
				uni.navigateTo({
					url: 'pages/mine/warehouse/partsDetail'
				})
			},

			handleClickSearch() { // 软键盘搜索
				this.reloadPartsList()
			},
			handleClear() { // 清空搜索
				if (this.searchedKeyword) {
					this.reloadPartsList()
				}
			},
			handleClickButton() { // 点了搜索按钮
				if (this.searchedKeyword == this.keyword) {
					this.keyword = ''
				}
				this.reloadPartsList()
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			reloadPartsList() { // 第一页数据
				this.pageNumber = 0
				this.loadStatus = 'loading'
				this.getReturnedParts()
			},
			reachBottom(e) {
				if (this.loadStatus != 'loadmore') return
				this.loadStatus == 'loading'
				this.getReturnedParts()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.ware-house-return {
		padding: 0 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.search-view {
			margin-bottom: 30rpx;
			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;
			}
		}

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

			.load-more-view {
				margin-bottom: 68rpx;
			}
			.loading-view {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 300rpx;
				position: absolute;
			}
		}
	}
</style>
