<template>
  <div class="components-content" v-show="tableColumns.length">
    <BaseTable
      :head="tableColumns"
      showIndex
      ref="averageDataTableRef"
      tableName="MODEL_TRAINING_DATA"
      :searchLimitNum="3"
      :actionsWidth="tableActionsLength['2-2-2']"
      hidePagination
    >
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { cloneDeep } from 'lodash-es';
import BaseTable from '@/components/common/table/baseTable.vue';
import { tableActionsLength } from '@/utils/common';

const props = defineProps({
  columns: {
    type: Array as () => unknown[],
    default: () => [],
  },
  steadyAverageData: {
    type: Array as () => unknown[],
    default: () => [],
  },
});

const averageDataTableRef = ref();

const tableColumns = ref<any[]>([]);

watch(
  () => props.steadyAverageData,
  (newValue: any[]) => {
    console.log('steadyAverageData newValue', newValue);
    // setTableData(newValue);
    averageDataTableRef.value.setDataFun(newValue);
  }
  // { immediate: true }
);
watch(
  () => props.columns,
  (newValue: any[]) => {
    console.log('columns newValue', newValue);
    const columns = cloneDeep(newValue);
    columns.unshift({
      key: 'property',
      field: 'property',
      title: '属性',
      ellipsis: true,
      width: 150,
      isShow: true,
    });
    tableColumns.value = columns;
  }
  // { immediate: true }
);
</script>
