<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="third">电机点位列表</el-radio-button>
    </el-radio-group>

    <component :is="currentComponent" :motorMapId="this.motorMapId"/>
  </div>
</template>

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


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

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