
  <template>
    <!-- <kuc-table className='table-option' 
    :columns="columns" 
    :data="data"  
     @change="updateValue"
     :headerVisible="false"
    ref="table"/> -->
    <div ref="tableContainer"></div>
  </template>
  
  <script setup lang="ts">
  import type { KucEvent } from '@/types/my-kintone';
  import { Table, Text, type TableChangeEventDetail } from 'kintone-ui-component';
  import { defineProps, defineEmits, computed, ref, watch, inject, type Ref, onMounted, onUnmounted } from 'vue';
 interface MuiltItem{
    value:string
  } 

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

  const tableContainer = ref<HTMLDivElement>();
  const table = ref<Table | null>(null);
  const data = ref<MuiltItem[]>((props.value || ['', '']).map(x => ({ value: x })));
  watch(
    () => props.value,
    (newValue)=>{
       data.value =(newValue || ['', '']).map((x) => ({ value: x }));
       if (table.value) {
          table.value.data = data.value; // 更新 Table 数据
        }
    },
    {
      deep:true,immediate:true
    });
   
  const emit = defineEmits<{
    (e: 'change', data: KucEvent<string[]>): void;
    (e: 'update:modelValue', value: string[]): void;
    }>();


  const updateValue=(event:KucEvent<TableChangeEventDetail<MuiltItem>>)=>{
    data.value = event.detail.data||[{value:''},{value:''}];
    if (table.value) {
        table.value.data = data.value; 
    }
    const muiltData = event.detail.data ? event.detail.data.map(x=>x.value) :[];
    emit('change', { detail: [...muiltData] });
    // emit('update:modelValue',  [...muiltData] );
    // emit('change', muiltData);
  }

  onMounted(()=>{
      table.value = new Table({
        className:'table-option',
        headerVisible:false,
        actionButton:true,
        columns:[
          {
            field:"value",
            render:(cellData:any)=>{
              const text = new Text({value:cellData});
              return text;
            }
          },
        ],
        data:data.value
      });
      table.value.addEventListener('change', updateValue);
      tableContainer.value?.appendChild(table.value);
  });

  onUnmounted(() => {
  if (table.value) {
    table.value.removeEventListener('change', updateValue);
  }
});
  </script>
 