import request from '@/helpers/request'
import { checkIDCard } from '@/helpers/validate'
import { state } from '@/state'
import {
  ElButton,
  ElRadioGroup,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElRadioButton,
  ElCheckbox,
  ElLink,
  ElMessage,
  dayjs
} from 'element-plus'
import { defineComponent } from 'vue'
import { teacherState } from '../../teacherState'
import styles from './index.module.less'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../../images/${fileName}`
  const modules = import.meta.globEager('../../../images/*')
  return modules[path].default
}

// checkIDCard
export default defineComponent({
  name: 'cert-info',
  data() {
    return {
      agreeStatus: false
    }
  },
  computed: {
    userAuth() {
      // 判断是否实名过
      const users = state.user.data || {}
      return !!(users.idCardNo && users.realName)
    }
  },
  mounted() {
    if (this.userAuth) {
      const users = state.user.data || {}
      teacherState.teacherCert.realName = users.realName
      teacherState.teacherCert.idCardNo = users.idCardNo
      teacherState.teacherCert.gender = users.gender
      teacherState.teacherCert.birthdate = dayjs(users.birthdate).format(
        'YYYY-MM-DD'
      )

      this.agreeStatus = true
    }
  },
  methods: {
    onIdCardValidate() {
      const idCardNo = teacherState.teacherCert.idCardNo
      // 判断是否有身份证号
      if (!idCardNo) {
        return
      }
      if (!checkIDCard(idCardNo || '')) {
        return false
      }
      teacherState.teacherCert.birthdate = this.getBirth(idCardNo)
      teacherState.teacherCert.gender = this.getSex(idCardNo)
    },
    getBirth(idCard: string | null) {
      let birthday = ''
      if (idCard != null && idCard != '') {
        if (idCard.length == 15) {
          birthday = '19' + idCard.slice(6, 12)
        } else if (idCard.length == 18) {
          birthday = idCard.slice(6, 14)
        }
        birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
      }
      return birthday
    },
    getSex(idCard: string | null): number {
      let sex = 1
      if (idCard && parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        sex = 1
      } else {
        sex = 0
      }
      return sex
    },
    onSubmit() {
      try {
        ;(this as any).$refs.certForm.validate(async (_: boolean) => {
          if (_) {
            if (!this.agreeStatus) {
              return ElMessage.error('请阅读并同意协议')
            }
            if (!this.userAuth) {
              const realName = teacherState.teacherCert.realName
              const idCardNo = teacherState.teacherCert.idCardNo
              await request.post('/api-auth/user/realNameAuth', {
                data: {
                  realName,
                  idCardNo,
                  save: true
                }
              })
            }
            teacherState.active = 1
          }
        })
      } catch {}
    }
  },
  render() {
    console.log(teacherState.teacherCert)
    return (
      <ElForm
        ref={'certForm'}
        class={[styles.form, 'mx-4 mt-7']}
        size="large"
        model={teacherState.teacherCert}
        labelPosition="top"
      >
        <ElFormItem
          label="真实姓名"
          labelWidth={'90px'}
          prop="realName"
          rules={[
            {
              required: true,
              message: '请输入真实姓名'
            }
          ]}
        >
          <ElInput
            v-model={teacherState.teacherCert.realName}
            disabled={this.userAuth}
            placeholder="请输入您的真实姓名"
          />
        </ElFormItem>
        <ElFormItem
          label="身份证号"
          labelWidth={'90px'}
          prop="idCardNo"
          rules={[
            {
              required: true,
              message: '请输入身份证号'
            },
            {
              pattern: this.userAuth
                ? ''
                : /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '请输入正确的身份证号',
              trigger: 'blur'
            }
          ]}
        >
          <ElInput
            v-model={teacherState.teacherCert.idCardNo}
            disabled={this.userAuth}
            onBlur={this.onIdCardValidate}
            placeholder="请输入您的身份证号码"
          />
        </ElFormItem>
        <ElFormItem
          label="性别"
          labelWidth={'90px'}
          prop="gender"
          rules={[
            {
              required: true,
              message: '请选择性别'
            }
          ]}
        >
          <ElRadioGroup v-model={teacherState.teacherCert.gender} disabled>
            <ElRadioButton label={1} class="mr-3 w-24">
              男
            </ElRadioButton>
            <ElRadioButton label={0} class="w-24">
              女
            </ElRadioButton>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem
          label="出生日期"
          labelWidth={'90px'}
          prop="birthdate"
          rules={[
            {
              required: true,
              message: '请选择出生日期'
            }
          ]}
        >
          <ElDatePicker
            disabled
            v-model={teacherState.teacherCert.birthdate}
            type="date"
            class="!h-[48px] !w-full"
            placeholder="请选择出生日期"
          />
        </ElFormItem>
        <ElFormItem>
          <div class="text-center w-full">
            <div class="text-[14px] text-[#999] flex items-center justify-center">
              <div
                class="flex items-center justify-center cursor-pointer"
                onClick={() => {
                  this.agreeStatus = !this.agreeStatus
                }}
              >
                <div
                  onClick={(e: any) => {
                    e.stopPropagation()
                  }}
                >
                  <ElCheckbox
                    v-model={this.agreeStatus}
                    class="!mr-2 rounded-full overflow-hidden"
                  />
                </div>
                我已阅读并同意
                <a
                  href="https://dev.colexiu.com/student/#/registerProtocol"
                  class="text-[#2DC7AA]"
                  target="_blank"
                >
                  《酷乐秀平台服务协议》
                </a>
              </div>
            </div>
            <ElButton
              type="primary"
              round
              class="!w-56 !h-[48px] mt-5"
              onClick={this.onSubmit}
            >
              下一步
            </ElButton>
          </div>
        </ElFormItem>
      </ElForm>
    )
  }
})
