<template>
  <div class="app-container">
    <el-card shadow="always" style="width: 55%; margin: 0 auto">
      <research-form ref="researchFormRef" v-model="form" is-add />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button @click="router.push('/identity/index')"
          >{{ t("admin.common.cancel") }}
        </el-button>
        <el-button type="primary" @click="submitForm"
          >{{ t("admin.common.submit") }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import ResearchForm from "@/views/components/ResearchForm";
import { reactive, ref, toRefs } from "vue";
import { insertResearch } from "@/api/identity";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const router = useRouter();
const props = defineProps({
  labelWidth: {
    type: Number,
    default: 120,
  },
});
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
const researchFormRef = ref();

const submitForm = async () => {
  if (!researchFormRef.value) return;
  const valid = await researchFormRef.value.validateForm();
  if (valid) {
    insertResearch(form.value).then((resp) => {
      ElMessage.success(t("tips.applyForSettledSuccessfully"));
      router.push("/identity/index");
    });
  } else {
    console.log("verify failed");
  }
};
</script>

<style lang="scss" scoped></style>
