<!-- 我的订单 -->
<template>
    <app-view class="order-list">
        <template #header>
            <app-navbar class="order-list__navbar" title="我的订单">
                <template #right>
                    <div class="button-more" @click="onMoreClick" v-if="activeTab != 2">
                        <span v-if="activeTab === 1">已成交</span>
                        <span v-else>更多</span>
                    </div>
                </template>
            </app-navbar>
        </template>
        <Tabs v-model:active="activeTab">
            <Tab title="采购订单">
                <purchase-trade v-if="activeTab === 0" />
            </Tab>
            <Tab title="转让委托">
                <transfer-sell v-if="activeTab === 1" />
            </Tab>
            <Tab title="转让成交">
                <transfer-buy v-if="activeTab === 2" />
            </Tab>
            <Tab title="供求委托">
                <wr-order v-if="activeTab === 3" />
            </Tab>
            <Tab title="供求成交">
                <wr-trade v-if="activeTab === 4" />
            </Tab>
        </Tabs>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Tab, Tabs } from 'vant'
import { useNavigation } from '@/hooks/navigation'
import PurchaseTrade from './components/purchasetrade/index.vue'
import WrOrder from './components/wrorder/index.vue'
import WrTrade from './components/wrtrade/index.vue'
import TransferBuy from './components/transferbuy/index.vue'
import TransferSell from './components/transfersell/index.vue'

const { routerTo } = useNavigation()
const activeTab = shallowRef(0)

const onMoreClick = () => {
    switch (activeTab.value) {
        case 0: {
            routerTo('his-purchase-trade-detail')
            break
        }
        case 1: {
            routerTo('his-transfer-detail')
            break
        }
        case 3: {
            routerTo('his-wrorder-detail')
            break
        }
        case 4: {
            routerTo('his-wrtrade-detail')
            break
        }
    }
}
</script>

<style lang="less">
@import './index.less';
</style>