<template>
  <div class="container">
    <el-radio-group v-model="tabPosition" style="margin: 5px">
      <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" :lotoId="this.lotoId"/>
  </div>
</template>

<script>
import MapData from "./MapData";
import PointList from "./PointList";
import SwitchStatus from "./SwitchStatus";

export default {
  components: {
    MapData,
    PointList,
    SwitchStatus
  },
  data() {
    return {
      tabPosition: 'first',
      lotoId: '',
    }
  },
  computed: {
    currentComponent() {
      const components = {
        third: 'PointList',
        first: 'MapData',
        second: 'SwitchStatus'
      }
      return components[this.tabPosition]
    }
  },
  mounted() {
    this.lotoId = this.$route.query.lotoId;
    console.log(this.lotoId,'this.lotoId');
  },
  methods: {}
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 700px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
