<script setup>
	import {ref} from 'vue'
	const currentIndex = ref(0);
	const tabs = ref([
	  { name: '全部' },
	  { name: '进行中' },
	  { name: '已完成' }
	]);
	const switchTab = (index) => {
	  currentIndex.value = index;
	};
	
	const { safeAreaInsets } = uni.getSystemInfoSync()
	
	const orderTabs = ref([
	  { orderState: 0, title: '全部' },
	  { orderState: 1, title: '进行中' },
	  { orderState: 2, title: '评价' },
	  { orderState: 3, title: '退款' },
	])
	 
	const active = ref(1)
	const list1 = reactive([
	  { title: '备餐中' },
	  { title: '已出餐' },
	  { title: '已完成' }
	])
	
</script>


<template>
	<view class="tab-menu">
		   <view class="tab-item"
		         v-for="(tab, index) in tabs"
		         :key="index"
		         :class="{active: currentIndex === index}"
		         @click="switchTab(index)">
		     {{ tab.name }}
		   </view>
		 </view>
		 <view class="content">
		   <block v-if="currentIndex === 0">
		   </block>
		   <block v-if="currentIndex === 1">
		   </block>
		   <block v-if="currentIndex === 2">
		   </block>
		 </view>
</template>


<style>
	.tab-menu {
		  display: flex;
		  justify-content: space-around;
		  padding: 10px 0;
		  background-color: #f5f5f5;
		}
		.tab-item {
		  padding: 10px;
		  cursor: pointer;
		}
		.tab-item.active {
			  color: #007aff;
			  font-weight: bold;
			}
</style>



const changeTab = (tab) => {
  if (tab === '全部') {
    Status.value.displayedOrders = Status.value.orders;
  } else {
    Status.value.displayedOrders = Status.value.orders.filter(order => {
      switch (tab) {
        case '待支付':
		 for(let i in Status.value.orders){
          return Status.value.orders[i].orderStatus === '待支付';}
		case '代发货':
		 for(let i in Status.value.orders){
		  return Status.value.orders[i].orderStatus === '代发货';}
        case '已发货':
         for(let i in Status.value.orders){
          return Status.value.orders[i].orderStatus === '已发货';}
        case '售后':
         for(let i in Status.value.orders){
          return Status.value.orders[i].orderStatus === '售后';}
        default:
          return false;
      }
    });
  }
}
