<template>
  <div class="param-setting">
    <el-card class="algorithm-select" shadow="never">
      <template #header>{{ $t('数据训练.算法选择') }}</template>
      <el-radio-group v-model="algorithm">
        <el-radio-button
          v-for="item in algorithmOptions"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-radio-group>
    </el-card>
    <BaseTable
      v-if="false"
      ref="baseTableRef"
      :tableName="TABLE_NAME.DATA_TRAINING_PARAM_SETTING"
      showIndex
    >
    </BaseTable>
    <el-card shadow="never">
      <template #header>{{ $t('数据训练.算法参数设置') }}</template>
      <TableForm ref="tableFormRef" :tableName="TABLE_NAME.DATA_TRAINING_PARAM_SETTING">
      </TableForm>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { CommonStore } from '@/stores/common';
import { cloneDeep, isBoolean } from 'lodash-es';
import { TABLE_NAME } from '@/utils/enum/tableName';

interface Props {
  param: any;
}
const props = withDefaults(defineProps<Props>(), {
  param: () => {},
});

const commonStore = CommonStore();
const algorithmOptions = commonStore.getDictData('TRAINING_ALGORITHM').A;
const baseTableRef = ref();
const tableFormRef = ref();
const algorithm = ref('多项式拟合');
const getFormDataFun = async () => {
  const valid = await tableFormRef.value?.validateFun();
  if (valid) {
    const formData = tableFormRef.value?.getFormDataFun();
    formData.algorithm = algorithm.value;
    return formData;
  }
};
watchEffect(() => {
  if (props.param) {
    const newParam = cloneDeep(props.param);
    newParam.dataNoOrder = isBoolean(newParam.dataNoOrder) ? String(newParam.dataNoOrder) : null;
    newParam.preDisposeData = isBoolean(newParam.preDisposeData)
      ? String(newParam.preDisposeData)
      : null;
    tableFormRef.value?.setFormDataFun(newParam);
    algorithm.value = newParam.algorithm || '多项式拟合';
  }
});
defineExpose({
  getFormDataFun,
});
</script>
<style lang="scss" scoped>
.algorithm-select {
  margin-bottom: 20px;
}
</style>
