<template>
  <Empty v-if="!metadata || (metadata && !metadata.functions?.length)" style="margin-top: 50px">
    <template #description>
      请配置对应产品的
      <!-- <a @click="emits('onJump', 'Metadata')">物模型属性功能</a> -->
      <a @click="onJump">物模型属性功能</a>
    </template>
  </Empty>
  <template v-else>
    <Tabs v-model:activeKey="activeKey">
      <TabPane key="Simple" tab="精简模式" />
      <TabPane key="Advance" tab="高级模式" />
    </Tabs>
    <component :is="tabs[activeKey]" />
  </template>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { useInstanceStore, useMenuStore } from '@jdlinker/func';
  import Simple from './components/Simple.vue';
  import Advance from './components/Advance.vue';
  import { Tabs, TabPane, Empty } from 'linker-ui-components';

  const menuStory = useMenuStore();
  const instanceStore = useInstanceStore();
  const metadata = computed(() => JSON.parse(instanceStore.detail?.metadata || '{}'));
  const activeKey = ref('Simple');
  const tabs = {
    Simple,
    Advance
  };

  const onJump = () => {
    menuStory.jumpPage('device/Product/Detail', {
      id: instanceStore.current.productId
    });
  };
</script>
