<template>
  <div class="vtj-setting" v-if="selected">
    <div class="vtj-setting__path">
      <i class="vtj-icon-layers"></i>
      <span>
        {{ selected.node.name }}:
        <i>{{ selected.node.id }}</i>
      </span>
    </div>
    <Tabs
      v-if="!selected.node.lock"
      class="vtj-setting__tabs"
      :items="tabs"
      v-model="currentTab"
      stretch
      :body-padding="false">
      <div class="vtj-setting__space"></div>
      <WidgetRenderer
        v-for="item in setting"
        :key="item.name"
        v-bind="{ ...item }"
        :visible="item.name === currentTab"></WidgetRenderer>
    </Tabs>
    <ElEmpty
      v-else
      :image-size="1"
      description="组件已被锁定，不能更改设置。"></ElEmpty>
  </div>
  <ElEmpty v-else description="请在左侧画布选中节点"></ElEmpty>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import Tabs, { type TabItem } from '../parts/Tabs.vue';
import WidgetRenderer from '../renderer/WidgetRenderer';
import useCore from '../hooks/useCore';
import { useSelected } from '../hooks/useDesigner';
import { ElEmpty } from 'element-plus';

const { region } = useCore();
const { selected } = useSelected();
const { setting } = region || {};

const tabs: TabItem[] = setting
  .filter((n) => !n.disabled)
  .map((item) => {
    return {
      name: item.name,
      label: item.trigger?.label || item.name,
      closable: false
    };
  });

const currentTab = ref(tabs[0]?.name);
</script>
