<template>
  <div class="home g-flex">
    <keep-alive>
      <component class="g-flex__body" :is="components[componentId]"></component>
    </keep-alive>
    <app-tabbar :data-list="tabList" @change="onChange" fixed />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Tabbar } from '@mobile/components/base/tabbar/interface'
import AppTabbar from '@mobile/components/base/tabbar/index.vue'
import Home from './components/main/index.vue'
import Market from './components/market/index.vue'
import Order from './components/order/index.vue'
import Mine from './components/mine/index.vue'

const components = {
  Home,
  Market,
  Order,
  Mine,
}

const componentId = ref('Home');
const tabList: Tabbar[] = [
  {
    component: 'Home',
    label: '首页',
    icon: {
      active: require('@mobile/assets/icon/wap-home.svg'),
      inactive: require('@mobile/assets/icon/wap-home-o.svg'),
    }
  },
  {
    component: 'Market',
    label: '市场',
    icon: 'g-icon--market'
  },
  {
    component: 'Order',
    label: '订单',
    icon: 'g-icon--order'
  },
  {
    component: 'Mine',
    label: '我的',
    icon: 'g-icon--mine'
  }
]

const onChange = (index: number) => {
  componentId.value = tabList[index].component;
}
</script>

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