<template>
  <div class="app-container">
    <el-card shadow="always" style="width: 55%; margin: 0 auto">
      <p>
        <b>{{ t("admin.form.data", { type: t("admin.common.broker") }) }}</b>
      </p>
      <!--    <laboratory-form ref="labFormRef" v-model="form" :is-add="false"/>-->
      <agent-form ref="agentFormRef" v-model="form" :is-add="false" />
      <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 AgentForm from "@/views/components/AgentForm";
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import {
  getInfo,
  insertClientUser,
  updateCasBroker,
} from "@/api/admin/agent/account";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const data = reactive({
  form: {
    researchs: [],
    keywords: [],
  },
  personForm: {},
  rules: {},
  personRules: {},
});
const { form, personForm, rules } = toRefs(data);
const agentFormRef = ref();
const personFormRef = ref();
const labelWidth = ref(140);

// 获取基础信息用于回显
const getBasicInfo = async () => {
  const { data } = await getInfo();
  data.broker.industrys = data.broker.industry?.split(",") ?? [];
  data.broker.keywords = data.broker.keyword?.split(",") ?? [];
  form.value = data.broker ?? {};
  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 agentFormRef.value.validateForm();
  if (valid) {
    // form.value.researchDirection = form.value.researchs?.join(",") ?? null;
    form.value.keyword = form.value.keywords?.join(",") ?? null;
    updateCasBroker(form.value).then((res) => {
      ElMessage.success(t("admin.common.editSuccess"));
      getBasicInfo();
    });
  } else {
    console.log("validation failed");
  }
};
getBasicInfo();
</script>

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