<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="pageData.order.query.createdAt"></filter-vue>
		</view>
		<order-list @printOrder="onPrintOrder" :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
		<my-pagination :totalElements="pageData.order.totalElements"></my-pagination>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import * as Api from '@/http/yskApi/order.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 pageData = reactive({
		order: {
			list: [],
			totalElements:0,
			hasAjax:false,
			query: {
				createdAt: [],
				id: "",
				orderNo: "",
				orderType: "0",
				page: 0,
				pageSize: 10,
				payType: "",
				productName: "",
				status: ""
			}
		}
	})
	watch(()=>pageData.order.query.createdAt,(newval)=>{
		init()
	})
	async function init() {
		const {content,totalElements}=await Api.tbOrderInfoData(pageData.order.query)
		pageData.order.hasAjax=true
		pageData.order.totalElements=totalElements
		pageData.order.list=content
		console.log(content);
	}
	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>