<template>
	<view class="page-content my-bg">
		<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">加油记录</block>
		</cu-custom>
		<view class="fixed">

			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="搜索 油站名称/订单编号/油品" @input="onChangeSearch"
						confirm-type="search" @confirm="onSearch" v-model="search" />
				</view>
			</view>
			<scroll-view scroll-x class="my-bg nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hidden-2">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索 油站名称/订单编号/油品"
						confirm-type="search" @confirm="onSearch" v-model="search" />
				</view>
			</view>
			<scroll-view scroll-x class=" nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="margin " v-if="TabCur==0">
			<view class="" v-if="list.length>0">
				<order-item @refresh="onRequest" @makePay="makePay" class="" :item="item" v-for="item in list"
					:key="item.id" />
			</view>
			<view class="" v-else>
				<my-empty></my-empty>
			</view>
		</view>
		<view class="margin " v-if="TabCur==1">
			<view class="" v-if="list0.length>0">
				<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemx" v-for="itemx in list0"
					:key="itemx.id" />
			</view>
			<view class="" v-else>
				<my-empty></my-empty>
			</view>
		</view>
		<view class="margin " v-if="TabCur==2">
			<view class="" v-if="list1.length>0">
				<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemy" v-for="itemy in list1"
					:key="itemy.id" />
			</view>
			<view class="" v-else>
				<my-empty></my-empty>
			</view>
		</view>
		<view class="margin " v-if="TabCur==3">
			<view class=" " v-if="list2.length>0">
				<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itema" v-for="itema in list2"
					:key="itema.id" />
			</view>
			<view class="" v-else>
				<my-empty></my-empty>
			</view>
		</view>
		<view class="margin " v-if="TabCur==4">
			<view class="" v-if=" list3.length>0">
				<order-item @refresh="onRequest" @makePay="makePay" class="" :item="itemc" v-for="itemc in list3"
					:key="itemc.id" />
			</view>
			<view class="" v-else>
				<my-empty></my-empty>
			</view>
		</view>
		<uni-load-more status="more"></uni-load-more>
	</view>
</template>

