<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="headList ">
			<view class="headList_head" v-for="(list,i) in tabHeadS" :class="[TabHead == i? 'ativeHead':'']" :key='i' @tap='changeHaed(list.value)'>
				{{list.title}}
			</view>
		</view>
		<view class="" v-if="TabHead == 0" >
			<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-orange cur':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect(item.value,index)" :data-id="index">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 尿素站筛选 --> 
		<view class="" v-if="TabHead == 1">
			<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==UreaTabCur?'text-orange cur':''"
						v-for="(item,index) in tabListUrea" :key="index" @tap="tabSelectUrea(item.value,index)" :data-id="index">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="">
			<view class="margin " v-if="TabHead==0">
				<view class="" v-if="list.length>0">
					<order-item  @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="TabHead == 1">
				<view class="" v-if="list.length>0">
					<order-itemUrea  @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>
		<uni-load-more status="more"></uni-load-more>
	</view>
</template>

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

		data() {
			return {
				TabCur: 0,
				TabCurUrea: 0,
				UreaTabCur:0,
				search: '',
				status: {
					loadOrderStatus: 'load'
				},
				TabHead:0,
				tabHeadS:[
					{
						title:'加油站',
						value:0,
					},{
						title:'尿素站',
						value:1,
					} 
				], 
				tabList: [{
					title: '全部',
					value:''
				}, {
					title: '待支付',
					value:'0'
				}, {
					title: '已完成',
					value:'1'
				}, {
					title: '已取消',
					value:'2'
				}, {
					title: '已退款',
					value:'3'
				}],
				tabListUrea: [{
					title: '全部',
					value:''
				}, {
					title: '支付成功',
					value:'9'
				}, {
					title: '取消',
					value:'-1'
				}, {
					title: '退款',
					value:'3'
				}],
				currentPage: 1,
				scrollLeft: 0,
				list: [],				
				ativeUrea:'',
				ative:'', 			}
		},
		onShow() {
			this.getOrder('')
		},
		onLoad() {
			this.getOrder('') 
		},
		onPullDownRefresh() {
			console.log('这里是onPullDownRefresh')
			this.currentPage = 1 
			this.list= []
			if(this.TabHead == 1){
				this.getOrderUrea(this.ativeUrea)
			}else{
				this.getOrder(this.ative)
			}
			// setTimeout(function() {
			// 	uni.stopPullDownRefresh()
			// }, 1000);
		},
		onReachBottom() {
			console.log('这里是onReachBottom')
			if(this.TabHead == 1){
				// this.nextPageUrea()
				if(this.status.loadOrderStatus !='nomore' ){
					this.getOrderUrea(this.ativeUrea)
				} 
			}else{
				// this.nextPage()
				if(this.status.loadOrderStatus !='nomore' ){
					this.getOrder(this.ative)
				}
				
			}
		},
		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(() => {
					if(this.TabHead == 1){
						this.onSearch()
					}else{
						this.onSearch()
					}
				}, 500)
			}, 
			onSearch() {
				this.list = []
				this.currentPage = 1 
				if(this.TabHead == 1){ 
					this.getOrderUrea(this.ativeUrea)
				}else{ 
					this.getOrder(this.ative)
				}
			},
			tabSelect(value,i) {
				console.log(value,'1564155555',i)
				this.list = []
				this.currentPage = 1
				this.TabCur = i
				this.ative = value
				this.getOrder(value) 
			}, 
			getOrder(status) { 
				let postData = {
					currentPage: this.currentPage, //类型：Number  必有字段  备注：无
					pageSize: 10, //类型：Number  必有字段  备注：无 
					params: { //类型：Object  必有字段  备注：无
						orderStatus: status, //类型：String  必有字段  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
						search: this.search //类型：String  必有字段  备注：搜索 ( 油站名称/ 订单编号/ 油品)
					},
				} 
				orderApi.getOrderInfoByPage(postData).then(res => {
					console.log(res)
					if (res.code == 20000) { 
						// 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款 
						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++
							this.status.loadOrderStatus = 'load'
						}
					}
				}).finally(()=>{
						uni.stopPullDownRefresh()
				})
			},
			
			
			 
			tabSelectUrea(value,i) {
				console.log(value,'1564155555666666666666666666')
				this.list = []
				console.log(this.list)
				this.currentPage = 1
				this.UreaTabCur = i
				this.ativeUrea = value
				this.getOrderUrea(value)
			},
			 
			// 尿素站分页查询
			getOrderUrea(status) {
				let postData = {
					currentPage: this.currentPage, //类型：Number  必有字段  备注：无
					pageSize: 10, //类型：Number  必有字段  备注：无 
					params: { //类型：Object  必有字段  备注：无
						orderState: status, //类型：String  必有字段  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
						siteName: this.search //类型：String  必有字段  备注：搜索 ( 油站名称/ 订单编号/ 油品)
					},
				}  
				orderApi.findXoiUreaPage(postData).then(res => {
					if (res.code == 20000) {
						// console.log('订单列表厂房发', page, res.data.list.length)
						// 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款 
						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++
							this.status.loadOrderStatus = 'load'
						}
					}
				}).finally(()=>{
						uni.stopPullDownRefresh()
				})
			},
			changeHaed(code){
				this.TabHead = code
				this.siteList = []
				this.list = []
				this.currentPage = 1
				this.search =''
				if(code == 1){
					this.getOrderUrea('')
				}else if(code == 0){ 
					this.getOrder('')
				}
			},
		}
	}
</script>

<style scoped>
	.headList_head{
		padding: 2% 0;
		width: 16%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 700;
		border-bottom: 2px solid #fff;
		margin: 0% 3%;
	}
	.headList{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff; 
		padding: 1% 3%;
	}
	.ativeHead{
		color: red;
		border-bottom: 2px solid red;
	}
	.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>
