<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 :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
	</view>
</template>

<script setup>
	import * as Api from '@/http/yskApi/order.js'
	import filterVue from './compoents/filter.vue';
	import orderList from './compoents/order-list.vue';
	import {
		reactive, watch
	} from 'vue';
	const search = reactive({
		val: '',
		placeholder: '搜索单号/昵称/姓名/手机号码/商品名称',
		shape: 'square',
		inputStyle: {
			borderRadius: '12rpx'
		},
		actionStyle: {
			textAlign: 'right'
		}
	})

	const pageData = reactive({
		order: {
			list: [],
			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}=await Api.tbOrderInfoData(pageData.order.query)
		pageData.order.hasAjax=true
		pageData.order.list=content
		console.log(content);
	}
	init()
</script>

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