<template>
  <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
    <el-tab-pane label="设备通信参数" name="device">
      <div class="contain">
        <communication-tab tab-type="communicate" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="虚拟设备通信参数" name="simulate_device">
      <div class="contain">
        <communication-tab tab-type="simulate_communicate" />
      </div>
    </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>

<style>
.contain{
  /*width: 95%;*/
  margin: auto;
}

</style>
