<script lang="ts">
  import {useNodesData} from '@xyflow/svelte';
  import {getCurrentNodeId} from '#components/utils/NodeUtils';
  import RefParameterItem from './RefParameterItem.svelte';

  const {
        noneParameterText = '无输入参数',
        dataKeyName = 'parameters',
        useChildrenOnly,
        showContentType = false
    }: {
        noneParameterText?: string;
        dataKeyName?: string;
        useChildrenOnly?: boolean,
        showContentType?: boolean,
    } = $props();

    let currentNodeId = getCurrentNodeId();
    let node = useNodesData(currentNodeId);

    let parameters = $derived.by(() => {
        return [...node?.current?.data?.[dataKeyName] as Array<any> || []];
    });
</script>


<div class="input-container">
    {#if (parameters.length !== 0)}
        <div class="input-header">参数名称</div>
        <div class="input-header">参数值</div>
        <div class="input-header"></div>
    {/if}
    {#each parameters as param, index (param.id)}
        <RefParameterItem parameter={param} index={index} {dataKeyName} {useChildrenOnly} {showContentType} />
    {:else }
        <div class="none-params">{noneParameterText}</div>
    {/each}
</div>


<style lang="less">
  .input-container {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr) 22px;
    row-gap: 6px;
    column-gap: 4px;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    .none-params {
      font-size: 12px;
      background: var(--tf-bg-muted);
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      width: 100%;
      grid-column: 1 / -1; /* 从第一列开始到最后一列结束 */
      box-sizing: border-box;
    }

    .input-header {
      font-size: 12px;
      color: var(--tf-text-secondary);
      min-width: 0;
    }
  }

</style>
