<template>
	<view>
		<view class="order" style="position: relative;">
			<view style="background-color: #fff; padding-top: 160rpx;position: fixed; top: 0; left: 0; right: 0; z-index: 999;">
				<u-tabs :list="list" lineWidth="30" lineColor="$uni-bg-color-primary" :activeStyle="{
            color: '#000',
            fontWeight: 'bold',
            fontSize: '32rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="handlerChangeItem"  ></u-tabs>
			</view>
			
			
			<!-- <orderItem :list="orderList" :typeStyle.sync="typeStyle" v-if="status == 5"></orderItem> -->
			
			<orderList :list="orderList" :typeStyle.sync="typeStyle" ></orderList>

		</view>
		<tabbar currentTab="merchantOrder" />
	</view>
</template>

<script>
	// import orderItem from './orderItem.vue';
	import orderList from '../components/orderList.vue'
	import {
		getOrderListApi,
		getAppointListApi
	} from '@/api/merchant/order';
	export default {
		components: {
			// orderItem,
			orderList
		},
		data() {
			return {
				list: [{
						id: '0',
						name: '全部'
					},
					{
						id: '1',
						name: '待核销'
					},
					{
						id: '2',
						name: '已核销'
					},
					{
						id: '3',
						name: '已退款'
					},
					// {
					// 	id: '4',
					// 	name: '已过期'
					// },
					// {
					// 	id: '5',
					// 	name: '预约列表'
					// },
				],
				orderList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				typeStyle: 0,
				status: '0',
			};
		},

		methods: {
			// 点击切换顶部导航栏
			handlerChangeItem(item) {
				this.typeStyle = item.index;
				this.status = item.id
				this.params = {
					pageNum: 1,
					pageSize: 10,
				}
				this.getOrderList(item.id);
				// if(item.id == 5){
				// 	this.getListMerchantReservations()
				// }else{
					
				// this.getOrderList(item.id);
				// }
			},

			async getOrderList(status) {
				let result = Object.assign({}, {
					paging: `${this.params.pageNum},${this.params.pageSize}`,
					status: status || 0,
				}, );
				let res = await getOrderListApi({
					...result
				});
				if (res.code === 'OK') {
					this.orderList = res.data.records;
				}
			},
			// async getListMerchantReservations(){
			// 	let result = Object.assign({}, {
			// 		offset: this.params.pageNum ,
			// 		size:this.params.pageSize,
			// 		merchantId:this.$store.state.data.merchantInfo.merchant.id,
			// 	}, );
			// 	let res = await getAppointListApi({
			// 		...result
			// 	});
			// 	if (res.code === 'OK') {
			// 		this.orderList = res.data;
			// 	}
			// }
		},

		created() {
			this.getOrderList();
		},
	};
</script>

<style lang="scss" scoped>
	.order {
		min-height: calc(100vh - 160rpx);
		background-color: $uni-bg-color-page;
		padding-top: 240rpx;
	}
</style>