<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-button label="third">隔离点列表</el-radio-button>
    </el-radio-group>

    <component :is="currentComponent" :id="id" />
  </ContentWrap>
</template>

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

defineOptions({ name: 'LotoStationDetail' })

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

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

<style scoped lang="scss">
.mb-15px {
  margin-bottom: 15px;
}
</style>
