<template>
  <div class="layout-padding">
    <el-card class="layout-padding-auto" shadow="hover">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="基础信息" @click="go(0)" />
        <el-step title="数据修改" @click="go(1)" />
      </el-steps>
    </el-card>

    <el-card class="layout-padding-auto mt5" shadow="hover">
      <!-- 生成基本信息设置 -->
      <generator ref="generatorRef" :tableName="tableName" :dsName="dsName" v-if="active === 0" />
      <!-- 字段编辑设置 -->
      <edit-table ref="editTableRef" :tableName="tableName" :dsName="dsName" v-if="active === 1" />

      <div style="text-align: center">
        <el-button style="margin-top: 12px" @click="go(1)" v-if="active === 0">下一步</el-button>
        <el-button style="margin-top: 12px" @click="go(0)" v-if="active === 1">上一步</el-button>
        <el-button style="margin-top: 12px" @click="preview" v-if="active === 1">保存并预览</el-button>
        <el-button style="margin-top: 12px" @click="generatorHandle" v-if="active === 1">保存并生成</el-button>
      </div>
    </el-card>

    <!-- 预览基本信息 -->
    <preview-dialog ref="previewDialogRef" />
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useGeneratorCodeApi } from '/@/api/gen/table';
import { useMessage } from '/@/hooks/message';
import { downBlobFile } from '/@/utils/other';

const { t } = useI18n();
const Generator = defineAsyncComponent(() => import('../table/generator.vue'));
const EditTable = defineAsyncComponent(() => import('../table/edit.vue'));
const PreviewDialog = defineAsyncComponent(() => import('../table/preview.vue'));
const previewDialogRef = ref();
const generatorRef = ref();

const route = useRoute();
const active = ref(0);
const tableId = ref();
const tableName = ref();
const dsName = ref();
const editTableRef = ref();
const generatorType = ref();

const go = async (activeNum: number) => {
  if (active.value === activeNum) return;
  active.value = activeNum;

  if (activeNum === 0) {
    await editTableRef.value.submitHandle();
  } else if (activeNum === 1) {
    const dataform = await generatorRef.value.submitHandle();
    tableId.value = dataform.id;
    generatorType.value = dataform.generatorType;
  }
};

const preview = async () => {
  await editTableRef.value.submitHandle();
  previewDialogRef.value.openDialog(tableId.value);
};

// 生成
const generatorHandle = async () => {
  await editTableRef.value.submitHandle();
  // 生成代码，zip压缩包
  if (generatorType.value === '0') {
    downBlobFile(`/gen/generator/download?tableIds=${[tableId.value].join(',')}`, {}, `${tableName.value}.zip`);
  }

  // 写入到指定目录
  if (generatorType.value === '1') {
    useGeneratorCodeApi([tableId.value].join(',')).then(() => {
      useMessage().success(t('common.optSuccessText'));
    });
  }
};

onMounted(() => {
  tableName.value = route.query.tableName;
  dsName.value = route.query.dsName;
});
</script>

<style scoped>
.layout-padding {
  height: auto !important;
}
</style>
