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 { postMessage } from '@/helpers/native-message'
import { state } from '@/state'
import {
  Button,
  CellGroup,
  Checkbox,
  Field,
  Form,
  Icon,
  Popup,
  Toast
} from 'vant'
import { defineComponent } from 'vue'
import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import activeButtonIconTenant from '@common/images/icon_checkbox-tenant.png'
import styles from './index.module.less'
import { browser } from '@/helpers/utils'
import PreviewProtocol from '@/views/preview-protocol'

export default defineComponent({
  name: 'UserAuth',
  props: {
    onSuccess: {
      // 实名成功
      type: Function,
      default: () => {}
    },
    exists: {
      type: Boolean,
      default: false
    },
    hideHeader: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popupShow: false,
      iframeSrc: '',
      form: {
        realName: '',
        idCardNo: ''
      },
      checked: false
    }
  },
  mounted() {
    // exists
    this.checked = this.checked || this.exists
    // 初始化数据
    const users = state.user.data
    this.form.realName = users?.realName
    // this.form.idCardNo = users?.idCardNo
  },
  methods: {
    async onSubmit() {
      try {
        if (!this.checked) {
          Toast('请先阅读并同意《用户注册协议》')
          return
        }
        const url =
          state.platformType === 'STUDENT'
            ? '/api-student/student/realNameAuth'
            : '/api-teacher/teacher/realNameAuth'
        await request.post(url, {
          data: {
            ...this.form,
            contract: true,
            save: true
          }
        })
        Toast('实名成功')
        state.user.data.realName = this.form.realName
        state.user.data.idCardNo = this.form.idCardNo
        setTimeout(() => {
          this.onSuccess()
        }, 500)
      } catch {}
    },
    getContractDetail() {
      // 查看协议
      const client = state.platformType === 'STUDENT' ? 'student' : 'teacher'
      if (browser().isApp) {
        postMessage({
          api: 'openWebView',
          content: {
            url: `${location.origin}/${client}/#/previewProtocol`,
            orientation: 1,
            isHideTitle: false
          }
        })
      } else {
        // this.iframeSrc = `${location.origin}/#/previewProtocol`
        // console.log(this.iframeSrc, 'this.iframeSrc')
        this.popupShow = true
      }
    }
  },
  render() {
    return (
      <Form class={styles.userAuth} onSubmit={this.onSubmit}>
        {!this.hideHeader && <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={styles.colProtocol}>
          {!this.exists && (
            <Checkbox
              v-model={this.checked}
              v-slots={{
                icon: (props: any) => (
                  <Icon
                    class={styles.boxStyle}
                    name={
                      props.checked
                        ? state.projectType === 'tenant'
                          ? activeButtonIconTenant
                          : activeButtonIcon
                        : inactiveButtonIcon
                    }
                    size="15"
                  />
                )
              }}
            >
              我已阅读并同意
            </Checkbox>
          )}
          {this.exists && <>查看</>}
          <span onClick={this.getContractDetail} class={styles.protocolText}>
            《用户注册协议》
          </span>
        </div>
        <div class={['btnGroup']}>
          <Button
            block
            round
            type="primary"
            native-type="submit"
            class={state.projectType === 'tenant' && styles.btnTenant}
          >
            确定
          </Button>
        </div>

        <Popup
          v-model:show={this.popupShow}
          round
          position="bottom"
          style={{ height: '80vh' }}
        >
          <PreviewProtocol />
        </Popup>
      </Form>
    )
  }
})
