<template>
  <div class="step-one">
    <p class="title">请提交您的实名认证信息：</p>
    <el-form
      label-position="right"
      label-width="125px"
      class="form"
      :model="company"
      :rules="rules"
      ref="company"
    >
      <el-form-item
        label="企业名称"
        class="form-item"
        prop="name"
        :error="errors.name"
      >
        <syDialogInput
          class="w-full"
          v-model:value="company.name"
          placeholder="请输入企业名称"
        ></syDialogInput>
      </el-form-item>
      <el-form-item
        label="证件号"
        class="form-item"
        prop="uscd"
        :error="errors.uscd"
      >
        <syDialogInput
          class="w-full"
          v-model:value="company.uscd"
          placeholder="请输入统一社会信用代码或组织机构代码"
        ></syDialogInput>
      </el-form-item>
      <el-form-item
        label="法人姓名"
        class="form-item"
        prop="corporations_name"
        :error="errors.corporations_name"
      >
        <syDialogInput
          class="w-full"
          v-model:value="company.corporations_name"
          placeholder="请输入法人姓名"
        ></syDialogInput>
      </el-form-item>
    </el-form>
    <syButton
      class="confirm-btn"
      type="primary"
      mode="elementBtn"
      size="large"
      @click="confirm()"
      :disabled="disabled"
      >提交审核</syButton
    >
  </div>
</template>
<script lang="ts">
import { enterBaseInfo } from "@/service/Api.service";
import {
  ElMessage,
  ElInput,
  ElFormItem,
  ElForm,
  FormInstance,
} from "element-plus";
import { syButton, syDialogInput } from "cqk-sy-ui";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    ElInput,
    ElFormItem,
    ElForm,
    syDialogInput,
    syButton,
  },
  data() {
    return {
      errors: {
        name: "",
        uscd: "",
        corporations_name: "",
      },
      company: {
        name: "",
        uscd: "",
        corporations_name: "",
      },
      rules: {
        name: [{ required: true, message: "企业名称不可为空" }],
        uscd: [{ required: true, message: "证件号不可为空" }],
        corporations_name: [{ required: true, message: "法人姓名不可为空" }],
      },
      disabled: false,
    };
  },
  methods: {
    async confirm() {
      const formEl = this.$refs.company as FormInstance;
      formEl.validate(async (isValid) => {
        if (!isValid) return;
        this.disabled = true;
        const res = await enterBaseInfo(this.company);
        if (res && res.code === 200) {
          ElMessage({
            message: "企业基本信息录入成功。",
            type: "success",
          });
          this.$emit("success");
        } else {
          if (res?.msg) {
            const config = [
              { p: /企业/, fieldName: "name" },
              { p: /(证件)?(统一社会信)?/, fieldName: "uscd" },
              { p: /姓名/, fieldName: "corporations_name" },
            ] as const;
            const match = config.find((i) => i.p.test(res?.msg));
            match
              ? (this.errors[match.fieldName] =
                  res.msg +
                  `${
                    (this.errors[match.fieldName].slice(-2) === "  " && " ") ||
                    "  "
                  }`)
              : ElMessage.error(res?.msg);
          }
        }
        this.disabled = false;
      });
    },
  },
});
</script>

<style lang="scss"></style>
<style lang="scss" scoped>
.step-one {
  .title {
    margin-top: 50px;
    margin-left: 47px;
    font-size: 20px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(53, 53, 53, 1);
    line-height: 40px;
  }
  .form {
    width: 900px;
  }
  .form .el-input {
    width: 610px;
  }
  .form-item {
    margin-bottom: 28px;
  }
  :deep(.confirm-btn) {
    margin-top: 10px;
    margin-left: 50px;
  }
}
</style>
