<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="
            () => {
              $refs.idNo.onFieldBlur()
            }
          "
        />
      </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="
            () => {
              $refs.name.onFieldBlur()
            }
          "
        />
      </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>
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}`)
    },
    // 选择生日
    onChange(date, dateString) {
      this.form.birthDate = dateString
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep .ant-btn {
  position: relative;
  left: 100px;
  width: 120px;
}
::v-deep .ant-form-item-control {
  width: 360px;
}
</style>
