<template>
  <div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="姓名" prop="name">
        <a-input
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur()
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item ref="idType" label="证件类型" prop="idType">
        <a-select
          default-value="1"
          style="width: 100%"
          @change="handleChange"
          v-model="form.idType"
        >
          <a-select-option
            :value="item.value"
            v-for="(item, index) in this.options.idType"
            :key="index"
          >{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item ref="idNo" label="证件号" prop="idNo">
        <a-input v-model="form.idNo" @blur="handleIdCardBlur" />
      </a-form-model-item>
      <a-form-model-item label="性别" prop="sex">
        <a-radio-group v-model="form.sex">
          <a-radio value="M">男</a-radio>
          <a-radio value="F">女</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="出生日期" prop="birthDate">
        <a-date-picker
          v-model="form.birthDate"
          @change="onChange"
          type="date"
          placeholder="选择出生日期"
          style="width: 100%"
        />
      </a-form-model-item>
      <a-form-model-item label="婚姻状况" prop="maritalStatus">
        <a-radio-group v-model="form.maritalStatus">
          <a-radio value="1">未婚</a-radio>
          <a-radio value="2">已婚</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item ref="name" label="联系电话" prop="phone">
        <a-input v-model="form.phone" @blur="checkPhone" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">立即预约</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
const regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
const phoneReg = /^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/;
import api from "@/api/customer";
import options from "@/utils/options";
export default {
  name: "self-form",
  components: {},
  data() {
    return {
      options: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        id: "",
        name: "", //名字
        idType: "1", //证件类型,默认身份证件
        idNo: "", //证件号
        sex: "M", //性别 M男 F女
        phone: "", //电话
        birthDate: "", //生日
        maritalStatus: "1" //婚姻 01:未婚，02:已婚, 03:未知
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          {
            max: 5,
            message: "姓名长度不低于3",
            trigger: "blur"
          }
        ],
        idType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change"
          }
        ],
        idNo: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    const { id } = this.$route.query;
    this.form.id = id ? id : "";
    this.options = options; //下拉选项数据集合:包括证件类型/婚姻状况/性别等
  },
  computed: {},
  methods: {
    // 立即预约
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const query = {
            ...this.form
          };
          api.improveInformation(query).then(res => {
            if (res.returnCode == "0000") {
              // 提交成功之后,提示成功信息,关闭"个人信息填写弹窗",并刷新当前页面
              this.$message.success("提交信息成功");
              setTimeout(() => {
                this.$emit("hideModal");
                // 刷新列表
              }, 1500);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 下拉选项
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    checkIdNumber(val) {
      return regIdCard.test(val);
    },
    checkPhone() {
      let val = this.form.phone
      if (!phoneReg.test(val)) {
        this.$message.error("请输入手机号码不正确");
        this.form.phone = "";
      }
    },
    handleIdCardBlur() {
      // 填完身份证根据身份证自动带出生日跟性别
      const type = this.form.idType;
      const value = this.form.idNo;
      if (type != "1") {
        return;
      }
      if (this.checkIdNumber(value)) {
        const { birth, sex } = this.calcBGByIdCardNumber(value);
        this.form.sex = sex;
        this.form.birthDate = birth;
      } else {
        this.$message.error("身份证号不正确");
        this.form.idNo = "";
      }
    },
    calcBGByIdCardNumber(idNumber) {
      // 根据身份证自动带出生日跟性别
      const year = idNumber.slice(6, 10);
      const mon = idNumber.slice(10, 12);
      const day = idNumber.slice(12, 14);
      const birth = year + "-" + mon + "-" + day;
      const sex = idNumber.slice(16, 17) % 2 == 1 ? "M" : "F";
      return {
        birth,
        sex,
        gender: sex
      };
    },
    // 选择生日
    onChange(date, dateString) {
      this.form.birthDate = dateString;
    }
  }
};
</script>
<style lang="less">
.ant-form-item-label {
  text-align: left;
}
</style>
<style lang="less" scoped>
::v-deep .ant-btn {
  position: relative;
  left: 100px;
  width: 120px;
}

::v-deep .ant-form-item-control {
  width: 360px;
}
</style>