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

  const emits = defineEmits(['register', 'success']);

  defineProps({
    recordEdgeInstanceData: {
      type: Object as PropType<EdgeInstanceItemType>,
      default: () => {},
    },
  });

  const route = useRoute();

  const go = useGo();

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

  const edgeId = ref(route.params?.edgeId as string);

  const recordData = ref<EdgeDeviceItemType>();

  const handleEventIsSuccess = () => {
    emits('success');
  };

  infoEdgeDevice(deviceId.value as string).then((res) => {
    recordData.value = res;
  });

  function goBack() {
    go('/edge/edge_device/' + edgeId.value);
  }
</script>

<template>
  <PageWrapper :title="`边缘设备详情`" contentBackground @back="goBack">
    <!-- 基础信息 -->
    <div class="m-4">
      <EdgeDeviceBasicInfo
        :recordData="recordData"
        :edgeId="edgeId"
        @success="handleEventIsSuccess"
      />
    </div>
    <!-- Tab信息 -->
    <div>
      <EdgeDeviceTabInfo v-if="recordData" :recordData="recordData" />
    </div>
  </PageWrapper>
</template>

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