<template>
	<view class="home-container flex column">
		<!-- 顶部导航栏 -->
		<topbar :configuration='configuration' :titleStyle='titleStyle'></topbar>
		<!-- 轮播图 -->
		<view class="banner CENTER">
			<image src="../../static/banner.png"></image>
		</view>
		<!-- 提示 -->
		<view class=" flex ac  promptBox CENTER">
			<view class="promptBoxIcons">
				<image src="../../static/lb.png"></image>
			</view>
			待处理订单：{{pendingCount}}个
		</view>
		<!-- 列表 -->
		<view class="list-container oneflex">
			<scroll-view :show-scrollbar="false" @refresherrefresh='refresherrefresh' :refresher-enabled='true'
				:refresher-triggered='refresherTriggered' style="height: 100%;" scroll-y="true"
				@scrolltolower='scrolltolower'>
				<order-item @orderItemCenterClick='orderItemCenterClick' @orderItemFooterClick='orderItemFooterClick'
					:order-data="item" :key="index" v-for="(item,index) in orderList"></order-item>
				<view class="flex ac jc " v-if="!orderList.length">
					<image src="../../static/qx.png" mode="heightFix"></image>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
	import topbar from '@/components/TopBar/index.vue'
	import orderItem from "@/components/orderItem/orderItem.vue"
	import tool from '../../utils/tool' 
	export default {
		components: {
			topbar,
			orderItem, 
		},
		data() {
			return {
				timer: null,
				pendingCount: 0,
				orderList: [],
				page: {
					"pageSize": 10,
					"currentPage": 1,
					"params": {
						"driverId": uni.getStorageSync('user')?.driverId || "",
						"pending": "1"
					}
				},
				refresherTriggered: false,
				configuration: {
					title: "首页"
				},
				titleStyle: this.$parent.setingMenuData || null
			}
		},
		created() { 
			this.init(); 
		},
		methods: {
			orderItemCenterClick(e) {
				uni.navigateTo({
					url: `/Order/pages/details/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
				})
				console.log(e, '跳转详情')
			},
			init() {
				uni.$on('onshow', () => {
					this.refresherrefresh()
				})
			},
			getList() {
				orderApi.getOwnFleetOrders(this.page).then(res => {
					({
						pendingCount: this.pendingCount = 0
					} = res.data);
					if (res.code == 20000) {
						if (this.page.currentPage !== 1) {
							this.orderList = this.orderList.concat(res.data.list)
						} else {
							this.orderList = res.data.list
						}
					}
					this.refresherTriggered = false
				})
			},
			orderItemFooterClick(e) {
				if (e.status == '4') return
				uni.navigateTo({
					url: `/Enter/pages/${tool.orderStatus(e.status).router}/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
				})
			},
			scrolltolower() {
				clearTimeout(this.timer);
				this.timer = null;
				this.timer = setTimeout(() => {
					this.page.currentPage += 1;
					this.getList()
				}, 500)
			},
			refresherrefresh() {
				this.page.currentPage = 1;
				this.refresherTriggered = true;
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>