import { Cell, CellGroup, Col, DatetimePicker, Field, Popup, Row, Toast } from "vant"
import { defineComponent } from "vue";
import dayjs from "dayjs";
import { checkIDCard } from "@/helpers/validate";
import ColField from "@/components/col-field";
import { teacherState } from "./teacherState";
import styles from './cert-one.module.less';

export default defineComponent({
  name: 'certOne',
  data() {
    return {
      maxDate: new Date(),
      popupShow: false,
      popupDate: new Date(),
    }
  },
  methods: {
    onIdCardValidate() {
      const idCardNo = teacherState.teacherCert.idCardNo
      if (!checkIDCard(idCardNo || '')) {
        Toast('请填写正确的身份证号码');
        return false;
      }

      console.log(this.getSex(idCardNo))
      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-");
        //通过正则表达式来指定输出格式为:1990-01-01
      }
      return birthday;
    },
    getSex(idCard: string | null) {
      let sex = null;
      if (idCard && parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        sex = 1;
      } else {
        sex = 0;
      }
      return sex;
    },
    onConfirm(_date: any) {
      teacherState.teacherCert.birthdate = dayjs(this.popupDate).format('YYYY-MM-DD')
      this.popupShow = false;
    },
    formatter(type: any, val: any) {
      if (type === 'year') {
        return `${val}年`;
      }
      if (type === 'month') {
        return `${val}月`;
      }
      if (type === 'day') {
        return `${val}日`;
      }
      return val;
    }
  },
  render() {
    return (
      <div class={styles.certOne}>
        <CellGroup border={false}>
          <ColField title="真实姓名" required>
            <Field
              v-model={teacherState.teacherCert.realName}
              name="真实姓名"
              maxlength={10}
              placeholder="请输入您的真实姓名"
            />
          </ColField>
          <ColField title="身份证号" required>
            <Field
              v-model={teacherState.teacherCert.idCardNo}
              name="身份证号"
              maxlength={18}
              onBlur={this.onIdCardValidate}
              placeholder="请输入您的身份证号码"
            />
          </ColField>
          <ColField title="性别" required border={false}>
            <div class={styles.radioGroup}>
              <div onClick={() => teacherState.teacherCert.gender = 1} class={[styles.radio, teacherState.teacherCert.gender === 1 ? styles.active : null]}>男</div>
              <div onClick={() => teacherState.teacherCert.gender = 0} class={[styles.radio, teacherState.teacherCert.gender === 0 ? styles.active : null]}>女</div>
            </div>
          </ColField>
          <ColField title="出生日期" required>
            <Field
              v-model={teacherState.teacherCert.birthdate}
              name="出生日期"
              onClick-input={() => this.popupShow = true}
              readonly
              isLink
              placeholder="请选择您的出生日期"
            />
          </ColField>
        </CellGroup>

        <Popup show={this.popupShow} position="bottom" round>
          <DatetimePicker
            v-model={this.popupDate}
            type="date"
            close-on-popstate={true}
            maxDate={this.maxDate}
            onCancel={() => this.popupShow = false}
            onConfirm={this.onConfirm}
            formatter={this.formatter}>
          </DatetimePicker>
        </Popup>
      </div>
    )
  }
})