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

  const {
    parameters: manualParameters = undefined,
    emptyText = '无输入参数'
  }: {
    parameters?: Array<any>,
    emptyText?: string
  } = $props();

  let currentNodeId = getCurrentNodeId();
    let node = useNodesData(currentNodeId);
    let currentParameters = $derived.by(() => {
        return [...node?.current?.data?.parameters as Array<any> || []];
    });
    let parameters = $derived.by(() => {
        if (Array.isArray(manualParameters)) {
            return [...manualParameters];
        }
        return currentParameters;
    });
    let parameterItems = $derived.by(() => {
        return parameters.map((param) => ({
            parameter: param,
            index: currentParameters.findIndex((item) => item?.id === param?.id)
        })).filter((item) => item.index >= 0);
    });
</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 parameterItems as item (item.parameter.id)}
        <DefinedParameterItem parameter={item.parameter} index={item.index} />
    {:else }
        <div class="none-params">{emptyText}</div>
    {/each}
</div>


<style lang="less">
  .input-container {
    display: grid;
    grid-template-columns: 80% 10% 10%;
    row-gap: 5px;
    column-gap: 3px;

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

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


</style>
