<template>
  <ContentWrap>
    <el-radio-group v-model="tabPosition" class="mb-15px">
      <el-radio-button label="first">锁柜视图</el-radio-button>
      <el-radio-button label="second">列表视图</el-radio-button>
    </el-radio-group>
    <component :is="currentComponent" :cabinetId="cabinetId" />
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import LookList from './SlotsList.vue'
import MapData from './MapData.vue'

defineOptions({ name: 'LockCabinetDetail' })

const route = useRoute()
const tabPosition = ref('first')
const cabinetId = ref(route.query.cabinetId as string)

const currentComponent = computed(() => {
  const components = {
    first: MapData,
    second: LookList
  }
  return components[tabPosition.value]
})
</script>
