<script setup lang="ts">
import { ref,onMounted,computed,onUnmounted,watch } from 'vue'
import list from "./list.vue"
import finish from "./finish/finish.vue"
import cancel from "./cancel/cancel.vue"


    const currentIndex = ref(0);
    const tabs = ref([
      { name: '待出餐' },
      { name: '已完成' },
      { name: '已取消' },
    ]);


    const switchTab = (index) => {
      currentIndex.value = index;
    };


</script>

<template>
<scroll-view scroll-y class="preview">

      <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">
             <list></list>
        </block>
        <block v-if="currentIndex === 1">
            <finish></finish>
        </block>
        <block v-if="currentIndex === 2">
     	   <cancel></cancel>
        </block>
      </view>
  </scroll-view>

 
</template>
<style lang="scss">
page {
	background-color: #f5f5f5;
}
.tab-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.tab-item {
  padding: 10px;
  cursor: pointer;
}
.tab-item.active {
  color: #4095e5;
  font-weight: bold;
}
.container {
  align-items: center;
  padding: 20rpx;
}


</style>