import request from '@/helpers/request'
import { verifyIdCard } from '@/helpers/toolsValidate'
import { postMessage } from '@/helpers/native-message'
import { state } from '@/state'
import { Button, CellGroup, Field, Form, Icon, showToast } from 'vant'
import { defineComponent } from 'vue'
import styles from './user-auth.module.less'
import OHeader from '@/components/o-header'

export default defineComponent({
  name: 'UserAuth',
  props: {
    onSuccess: {
      // 实名成功
      type: Function,
      default: () => {}
    },
    hideHeader: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        realName: '',
        idCardNo: ''
      }
    }
  },
  mounted() {
    // 初始化数据
    const users = state.user.data
    this.form.realName = users?.account.realName
    // this.form.idCardNo = users?.idCardNo
  },
  methods: {
    async onSubmit() {
      try {
        const url = state.platformApi + '/sysAccount/realNameAuth'
        await request.post(url, {
          data: {
            ...this.form,
            contract: true,
            save: true
          }
        })
        showToast('实名成功')
        state.user.data.account.realName = this.form.realName
        state.user.data.account.idCardNo = this.form.idCardNo
        setTimeout(() => {
          this.onSuccess()
        }, 500)
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <Form class={styles.userAuth} onSubmit={this.onSubmit}>
        {!this.hideHeader && <OHeader title="实名认证" />}

        <CellGroup inset class={styles.cellGroup}>
          <Field
            required
            label="真实姓名"
            v-model={this.form.realName}
            rules={[{ required: true, message: '请填写真实姓名' }]}
            name="realName"
            placeholder="请填写真实姓名"
            maxlength="50"
          ></Field>

          <Field
            required
            label="身份证号"
            v-model={this.form.idCardNo}
            maxlength={18}
            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="请输入身份证号"
          ></Field>
        </CellGroup>

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