<!-- 工单-搜索页 -->
<template>
	<view class="search-parts">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title=" " titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<view class="top-item">
			<u-search 
				v-model="search.keyword"
				bg-color="#FFFFFF"
				placeholder="请输入关键字"
				search-icon-color="#999999"
				color="#333333"
				placeholder-color="#999999"
				height="72"
				margin="0 30rpx"
				:animation="true"
				:show-action="true"
				:action-style="{
					'font-size': '32rpx',
					'font-weight': 500,
					'color': '#2272FF'
				}"
				:focus="true"
				@search="searchOrder"
				@custom="searchOrder"
				></u-search>
		</view>
		<view class="content-item">
			<view v-if="partsList && partsList.length > 0" class="order-row">
				<view v-for="(item, index) in partsList" :key="item.orderId">
					<AppliedCell @operate="handleOperate" :info="item" @action="handleClickCell" @express="handleClickExpress"></AppliedCell>
				</view>
				<u-loadmore :status="loadStatus" bgColor="#F4F5F7"></u-loadmore>
			</view>
			<view v-else-if="loaded" class="empty-result">
				<NoOrder imageName="SearchEmpty.png" text="当前暂无搜索结果" :customStyle="noPartsCustomStyle" />
			</view>
			
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import AppliedCell from "@/components/parts/appliedPartsCell.vue"
	import NoOrder from "@/components/order/noOrder.vue"
	export default {
		components: {
			AppliedCell,
			NoOrder
		},
		data() {
			return {
				search: {
					keyword: '',
					pageSize: 20,
					pageNumber: 0,
				},
				partsList: [],
				loaded: false,
				total: 10,
				loadStaus: 'loadmore',
			};
		},
		onLoad() {
			getApp().trackPage('订单搜索页')
			// this.searchOrder()
		},
		computed: {
			noPartsCustomStyle() {
				return 'margin-top: 100rpx;background-color: #F4F5F7'
			},
		},
		onShow() {
			let pages = getCurrentPages()
			let page = pages[pages.length - 1]
			if (page.needRefresh) {
				page.needRefresh = null
				this.getPartsList()
			}
		},
		methods: {
			searchOrder(index) {
				this.search.pageNumber = 1
				this.loadStaus = 'loading';
				this.getPartsList()
			},
			// 页面数据
			getPartsList(event) {
				if(!this.search.keyword) {
					return false
				}

				this.loaded = false
				this.$u.api.applyList(this.search).then((res) => {
					if (res.code == 200) {
						if (res.data) {
							if (this.search.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
				});
			},
			// 响应操作按钮
			handleOperate(partsId, operateType, willStatus) {
				this.$u.api[operateType](partsId).then(res => {
					var type = 'error'
					var message = res.message
					if (res.code === 200) {
						type = 'success'
						for (var item of this.partsList) {
							if (item.id == partsId) {
								item.status = willStatus
								break
							}
						}
					} else {
						console.log(res.message)
					}
					this.$refs.uToast.show({
						title: message,
						type: type,
						duration: 1000,
						callback: function() {}
					})
				})
			},
			handleClickCell(info) {
				this.setPageInfo(info)
				uni.navigateTo({
					url: 'pages/mine/warehouse/partsDetail'
				})
			},
			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
				}
			},
		},
		onReachBottom() {
			let len = this.partsList && this.partsList.length || 0
			if(!this.loaded || len >= this.total) return;
			this.loadStaus = 'loading';
			this.search.pageNumber += 1;
			this.getPartsList('onReachBottom')
		},
	}
</script>

<style lang="scss"scoped>
.search-parts {
	display: flex;
	flex-direction: column;
	height: 100vh;
	.top-item {
		position: sticky;
		padding: 10rpx 0;
		top: 0rpx;
		background-color: #F4F5F7;
		z-index: 2;
		/deep/ .u-search .u-content {
			padding: 0 20rpx 0 40rpx;
		}
		/deep/ .u-search .u-input {
			margin: 0 24rpx;
		}
		/deep/ .u-search .u-icon--right .u-iconfont {
			font-size: 36rpx !important;
		}
		/deep/ .u-search .u-close-wrap .u-iconfont {
			color: #CCCCCC;
		}
	}
	
	.content-item {
		padding: 10rpx 30rpx 20rpx 30rpx;
		height: 100%;
		overflow: auto;
		.empty-result {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.empty-message {
				padding-top: 28rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
			}
		}
		
	}
}
</style>
