<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs">
    <el-tab-pane label="device" name="device">
      <communication-tab tab-type="communicate" />
    </el-tab-pane>
    <el-tab-pane label="simulate_device" name="simulate_device">
      <communication-tab tab-type="simulate_communicate" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'

import { useProtocolNamesStore }  from '@/stores/protocolNames'
import CommunicationTab from "@/components/device_communication/CommunicationTab";

// tab 相关
const activeName = ref<string>('simulate_device')

onMounted(() => {
  axios.get('/api/device_communication/')
    .then((res) => {
      const store = useProtocolNamesStore()
      store.protocolNames.push(...res.data)
    })
})

</script>
