<template>
  <ElForm ref="formRef" :rules="rules" :model="formModel">
    <CustomizeFormItem label="企业注册名称" prop="name">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.name"
        placeholder="请输入营业执照上的全称，仅支持中国大陆工商局或市场监督管理局登记的企业"
      ></syDialogInput>
    </CustomizeFormItem>
    <CustomizeFormItem label="统一信用代码" prop="uscd">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.uscd"
        maxLength="18"
        placeholder="请填写15位营业执照注册号或18位统一信用代码"
      ></syDialogInput>
    </CustomizeFormItem>
    <CustomizeFormItem label="法人姓名" prop="corporations_name">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.corporations_name"
        placeholder="请输入法人真实姓名"
      ></syDialogInput>
    </CustomizeFormItem>
  </ElForm>
</template>
<script lang="ts" setup>
import { ElForm } from "element-plus";
import { syDialogInput } from "cqk-sy-ui";
import { reactive, ref, watch, toRaw } from "vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";

const formRef = ref<InstanceType<typeof ElForm>>();

const formModel = reactive({
  name: "",
  uscd: "",
  corporations_name: "",
});

const rules = reactive({
  name: [{ required: true, message: "企业名称不可为空" }],
  uscd: [{ required: true, message: "证件号不可为空" }],
  corporations_name: [{ required: true, message: "法人姓名不可为空" }],
});

const emit = defineEmits(["update"]);

watch(formModel, () => {
  emit("update", {
    value: toRaw(formModel),
    isValid:
      formModel.name !== "" &&
      formModel.uscd !== "" &&
      formModel.corporations_name !== "",
  });
});
</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>
