<template>
  <kuc-table
    className="table-option"
    :columns="columns"
    :data="data"
    @change.stop="updateValue"
    :headerVisible="false"
  />
</template>

<script setup lang="ts">
import type { KucEvent } from '@/types/my-kintone';
import { Table, Text, type TableChangeEventDetail } from 'kintone-ui-component';
import { defineProps, defineEmits, ref, watch, h, render, reactive } from 'vue';
interface MultiItem {
  value: string;
}

const props = defineProps<{
  value: string[];
}>();

const data = ref<MultiItem[]>((props.value || ['', '']).map((x) => ({ value: x })));

const columns = reactive([
  {
    title: '',
    field: 'value',
    render: (cellData: string) => {
      return new Text({ value: cellData });
    },
  },
]);

const emit = defineEmits<{
  (e: 'change', data: KucEvent<string[]>): void;
}>();

const updateValue = (event: KucEvent<TableChangeEventDetail<MultiItem>>) => {
  data.value = event.detail.data || [{ value: '' }, { value: '' }];
  const multiData = event.detail.data ? event.detail.data.map((x) => x.value) : [];
  emit('change', { detail: [...multiData] });
};

</script>
