<template>
	<view class="min-page bg-gray u-font-28">
		<view class="top">
			<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
				<up-search v-bind="search" v-model="search.val"></up-search>
			</view>
			<filter-vue v-model:time="order.data.query.createdAt"></filter-vue>
		</view>
		<order-list @printOrder="onPrintOrder" :hasAjax="order.data.hasAjax" :list="order.data.list"></order-list>
		<my-pagination @change="pageChange" :totalElements="order.data.total"></my-pagination>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import {onLoad,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
	import * as Api from '@/http/yskApi/order.js'
	import LIST from '@/commons/class/list.js'
	import {$printOrder} from '@/http/yskApi/Instead.js'
	import filterVue from './compoents/filter.vue';
	import orderList from './compoents/order-list.vue';
	import infoBox from '@/commons/utils/infoBox.js'
	import {
		reactive, watch
	} from 'vue';
	
	const search = reactive({
		val: '',
		placeholder: '搜索单号/昵称/姓名/手机号码/商品名称',
		shape: 'square',
		inputStyle: {
			borderRadius: '12rpx'
		},
		actionStyle: {
			textAlign: 'right'
		}
	})
	
	const order=new LIST({
		list: [],
		query: {
			createdAt: [],
			id: "",
			orderNo: "",
			orderType: "0",
			page: 0,
			pageSize: 10,
			payType: "",
			productName: "",
			status: ""
		}
	})
	function pageChange(e){
		order.setVal('page',e)
		console.log(e);
		console.log(order.data.page);
		init()
	}
	
	console.log(order.list);
	
	watch(()=>order.data.query.createdAt,(newval)=>{
		init()
	})
	async function init() {
		const {content,totalElements}=await Api.tbOrderInfoData({...order.data.query,page:order.data.page})
		uni.stopPullDownRefresh()
		order.setVal('list',content)
		console.log(order.data.list);
		order.setVal('total',totalElements)
		order.setVal('hasAjax',true)
	}
	onPullDownRefresh(()=>{
		pageData.order.query.page=0
		init()
	})
	
	
	onShow(init)
	async function printOrder(item){
		try{
			console.log(item);
			const res= await $printOrder({
				tableId:item.tableId
			})
			infoBox.showToast('已发送打印请求')
		}catch(e){
			console.log(e);
			infoBox.showToast('发送打印请求失败')
			//TODO handle the exception
		}
		
	}
	function onPrintOrder(e){
		console.log(e);
		uni.showModal({
			title: '提示',
			content: '是否打印该订单',
			success(res) {
				if (res.confirm) {
					printOrder(e)
				}
			}
		})
	}
</script>

<style>
	.top {
		background-color: #E5E5E5;
	}
</style>