<script lang="ts" setup>
  import { ref } from 'vue';
  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { infoEdgeInstance } from '/@/api/edgeManage/edgeInstance';
  import { EdgeInstanceBasicInfo } from '../EdgeInstanceBasicInfo';
  import { EdgeInstanceTabInfo } from '../EdgeInstanceTabInfo';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useGo } from '/@/hooks/web/usePage';

  defineEmits(['register']);

  defineOptions({ name: 'EdgeDetail' });

  const route = useRoute();

  const go = useGo();

  const edgeId = ref(route.params?.id);

  const recordData = ref<EdgeInstanceItemType>();

  infoEdgeInstance(edgeId.value as string).then((res) => {
    recordData.value = res;
  });

  function goBack() {
    go('/edge/instance');
  }
</script>

<template>
  <PageWrapper :title="`边缘详情`" contentBackground @back="goBack">
    <!-- 基础信息 -->
    <div class="m-4">
      <EdgeInstanceBasicInfo v-if="recordData" :recordData="recordData" />
    </div>
    <!-- Tab信息 -->
    <div>
      <EdgeInstanceTabInfo v-if="recordData" :recordData="recordData" />
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped></style>