<template>
  <div class="app-container">
    <laboratory-form ref="researchFormRef" v-model="form" :is-add="false" />
    <el-row>
      <el-col :span="12">
        <el-row :gutter="12" justify="center">
          <el-col :span="1.5">
            <el-button @click="cancel"
              >{{ t("admin.common.cancel") }}
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="submit"
              >{{ t("admin.common.submit") }}
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {
  laboratoryDetail,
  laboratoryEdit,
} from "@/api/admin/research/laboratory";
import { useRoute } from "vue-router";
import { reactive, ref, toRefs } from "vue";
import tab from "@/plugins/tab";
import LaboratoryForm from "@/views/components/LaboratoryForm";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
const route = useRoute();
const researchFormRef = ref();

const submit = () => {
  researchFormRef.value?.validateForm()?.then((valid) => {
    if (valid) {
      form.value.researchDirection = form.value.researchs.join(",");
      laboratoryEdit(form.value).then((resp) => {
        ElMessage.success(t("admin.common.editSuccess"));
        cancel();
      });
    }
  });
};
const cancel = () => {
  tab.closeOpenPage({
    path: "/admin/research/laboratory",
  });
};

if (route.query.id) {
  laboratoryDetail(route.query.id).then((resp) => {
    form.value = resp.data;
    form.value.keywords = form.value.keyword?.split(",") ?? [];
    form.value.researchs = form.value.researchDirection?.split(",") ?? [];
  });
} else {
  cancel();
}
</script>

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