<template>
  <div class="vtj-setting-panel vtj-directives">
    <SubPanel title="内置指令">
      <ElForm v-if="selected" label-width="80px" :key="selected?.node.id">
        <SetterRenderer
          name="v-if"
          setters="ExpressionSetter"
          :value="values['v-if']"
          :binding="false"
          :node="selected.node"
          @change="onChange('v-if', $event)"></SetterRenderer>
        <SetterRenderer
          name="v-show"
          :value="values['v-show']"
          setters="ExpressionSetter"
          :binding="false"
          :node="selected.node"
          @change="onChange('v-show', $event)"></SetterRenderer>
        <SetterRenderer
          name="v-model"
          :value="values['v-model']"
          setters="ExpressionSetter"
          :binding="false"
          :node="selected.node"
          @change="onChange('v-model', $event)"></SetterRenderer>
        <SetterRenderer name="v-on" setters="ExpressionSetter"></SetterRenderer>
        <SetterRenderer
          name="v-bind"
          :value="values['v-bind']"
          setters="ExpressionSetter"
          :binding="false"
          :node="selected.node"
          @change="onChange('v-bind', $event)"></SetterRenderer>
        <DataItem title="v-for">
          <SetterRenderer
            name="v-for"
            :value="values['v-for']"
            label="循环数据"
            setters="ExpressionSetter"
            :binding="false"
            :node="selected.node"
            @change="onChange('v-for', $event)"></SetterRenderer>
          <SetterRenderer
            name="item"
            :value="values['item']"
            label="迭代变量名"
            :setters="{
              name: 'InputSetter',
              props: { placeholder: '默认: item' }
            }"
            :node="selected.node"
            :binding="false"
            @change="onChange('item', $event)"></SetterRenderer>
          <SetterRenderer
            name="index"
            :value="values['index']"
            label="索引变量名"
            :setters="{
              name: 'InputSetter',
              props: { placeholder: '默认: index' }
            }"
            :node="selected.node"
            :binding="false"
            @change="onChange('index', $event)"></SetterRenderer>
        </DataItem>
      </ElForm>
    </SubPanel>
  </div>
</template>
<script lang="ts" setup>
import { SubPanel, DataItem, SetterRenderer, JSExpression } from '@vtj/engine';
import { ElForm } from 'element-plus';
import { computed } from 'vue';

import { useSelected } from '../hooks/useDesigner';
const { selected } = useSelected();

const directives = ['v-if', 'v-show', 'v-model', 'v-on', 'v-bind', 'v-for'];

const values = computed(() => {
  const node = selected.value?.node;
  if (!node) return {};
  const result: Record<string, any> = {};
  directives.forEach((name) => {
    result[name] = node.directives[name]?.value || '';
  });
  return result;
});

const onChange = (name: string, value: JSExpression | string) => {
  const node = selected.value?.node;
  if (!node) return;
  if (name.startsWith('v-')) {
    const exp = value as JSExpression;
    if (exp.value) {
      node.setDirective(name, {
        value: exp
      });
    } else {
      node.removeDirective(name);
    }
  } else {
    if (value) {
      node.setDirective('v-for', {
        extend: {
          [name]: value
        }
      });
    }
  }
};
</script>
