<template>
  <div class="app-container">
    <el-card shadow="always" style="width: 55%; margin: 0 auto">
      <laboratory-form ref="laboratoryFormRef" v-model="form" is-add />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { insertLaboratory } from "@/api/identity";
import LaboratoryForm from "@/views/components/LaboratoryForm";
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const props = defineProps({
  labelWidth: {
    type: Number,
    default: 120,
  },
});
const router = useRouter();
const data = reactive({
  form: { researchs: [] },
});
const { form } = toRefs(data);
const laboratoryFormRef = ref();
const submitForm = async () => {
  if (!laboratoryFormRef.value) return;
  const valid = await laboratoryFormRef.value.validateForm();
  if (valid) {
    try {
      form.value.researchDirection = form.value.researchs?.join(",") ?? null;
      form.value.keyword = form.value.keywords?.join(",") ?? null;
      await insertLaboratory(form.value);
      router.go(-1);
      ElMessage.success("已申请实验室入驻");
    } catch (e) {
      console.error(e);
      // ElMessage.error("申请入驻失败")
    }
  }
};
</script>

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