<template>
  <div class="app-container">
    <el-card style="width: 55%; margin: 0 auto">
      <p><b>基本资料</b></p>
      <el-form
        ref="personFormRef"
        :model="personForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="姓名:" prop="nickName">
          <el-input v-model="personForm.nickName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机:" prop="mobile">
          <el-input
            v-model="personForm.mobile"
            :maxlength="11"
            oninput="value=value.replace(/\D/,'')"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="personForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="职务:" prop="post">
          <el-input v-model="personForm.post" placeholder="请输入职务" />
        </el-form-item>
        <el-form-item label="固定电话:" prop="phone">
          <el-input v-model="personForm.phone" placeholder="请输入固定电话" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPersonalInfo">提交</el-button>
        </el-form-item>
      </el-form>
      <p><b>实验室资料</b></p>
      <research-form ref="researchFormRef" v-model="form" :is-add="false" />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button type="primary" @click="submitExpertForm">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import ResearchForm from "@/views/components/ResearchForm";
import { reactive, ref, toRefs } from "vue";
import {
  getInfo,
  insertClientUser,
  updateResearch,
} from "@/api/admin/research/account";
import { ElMessage } from "element-plus";

const data = reactive({
  form: {
    researchs: [],
    keywords: [],
  },
  personForm: {},
  rules: {
    mobile: [
      {
        pattern: /^1[3-9]\d{9}$/,
        trigger: "blur",
        message: "请输入正确的手机号",
      },
    ],
    email: [
      {
        pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        message: "请输入正确的邮箱地址",
        trigger: "blur",
      },
    ],
  },
  personRules: {
    mobile: [
      {
        pattern: /^1[3-9]\d{9}$/,
        trigger: "blur",
        message: "请输入正确的手机号",
      },
    ],
  },
});
const { form, personForm, rules } = toRefs(data);
const researchFormRef = ref();
const personFormRef = ref();
const labelWidth = ref(140);

// 获取基础信息用于回显
const getBasicInfo = async () => {
  const { data } = await getInfo();
  data.research.researchs = data.research.research?.split(",") ?? [];
  data.research.keywords = data.research.keyword?.split(",") ?? [];
  data.research.industrys = data.research.industry?.split(",") ?? [];
  form.value = data.research ?? {};
  personForm.value = data.user ?? {};
};

const submitPersonalInfo = async () => {
  try {
    await personFormRef.value.validate();
    await insertClientUser(personForm.value);
    ElMessage.success("更新个人信息成功");
    const { data } = await getInfo();
    personForm.value = data.user ?? {};
  } catch (error) {
    console.log(error);
  }
};
const submitExpertForm = async () => {
  const valid = await researchFormRef.value.validateForm();
  if (valid) {
    form.value.researchDirection = form.value.researchs?.join(",") ?? null;
    form.value.keyword = form.value.keywords?.join(",") ?? null;
    updateResearch(form.value).then((res) => {
      ElMessage.success("修改成功");
      getBasicInfo();
    });
  } else {
    console.log("校验未通过");
  }
};
getBasicInfo();
</script>

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