import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColHeader from '@/components/col-header'
import request from '@/helpers/request'
import { verifyIdCard } from '@/helpers/toolsValidate'
import { state } from '@/state'
import { Button, CellGroup, Field, Form, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'UserAuth',
  props: {
    onSuccess: {
      // 实名成功
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        realName: '',
        idCardNo: ''
      }
    }
  },
  methods: {
    async onSubmit() {
      try {
        await request.post('/api-auth/user/realNameAuth', {
          data: {
            ...this.form,
            save: true
          }
        })
        Toast('实名成功')
        state.user.data.realName = this.form.realName
        state.user.data.idCardNo = this.form.idCardNo
        setTimeout(() => {
          this.onSuccess()
        }, 500)
      } catch {}
    }
  },
  render() {
    return (
      <Form class={styles.userAuth} onSubmit={this.onSubmit}>
        <ColHeader title="实名认证" />
        <ColFieldGroup style={{ marginTop: '15px' }}>
          <ColField title="姓名" required>
            <Field
              name="lessonName"
              maxlength={20}
              v-model={this.form.realName}
              placeholder="请输入真实姓名"
              rules={[{ required: true, message: '请输入真实姓名' }]}
            />
          </ColField>
          <ColField title="证件号码" required>
            <Field
              name="lessonSubjectName"
              v-model={this.form.idCardNo}
              rules={[
                { required: true, message: '请输入身份证号' },
                {
                  pattern:
                    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                  message: '请输入正确的身份证号'
                }
              ]}
              placeholder="请输入身份证号"
            />
          </ColField>
        </ColFieldGroup>

        <div class={['btnGroup']}>
          <Button block round type="primary" native-type="submit">
            确定
          </Button>
        </div>
      </Form>
    )
  }
})
