<template>
  <div class="step1-box">
    <div class="step1">
      <div class="step1-form">
        <BasicForm @register="register" />
      </div>
    </div>
    <div
      style="
        width: 100%;
        background: rgb(255 255 255 / 50%);
        height: 100%;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      "
      v-if="spinShow"
    >
      <a-spin tip="AI建表中，请稍等......" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BasicForm, FormSchema, useForm } from "/@/components/Form/index";

import { inject, nextTick, onMounted, ref, watch } from "vue";
//  import { TableInfo, FieldInfo } from '/@/components/Designer';
import { useI18n } from "/@/hooks/web/useI18n";
//import { snakeCase } from 'lodash-es';
import { getTableInfo } from "/@/api/aiCreateTable";
import { AIInfo, GeneratorConfig } from "/@/model/generator/generatorConfig";
import { useMessage } from "/@/hooks/web/useMessage";
const props = defineProps({
  templateId: String,
});
const { createMessage } = useMessage();
const { t } = useI18n();
const spinShow = ref(false);
const formSchema: FormSchema[] = [
  {
    field: "name",
    label: t("名称"),
    required: true,
    component: "Input",
    colProps: { span: 12 },
    componentProps: {
      placeholder: t("请填写名称"),
    },
  },
  {
    field: "code",
    label: t("编码"),
    required: true,
    component: "Input",
    colProps: { span: 12 },
    rules: [
      {
        pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
        message: "编码只能是数字和字母组成，必须以英文字母开头",
      },
    ],
    componentProps: {
      placeholder: t("请填写编码"),
    },
  },
  {
    field: "databaseId",
    label: t("数据库"),
    component: "DbSelect",
    required: true,
    colProps: { span: 12 },
    componentProps: {
      placeholder: t("请选择数据库"),
    },
  },
  {
    field: "tableName",
    label: t("AI表名"),
    required: true,
    component: "Input",
    colProps: { span: 12 },
    componentProps: () =>
      // { formModel }
      {
        return {
          placeholder: t("请填写AI表名"),
          // onBlur: () => {
          //   formModel.tableName = snakeCase(formModel.tableName);
          // },
        };
      },
  },
  {
    field: "columName",
    label: t("AI字段内容"),
    component: "InputTextArea",
    colProps: { span: 12 },
    componentProps: {
      placeholder: t("请填写AI字段内容"),
      autoSize: { minRows: 4, maxRows: 15 },
    },
  },
  {
    field: "remark",
    label: t("备注"),
    component: "InputTextArea",
    required: false,
    colProps: { span: 12 },
    componentProps: {
      placeholder: t("请填写备注"),
      autoSize: { minRows: 4, maxRows: 15 },
    },
  },
];

const [register, { validate, setFieldsValue, clearValidate }] = useForm({
  schemas: formSchema,
  showActionButtonGroup: false,
  layout: "vertical",
  rowProps: { gutter: 32 },
});

defineEmits(["register"]);
const generatorConfig = inject<GeneratorConfig>("generatorConfig");
watch(
  () => generatorConfig!.AIInfo,
  () => {
    setFieldsValue({ ...generatorConfig?.AIInfo });
  },
  {
    deep: true,
  }
);
onMounted(() => {
  setFieldsValue({ ...generatorConfig?.AIInfo });

  nextTick(() => {
    clearValidate();
  });
});

//验证当前步骤的数据
const validateStep = async (): Promise<boolean> => {
  let res: AIInfo = { code: "", name: "", tableName: "", databaseId: "master" };
  try {
    res = await validate();
  } catch (error) {
    return false;
  }
  spinShow.value = true;
  try {
    let params = {
      columName: res.columName,
      tableName: res.tableName,
      databaseId: res.databaseId,
    };
    if (props.templateId) {
      params.id = props.templateId;
    }
    let tablelist = await getTableInfo(params);

    if (tablelist) {
      const { tableStructureConfigs } = tablelist;

      if (generatorConfig) {
        if (generatorConfig.tableStructureConfigs?.length <= 0)
          generatorConfig.tableStructureConfigs = tableStructureConfigs || [];
        generatorConfig.tableConfigs = [];
        generatorConfig.databaseId = res.databaseId;
        generatorConfig.AIInfo = res;
      }
    } else {
      createMessage.info("AI请求数据失败，请重试！");
      spinShow.value = false;
      return false;
    }
  } catch (error) {
    spinShow.value = false;
    return false;
  }

  spinShow.value = false;
  return true;
};

defineExpose({ validateStep, setFieldsValue });
</script>
<style lang="less" scoped>
:deep(.ant-tag-orange),
:deep(.ant-tag-blue) {
  background: #fff;
  font-size: 13px;
}

:deep(.ant-tooltip-inner) {
  white-space: pre-wrap !important;
}
</style>
