<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 { onMounted, ref } from 'vue'

import { useProtocolNamesStore, ProtocolName }  from '@/stores/protocolNames'
import CommunicationTab from "@/components/device_communication/CommunicationTab";
import request from "@/plugins/axios/requests"

// tab 相关
// 默认为设备界面
const activeName = ref<string>('device')

onMounted(() => {
  // 获取协议名
  request.get<ProtocolName[]>('/api/device_communication/')
    .then((res) => {
      const store = useProtocolNamesStore()
      store.protocolNames.push(...res.data!)
    })
})

</script>

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

</style>
