<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
      await insertLaboratory(form.value)
      router.go(-1);
      ElMessage.success("实验室入驻成功")
    } catch (e) {
      console.error(e)
      ElMessage.error("入驻失败")
    }
  }
}
</script>

<style lang="scss" scoped>

</style>