<template>
	<view class="min-page bg-gray u-font-28">
		<up-sticky offset-top="0">
			<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="pageData.query.orderNo" @search="searchConfirm" @clear="searchConfirm" @custom="searchConfirm"></up-search>
				</view>
				<filter-vue @updateStatus="updateQuery('status',$event)"  v-model:time="pageData.createdAt" ></filter-vue>
			</view>
		</up-sticky>
		
		<order-list @printOrder="onPrintOrder" :list="pageData.list"></order-list>
		<template v-if="pageData.list.length>0">
			<my-pagination :page="pageData.query.page" @change="pageChange" :totalElements="pageData.total"></my-pagination>
		</template>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	import {onLoad,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
	import filterVue from './compoents/filter.vue';
	import orderList from './compoents/order-list.vue';
	import infoBox from '@/commons/utils/infoBox.js'
	import {getTodayTimestamps} from '@/commons/utils/dayjs-time.js';
	import { getOrderList,printOrder } from '@/http/api/order.js'
	
	const search = reactive({
		placeholder: '搜索单号/商品名称',
		shape: 'square',
		inputStyle: {
			borderRadius: '12rpx'
		},
		actionStyle: {
			textAlign: 'right'
		}
	})
	const today = getTodayTimestamps();
	const pageData = reactive({
		createdAt: [today.start,today.end],
		list: [],
		total: 0,
		query: {
			orderNo: "",
			userId: "",
			platformType: "",
			page: 1,
			pageSize: 10,
			startTime: today.start,
			endTime: today.end,
			status: ""
		}
	})
	
	onLoad((opt)=>{
		if(  opt.type == 'user' && opt.userId ) {
			pageData.query.userId = opt.userId
		}
	})
	onShow(init)
	onPullDownRefresh(()=>{
		pageData.query.page = 1
		init()
	})
	watch(()=>pageData.createdAt,(newval)=>{
		pageData.query.startTime = newval[0]
		pageData.query.endTime = newval[1]
		init()
	})

	/**
	 * 获取订单列表
	 */
	async function init() {
		const res = await getOrderList({
			...pageData.query,
		})
		uni.stopPullDownRefresh()
		pageData.list = res.records
		pageData.total = res.totalRow
	}
	
	/**
	 * 是否打印该订单
	 * @param {Object} e
	 */
	function onPrintOrder(item){
		uni.showModal({
			title: '提示',
			content: '是否打印该订单',
			async success(res) {
				if (res.confirm) {
					try{
						const res= await printOrder({
							id :item.id,
							type: item.status == 'unpaid' ? 1 : 0
						})
						infoBox.showToast('已发送打印请求')
					}catch(e){
						infoBox.showToast('发送打印请求失败')
					}
				}
			}
		})
	}
	
	/**
	 * 分页加载
	 * @param {Object} e
	 */
	function pageChange(e){
		pageData.query.page = e
		console.log(e)
		init()
	}
	
	/**
	 * 状态改变监听
	 * @param {Object} key
	 * @param {Object} e
	 */
	function updateQuery(key,e){
		pageData.query[key] = e
		pageData.query.page = 1
		init()
	}
	
	/**
	 * 搜索监听
	 */
	function searchConfirm(){
		pageData.query.page = 1
		init()
	}
	
	
</script>

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