<template> 
	<view class="order_container" style="height: 100%;overflow: hidden;">
		<view :style="{height:`${titleStyle.height}px`}" class="order_title">
			<text> 我的订单</text>
		</view>
		<!-- 列表 -->
		<view style="overflow: hidden;" class="order_list_container flex column">
			<!-- 搜索框 -->
			<view class="order_list_header">
				<!-- 输入框 -->
				<view class="flex">
					<view class="order_list_header_input oneflex">
						<uni-icons class="order_list_header_input_icon" type="search" size="20"></uni-icons>
						<input @confirm="seach" v-model="page.params.id" placeholder="输入订单号搜索" type="text">
						<uni-icons v-if="page.params.id!==''" @click="page.params.id=''" type="clear"
							size="20"></uni-icons>
					</view>
				</view>
				<!-- 选项 -->
				<view class="order_list_option_list flex around">
					<view @click="page.params.orderStatus =item.value;page.currentPage=1;getList() "
						v-for="(item,index) in options" :key="index"
						:class=" `order_list_option_list_item flex jc ac` + ( page.params.orderStatus==item.value?' select_order_list_option_list_item':'')  ">
						{{item.label}}
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="order_list">
				<scroll-view @refresherrefresh='refresherrefresh' :refresher-enabled='true'
					:refresher-triggered='refresherTriggered' v-if="orderList.length" style="height: 100%;"
					scroll-y="true" @scrolltolower='scrolltolower'>
					<order-item :orderData='item' class="order_list_item" :listIndex='index' :index='index'
						v-for="(item,index) in orderList"></order-item>
				</scroll-view>
				<image class="qx" v-else src="../../static/qs.png" mode=""></image>
			</view>
		</view>
	</view> 
</template>
<script>
	import order from '@/api/order.js'
	import orderItem from "@/components/orderItem/orderItem.vue"
	export default {
		components: {
			orderItem
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				refresherTriggered: false,
				orderList: [],
				page: {
					"pageSize": 10,
					"currentPage": 1,
					"params": {
						"orderStatus": "", // 筛选条件-订单状态，注意这里传参是字符串，不是数值
						'id': ''
					},
					"sorted": {},
					"columns": [],
					"totalCount": '',
					"totalPage": ''
				},
				titleStyle: {},
				options: [{
					label: '全部',
					value: ''
				}, {
					label: '充电中',
					value: '2'
				}, {
					label: '停止中',
					value: '3'
				}, {
					label: '已结束',
					value: '4'
				}]
			}
		},
		created() { 
			this.init()
		},
		onLoad() { 
			this.onOrderUpdate()
		},
		mounted() {
			
		},
		methods: {
			onOrderUpdate() {
				uni.$on('orderUpdate', () => {
					this.seach()
				})
			},
			refresherrefresh() {
				this.refresherTriggered = true;
				this.seach()
			},
			seach() {
				this.page.currentPage = 1;
				this.getList();
			},
			scrolltolower() {
				this.page.currentPage += 1;
				this.getList();
			},
			getList() {
				// debugger
				console.log(this.page,'this.page')
				order.getMobileByPage(this.page).then(res => {
					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
				})
			},
			init() {
				this.titleStyle =  wx.getMenuButtonBoundingClientRect(); //获取高度
				this.getList()
			}
		}
	}
</script>
<style>
	@keyframes charge {
		0% {
			background: linear-gradient(to right, rgba(79, 195, 197, 0.30), rgba(255, 255, 255, 0)) ;
		}
		50% {
			background-color: rgba(79, 195, 197, 0.30) ;
		}
		100% {
			background: linear-gradient(to right, rgba(79, 195, 197, 0.30), rgba(255, 255, 255, 0)) ;
		}
	}

	.charging {
		animation: charge 3s infinite linear;
	}
</style>
<style lang="scss" scoped>
	@import 'index.scss';
	@import '../index/index.scss';
</style>