<script setup lang="ts">
import { ref } from "vue"
import { Tabbar, TabbarItem } from "vant"
import SeekProduct from "./components/seek-product.vue"
import CostProduct from "./components/cost-product.vue"

import { useRoute } from "vue-router"


const active = ref('seek')
const route = useRoute()


active.value = route.query.path as string  || 'seek'
</script>

<template>
  <div class="flex">
    <SeekProduct v-if="active === 'seek'" />
    <CostProduct v-else />
    
    <Tabbar v-model="active">
      <TabbarItem name="seek" style="font-size: 16px">咨询商品</TabbarItem>
      <TabbarItem name="cost" style="font-size: 16px">成本商品</TabbarItem>
    </Tabbar>
  </div>
</template>
