<template>
  <JTable model="TABLE" :pagination="false" :data-source="dataSource.value" :columns="columns" :bodyStyle="{ padding: 0 }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'name'">
        <Ellipsis>
          {{ record.name }}
        </Ellipsis>
      </template>
      <template v-if="column.dataIndex === 'type'">
        {{ record.type }}
        <Tooltip v-if="record.type === 'object'">
          <template #title> 请按照json格式输入 </template>

          <AIcon
            type="QuestionCircleOutlined"
            :style="{
              marginLeft: '5px',
              cursor: 'help'
            }"
          />
        </Tooltip>
      </template>
      <template v-if="column.dataIndex === 'value'">
        <div style="max-width: 260px">
          <ValueItem
            v-model:modelValue="record.value"
            :itemType="record.type"
            :options="record.options"
            @change="valueChange"
          />
        </div>
      </template>
    </template>
  </JTable>
</template>

<script setup lang="ts" name="FunctionCall">
  import type { PropType } from 'vue';
  import { reactive, watch } from 'vue';
  import { Table as JTable, Ellipsis, Tooltip, AIcon } from 'linker-ui-components';

  type Emit = {
    (e: 'change', data: Array<{ name: string; value: any }>): void;
    (e: 'update:value', data: Array<{ name: string; value: any }>): void;
  };

  const emit = defineEmits<Emit>();

  const props = defineProps({
    value: {
      type: Array as PropType<Array<{ label: string; value: any }>>,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  });

  const dataSource = reactive<{ value: any[] }>({
    value: []
  });

  const columns = [
    {
      title: '参数名称',
      dataIndex: 'name',
      width: 300
    },
    {
      title: '类型',
      dataIndex: 'type'
    },
    {
      title: '值',
      dataIndex: 'value',
      align: 'center',
      width: 260
    }
  ];

  const valueChange = () => {
    const _value = dataSource.value.map((item) => {
      return {
        name: item.id,
        value: item.value
      };
    });
    emit('update:value', _value);
    emit('change', _value);
  };

  watch(
    () => props.data,
    () => {
      dataSource.value = props.data.map((item: any) => {
        const oldValue = props.value.find((oldItem: any) => oldItem.name === item.id);
        return oldValue ? { ...item, value: oldValue.value } : item;
      });
    },
    { immediate: true, deep: true }
  );
</script>

<style scoped></style>