<script>
	import orderApi from '@/api/oil-order.js'
	import OrderItem from '@/components/order-item'
	export default {
		components: {
			OrderItem
		},

		data() {
			return {
				getSiteListTimer:null,
				TabCur: 0,
				search: '',
				status: {
					loadOrderStatus: 'load',
					loadOrderStatus0: 'load',
					loadOrderStatus1: 'load',
					loadOrderStatus2: 'load',
					loadOrderStatus3: 'load',
				},

				tabList: [{
					title: '全部'
				}, {
					title: '待支付'
				}, {
					title: '已完成'
				}, {
					title: '已取消'
				}, {
					title: '已退款'
				}],

				scrollLeft: 0,
				list: [],
				list0: [],
				list1: [],
				list2: [],
				list3: [],
				currentPage: {
					currentPage: 1,
					currentPage0: 1,
					currentPage1: 1,
					currentPage2: 1,
					currentPage3: 1,
				}
			}
		},
		onShow() {
			// this.initList()
		},
		onLoad() {
			this.initList()
		},
		onPullDownRefresh() {
			this.onRequest()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		onReachBottom() {
			this.nextPage()
		},
		methods: {
			makePay(id) {
				orderApi.getOrderPayInfo(id).then(res => {
					if (res.code == 20000) {
						uni.setStorageSync('orderMade', res.data)
						uni.setStorageSync('oilItem', res.data)
						uni.navigateTo({
							url: '/BagStation/pages/makeOrder/orderPaying'
						})
					}
				})
			},
			onChangeSearch() {
				setTimeout(() => {
					this.onSearch()
				}, 500)
			},
			initList() {
				if (this.TabCur == 0 && this.list.length == 0) {
					this.getOrder('全部', this.currentPage.currentPage,'initList')
				} else if (this.TabCur == 1 && this.list0.length == 0) {
					this.getOrder('0', this.currentPage.currentPage0,'initList')
				} else if (this.TabCur == 2 && this.list1.length == 0) {
					this.getOrder('1', this.currentPage.currentPage1,'initList')
				} else if (this.TabCur == 3 && this.list2.length == 0) {
					this.getOrder('2', this.currentPage.currentPage2,'initList')
				} else if (this.TabCur == 4 && this.list3.length == 0) {
					this.getOrder('3', this.currentPage.currentPage3,'initList')
				}
			},
			onSearch() {
				this.onRequest()
			},
			tabSelect(e) {
				// this.$emit('onChangeCur', e.currentTarget.dataset.id)
				this.TabCur = e.currentTarget.dataset.id
				this.nextPage('tabSelect')
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				// this.initList()
			},
			nextPage(val) {
				if (this.TabCur == 0) {
					if (this.status.loadOrderStatus == 'load') {
						this.getOrder('全部', this.currentPage.currentPage,val?val:'nextPage')
					}
				} else if (this.TabCur == 1) {
					if (this.status.loadOrderStatus0 == 'load') {
						this.getOrder('0', this.currentPage.currentPage0,val?val:'nextPage')
					}
				} else if (this.TabCur == 2) {
					if (this.status.loadOrderStatus1 == 'load') {
						this.getOrder('1', this.currentPage.currentPage1,val?val:'nextPage')
					}
				} else if (this.TabCur == 3) {
					if (this.status.loadOrderStatus2 == 'load') {
						this.getOrder('2', this.currentPage.currentPage2,val?val:'nextPage')
					}
				} else if (this.TabCur == 4) {
					if (this.status.loadOrderStatus3 == 'load') {
						this.getOrder('3', this.currentPage.currentPage3,val?val:'nextPage')
					}
				}
			},
			onRequest() {
				
					if (this.TabCur == 0) {
						this.currentPage.currentPage = 1
						this.list = []
						this.getOrder('全部', this.currentPage.currentPage,'onRequest')
					} else if (this.TabCur == 1) {
						this.currentPage.currentPage0 = 1
						this.list0 = []
						this.getOrder('0', this.currentPage.currentPage0,'onRequest')
					} else if (this.TabCur == 2) {
						this.currentPage.currentPage1 = 1
						this.list1 = []
						this.getOrder('1', this.currentPage.currentPage1,'onRequest')
					} else if (this.TabCur == 3) {
						this.currentPage.currentPage2 = 1
						this.list2 = []
						this.getOrder('2', this.currentPage.currentPage2,'onRequest')
					} else if (this.TabCur == 4) {
						this.currentPage.currentPage3 = 1
						this.list3 = []
						this.getOrder('3', this.currentPage.currentPage3,'onRequest')
					}
				
				
			},
			getOrder(id, page, tip) {
				clearTimeout(this.getSiteListTimer);
				this.getSiteListTimer = setTimeout(()=>{
					
					let postData = {
						currentPage: page, //类型：Number  必有字段  备注：无
						pageSize: 10, //类型：Number  必有字段  备注：无
						index: (page - 1) * 10,
						params: { //类型：Object  必有字段  备注：无
						clientBelong:'ZHONGPIN',
							orderStatus: id == '全部' ? '' : (id +''), //类型：String  必有字段  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
							search: this.search //类型：String  必有字段  备注：搜索 ( 油站名称/ 订单编号/ 油品)
						},
					}
					console.log('tip',id,tip)
					orderApi.getOrderInfoByPage(postData).then(res => {
						if (res.code == 20000) {
							// console.log('订单列表厂房发', page, res.data.list.length)
							// 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
							if (id == '0') {
								// 0：待支付 list0
								this.list0 = this.list0.concat(res.data.list)
								if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.status.loadOrderStatus0 = 'nomore'
									uni.showToast({
										title: '就这么多啦',
										icon: 'none'
									})
								} else {
									this.currentPage.currentPage0++
									this.status.loadOrderStatus0 = 'load'
								}
							} else if (id == '1') {
								// 1：已支付 list1 
								this.list1 = this.list1.concat(res.data.list)
								if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.status.loadOrderStatus1 = 'nomore'
									uni.showToast({
										title: '就这么多啦',
										icon: 'none'
									})
								} else {
									this.currentPage.currentPage1++
									this.status.loadOrderStatus1 = 'load'
									this.$emit('changeOrderLoadStatus', id, 'load', false)
					
					
								}
							} else if (id == '2') {
								//2：已取消 list2
								this.list2 = this.list2.concat(res.data.list)
								if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.status.loadOrderStatus2 = 'nomore'
									uni.showToast({
										title: '就这么多啦',
										icon: 'none'
									})
								} else {
									this.currentPage.currentPage2++
									this.status.loadOrderStatus2 = 'load'
									this.$emit('changeOrderLoadStatus', id, 'load', false)
					
								}
							} else if (id == '3') {
								// 3：已退款 list3
								this.list3 = this.list3.concat(res.data.list)
								if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.status.loadOrderStatus3 = 'nomore'
									uni.showToast({
										title: '就这么多啦',
										icon: 'none'
									})
								} else {
									this.currentPage.currentPage3++
									this.status.loadOrderStatus3 = 'load'
					
								}
							} else if (id == '全部') {
								// 全部 list
								this.list = this.list.concat(res.data.list)
								if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.status.loadOrderStatus = 'nomore'
									uni.showToast({
										title: '就这么多啦',
										icon: 'none'
									})
								} else {
									this.currentPage.currentPage++
									this.status.loadOrderStatus = 'load'
								}
							}
						}
					})
				},500)
				
			}
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100%;
		/* margin-bottom: 4rem; */
	}

	.placeholder-hidden {
		min-height: 3rem;
		opacity: 0;
	}

	.hidden-2 {
		opacity: 0;
	}

	.fixed {
		position: fixed;
		width: 750upx;
		z-index: 4;
	}
</style>
