<template>
  <div class="app-container">
    <el-card style="width: 55%; margin: 0 auto">
      <!--      <p>-->
      <!--        <b> {{ t("admin.form.basicData") }}</b>-->
      <!--      </p>-->
      <!--      <el-form-->
      <!--        ref="personFormRef"-->
      <!--        :model="personForm"-->
      <!--        :rules="rules"-->
      <!--        label-width="100px"-->
      <!--      >-->
      <!--        <el-form-item :label="t('admin.form.fullName')" prop="nickName">-->
      <!--          <el-input-->
      <!--            v-model="personForm.nickName"-->
      <!--            :placeholder="-->
      <!--              t('admin.form.placeholder', { type: t('admin.form.fullName') })-->
      <!--            "-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item :label="t('admin.form.mobile')" prop="mobile">-->
      <!--          <el-input-->
      <!--            v-model="personForm.mobile"-->
      <!--            :placeholder="-->
      <!--              t('admin.form.placeholder', { type: t('admin.form.mobile') })-->
      <!--            "-->
      <!--          />-->
      <!--          &lt;!&ndash;            oninput="value=value.replace(/\D/,'')"&ndash;&gt;-->
      <!--        </el-form-item>-->
      <!--        <el-form-item :label="t('admin.form.email')" prop="email">-->
      <!--          <el-input-->
      <!--            v-model="personForm.email"-->
      <!--            :placeholder="-->
      <!--              t('admin.form.placeholder', { type: t('admin.form.email') })-->
      <!--            "-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item :label="t('admin.form.position')" prop="post">-->
      <!--          <el-input-->
      <!--            v-model="personForm.post"-->
      <!--            :placeholder="-->
      <!--              t('admin.form.placeholder', { type: t('admin.form.position') })-->
      <!--            "-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item :label="t('admin.form.phone')" prop="phone">-->
      <!--          <el-input-->
      <!--            v-model="personForm.phone"-->
      <!--            :placeholder="-->
      <!--              t('admin.form.placeholder', { type: t('admin.form.phone') })-->
      <!--            "-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item>-->
      <!--          <el-button type="primary" @click="submitPersonalInfo"-->
      <!--            >{{ t("admin.common.submit") }}-->
      <!--          </el-button>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <p>
        <b>{{ t("admin.form.data", { type: t("admin.common.research") }) }}</b>
      </p>
      <research-form ref="researchFormRef" v-model="form" :is-add="true" />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button type="primary" @click="submitExpertForm"
          >{{ 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 {
  getInfo,
  insertClientUser,
  updateResearch,
} from "@/api/admin/research/account";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
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: computed(() => t("webContact.emailFormat")),
        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(t("admin.common.updatePersonalInformationSuccess"));
    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(t("admin.common.editSuccess"));
      getBasicInfo();
    });
  } else {
    console.log("validation failed");
  }
};
getBasicInfo();
</script>

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