<template>
  <div class="gl-page-content-full" v-if="isModelListPage">
    <div class="model-training-list">
      <BaseTable
        showIndex
        ref="tableRef"
        :tableName="TABLE_NAME.MODEL_TRAINING_LIST"
        :api="getModelTrainingListApi"
        :searchLimitNum="3"
        :actionList="actionList"
        :exportApi="exportTrainingListApi"
        :exportFileName="$t('数据训练.数据训练列表')"
        fullHeight
      >
        <template #leftOptions>
          <el-button icon="plus" type="primary" @click="addModelFun">{{
            $t('数据训练.新建训练')
          }}</el-button>
        </template>
      </BaseTable>
      <Dialog
        v-model="dialogVisible"
        :diaTitle="isCreateModal ? $t('数据训练.新建训练') : $t('数据训练.编辑训练')"
        :width="500"
        @close="onCancelFun"
        show-footer
      >
        <TableForm ref="tableFormRef" :tableName="TABLE_NAME.MODEL_TRAINING_LIST" :itemNum="2" />
        <template #footer>
          <div>
            <el-button @click="onCancelFun">{{ $t('通用.取消') }}</el-button>
            <el-button type="primary" @click="onConfirmFun">{{ $t('通用.确定') }}</el-button>
          </div>
        </template>
      </Dialog>
    </div>
  </div>
  <modelTraining
    v-if="!isModelListPage"
    :modelForm="currentModelForm"
    @back="isModelListPage = true"
  ></modelTraining>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import {
  getModelTrainingListApi,
  addModelApi,
  updateModelApi,
  delModelApi,
  exportTrainingListApi,
} from '@/api/data/dataForecast';
import BaseTable from '@/components/common/table/baseTable.vue';
import Dialog from '@/components/common/dialog/index.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import modelTraining from './modelTraining.vue';
import { TABLE_NAME } from '@/utils/enum/tableName';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const tableRef = ref();
const tableFormRef = ref();

const isModelListPage = ref(true);

const isCreateModal = ref(false);

const dialogVisible = ref(false);

const currentModelForm = reactive<any>({});

const addModelFun = () => {
  isCreateModal.value = true;
  dialogVisible.value = true;
  nextTick(() => {
    tableFormRef.value.resetFun();
  });
};

const actionList = computed(() => {
  return [
    {
      title: t('通用.查看'),
      type: 'primary',
      click: (row: any) => {
        goModelDetailFun(row);
      },
    },
    {
      title: t('通用.编辑'),
      type: 'primary',
      click: (row: any) => {
        editTrainingFun(row);
      },
    },
    {
      title: t('通用.删除'),
      needConfirm: true,
      confirmText: t('通用.确认删除吗'),
      type: 'danger',
      click: (row: any) => {
        delModelFun(row.id);
      },
    },
  ];
});
const onCancelFun = () => {
  dialogVisible.value = false;
};

const goModelDetailFun = (row: any) => {
  for (const key in row) {
    currentModelForm[key] = row[key];
  }
  isModelListPage.value = false;
};

const editTrainingFun = (row: any) => {
  isCreateModal.value = false;
  dialogVisible.value = true;
  nextTick(() => {
    tableFormRef.value.setFormDataFun(row);
  });
};

const delModelFun = async (id: number) => {
  const res: any = await delModelApi({
    modelId: id,
  });
  if (res.code === 200) {
    ElMessage.success('删除训练数据成功！');
    tableRef.value.resetFun();
  }
};

const onConfirmFun = async () => {
  const valid = await tableFormRef.value?.validateFun();
  if (valid) {
    const formData = tableFormRef.value?.getFormDataFun();
    if (isCreateModal.value) {
      const req = {
        ...formData,
      };
      const res: any = await addModelApi(req);
      if (res.code === 200) {
        ElMessage.success('新建训练数据成功！');
        dialogVisible.value = false;
        tableRef.value.resetFun();
      }
    } else {
      const req = {
        modelId: formData.id,
        ...formData,
      };
      const res: any = await updateModelApi(req);
      if (res.code === 200) {
        ElMessage.success('更新训练数据成功！');
        dialogVisible.value = false;
        tableRef.value.resetFun();
      }
    }
  }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.model-training-list {
  height: 100%;
}
.add-dia-content {
  padding-top: 20px;
}
.model-training {
  width: 100%;
  height: 100%;
}
</style>
