<template>
  <div class="vtj-setting-panel">
    <template v-if="selected">
      <SubPanel title="通用属性">
        <ElForm
          size="small"
          label-width="100px"
          :key="`common_${selected.node.id}`"
          @keydown.enter.prevent.stop>
          <SetterRenderer
            v-for="item in commonProps"
            :key="item.name"
            v-bind="item"
            :node="selected.node"></SetterRenderer>
        </ElForm>
      </SubPanel>

      <SubPanel title="组件属性">
        <ElForm
          @keydown.enter.prevent.stop
          v-if="extendProps && extendProps.length"
          size="small"
          label-width="100px"
          :key="`extend_${selected.node.id}`">
          <SetterRenderer
            v-for="item in extendProps"
            :key="item.name"
            v-bind="item"
            :node="selected.node"></SetterRenderer>
        </ElForm>
        <div v-else class="vtj-setting-panel__empty">该组件无扩展属性</div>
      </SubPanel>
      <SubPanel title="自定义属性"></SubPanel>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { SetterRenderer, SubPanel } from '@vtj/engine';
import { ElForm } from 'element-plus';
import { useSelected } from '../hooks/useDesigner';
import { computed } from 'vue';
import useCore from '../hooks/useCore';

const { engine } = useCore();

const { selected } = useSelected();

const defaultSetters = [
  {
    name: 'InputSetter',
    label: '文本'
  },
  {
    name: 'ExpressionSetter',
    label: '表达式'
  }
];

const commonProps = computed(() => {
  const node = selected.value?.node;
  return [
    {
      name: 'key',
      setters: defaultSetters,
      value: node?.key
    },
    {
      name: 'ref',
      setters: defaultSetters,
      value: node?.ref
    },
    {
      name: 'className',
      label: 'class',
      setters: defaultSetters,
      value: node?.className
    },
    {
      name: 'children',
      label: '文本',
      title: '如设置组件文本，将清空子组件',
      setters: defaultSetters,
      value: Array.isArray(node?.children) ? '' : node?.children
    }
  ];
});

const extendProps = computed(() => {
  const node = selected.value?.node;
  if (!node) return [];
  const root = node.root;
  const desc =
    engine.assets.componentMap[node.name] || root.componentMap[node.name];
  if (!desc) return [];
  const props = desc.props || [];
  return props.map((n) => {
    const item = node.props[n.name];
    return {
      ...n,
      value: (item?.getValue() ?? n.defaultValue) as any
    };
  });
});
</script>
