<template>
  <View title="商场服务" sub-title="Service Facilities">
    <Tabs class="width" @click="handleTabs" :list="list" />

    <component :is="currentComp" />
  </View>
</template>

<script setup>
import { defineAsyncComponent, ref, computed } from 'vue'
import { list } from './tabs'
import Tabs from '@/components/Tabs/Tabs.vue'
import View from '@/layouts/View.vue'

const ServiceList = defineAsyncComponent(() => import('@/components/ServiceList/ServiceList.vue'))
const Traffic = defineAsyncComponent(() => import('@/components/Traffic/Traffic.vue'))
const MallIntroduce = defineAsyncComponent(() => import('@/components/MallIntroduce/MallIntroduce.vue'))

const dynamicComList = [ServiceList, Traffic, MallIntroduce]
const tabIdx = ref(0)
function handleTabs(index) {
  tabIdx.value = index
}

const currentComp = computed(() => dynamicComList[tabIdx.value])
</script>

<style lang="scss" scoped>
.width {
  position: absolute !important;
  top: 214px !important;
  left: 170px !important;
  width: 491px !important;
  height: 88px !important;
}
</style>
