import ColHeader from '@/components/col-header'
import ColSearch from '@/components/col-search'
import {
  Sticky,
  Image,
  List,
  Popup,
  Icon,
  Area,
  Field,
  Form,
  CellGroup,
  Button,
  Toast,
  Picker,
  DatetimePicker,
  Overlay
} from 'vant'
import ImgCode from '@/components/col-img-code'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import bg from './images/teacherBg.png'
import rejectLogo from './images/rejectLogo.png'
import rejectSchool from './images/rejest-school.png'
import subTitle from './images/subTitle.png'
import centerLogo from './images/center.png'
import studentText from './images/studentText.png'
import { useRoute } from 'vue-router'
import icon_arrow from './images/icon_arrow.png'
import rejectBtn from './images/rejectBtn.png'
import teacherSuccess from './images/teacherSuccess.png'
import SubjectModel from './modals/chioseSuond'
import request from '@/helpers/request'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'tenantStudentRejest',
  setup() {
    const route = useRoute()
    const forms = reactive({
      idCardNo: '',
      username: '',
      realName: '',
      phone: '',
      subjectId: '',
      tenantId: route.query.tenantId,
      birthdate: '',
      code: ''
    })

    const data = reactive({
      schoolName: route.query.name || '',
      cityName: '', // 所属城市
      showArea: false,
      checked: true,
      success: false,
      areaList: {} as any,
      sendMsg: '获取验证码',
      imgCodeStatus: false,
      subjectList: [],
      searchStatus: false,
      openStatus: false,
      dateState: false,
      showSuccess: false,
      // selectedSubjectList: [] as any,
      choiceSubjectIds: [] as any,
      choiceSubjectNames: [] as any
    })
    const handleSubmit = async () => {
      console.log(forms, 'forms')
      if (!forms.username) {
        Toast('请输入老师昵称')
        return
      }
      if (!forms.phone) {
        Toast('请输入手机号')
        return
      }
      if (!forms.code) {
        Toast('请输入验证码')
        return
      }
      if (!forms.realName) {
        Toast('请输入真实姓名')
        return
      }
      if (!forms.idCardNo) {
        Toast('请输入身份证号')
        return
      }
      if (data.choiceSubjectIds.length < 1) {
        Toast('请选择声部')
        return
      }
      try {
        const res = await request.post('/api-tenant/open/teacher/submit', {
          data: { ...forms, subjectId: data.choiceSubjectIds.join(',') }
        })
        data.showSuccess = true
      } catch (e) {
        console.log(e)
      }
    }
    const getSubjectList = async () => {
      try {
        const res = await request.get('/api-tenant/open/subject/queryPage', {
          data: { page: 1, rows: 9999 }
        })
        // const res = await request.post('/api-tenant/open/subject/queryPageTree', { data: { page: 1, rows: 9999 } })
        data.subjectList = res.data.rows || []

        /**
         * .map((item: any) => {
          return {
            text: item.name,
            value: item.id
          }
        })
         *
         */
      } catch (e) {
        console.log(e)
      }
    }
    const confirmSubject = (val: any) => {
      console.log(val, 'confirmSubject')
    }

    const confirmDate = (val: any) => {
      forms.birthdate = dayjs(val).format('YYYY-MM-DD')
      data.dateState = false
    }

    onMounted(() => {
      console.log(route.query)
      getSubjectList()
    })

    /** 发送验证码 */
    const onSendSms = async () => {
      if (!forms.phone) {
        Toast('请输入手机号码')
        return
      }
      if (!/^1[3456789]\d{9}$/.test(forms.phone)) {
        Toast('手机号码格式不正确')
        return
      }
      // await request.post('/api-student/code/sendSmsCode', {
      //   requestType: 'form',
      //   data: {
      //     mobile: forms.phone,
      //     type: 'REGISTER'
      //   }
      // })
      // onCountDown()
      // setTimeout(() => {
      //   Toast('验证码已发送')
      // }, 100)
      data.imgCodeStatus = true
    }
    const onCountDown = () => {
      data.sendMsg = '60s'
      let count = 60
      const timer = setInterval(() => {
        count--
        data.sendMsg = `${count}s`
        if (count <= 0) {
          data.sendMsg = '获取验证码'
          clearInterval(timer)
        }
      }, 1000)
    }

    const downApp = () => {
      window.open(location.origin + '/student/#/download?type=teacher')
      data.showSuccess = false
    }

    const onChoice = (val: any) => {
      data.searchStatus = false
      data.choiceSubjectIds = [...val]
      const chioseSound = [] as any
      data.subjectList.forEach((item: any) => {
        if (data.choiceSubjectIds.indexOf(item.id) != -1) {
          chioseSound.push(item.name)
        }
      })
      data.choiceSubjectNames = [...chioseSound]
      // data.choiceSubjectNames =
    }

    return () => (
      <>
        <div class={styles.videoClass}>
          <div class={styles.resjetStudentWrap}>
            <img src={rejectLogo} class={styles.rejectLogo} alt="" />
            <img src={studentText} class={styles.studentText} alt="" />
            <img src={bg} class={styles.bgWrap} alt="" />
            <div class={styles.schoolNameWrap}>
              <img src={rejectSchool} class={styles.rejectSchool} alt="" />
              <p>{data.schoolName}</p>
            </div>
            <img class={styles.centerLogo} src={centerLogo} alt="" />
            <div class={styles.infoWrap}>
              <div class={styles.infoWrapCore}>
                <img src={subTitle} class={styles.subTitle} alt="" />

                <Form onSubmit={() => handleSubmit()}>
                  <CellGroup class={styles.group} border={false}>
                    <Field
                      class={styles.noArrow}
                      inputAlign="right"
                      label="老师昵称"
                      placeholder="请输入老师昵称"
                      maxlength={12}
                      v-model={forms.username}

                      // onUpdate: modelValue={(val: string) => {
                      //   forms.nickname = val.trim();
                      // }}
                    />

                    <Field
                      inputAlign="right"
                      label="手机号"
                      class={styles.noArrow}
                      maxlength={11}
                      placeholder="请输入手机号码"
                      v-model={forms.phone}
                    />
                    <div class={styles.tips}>手机号码为酷乐秀学院登录账号</div>

                    <Field
                      class={styles.inputCode}
                      inputAlign="left"
                      label="请输入验证码"
                      labelWidth={0}
                      v-model={forms.code}
                      maxlength={6}
                    >
                      {{
                        button: () => (
                          <Button
                            disabled={data.sendMsg.includes('s')}
                            class={styles.sendBtn}
                            onClick={() => onSendSms()}
                          >
                            {data.sendMsg}
                          </Button>
                        )
                      }}
                    </Field>
                    <Field
                      class={styles.noArrow}
                      inputAlign="right"
                      label="真实姓名"
                      placeholder="请输入真实姓名"
                      maxlength={20}
                      v-model={forms.realName}

                      // onUpdate: modelValue={(val: string) => {
                      //   forms.nickname = val.trim();
                      // }}
                    />
                    <Field
                      class={styles.noArrow}
                      inputAlign="right"
                      label="身份证号"
                      placeholder="请输入身份证号"
                      maxlength={20}
                      v-model={forms.idCardNo}

                      // onUpdate: modelValue={(val: string) => {
                      //   forms.nickname = val.trim();
                      // }}
                    />

                    <Field
                      border={false}
                      inputAlign="right"
                      label="声部"
                      placeholder="请选择声部"
                      readonly
                      v-model={data.choiceSubjectNames}
                      onClick={() => (data.searchStatus = true)}
                    >
                      {{
                        button: () => (
                          <img
                            style={{
                              display: 'block',
                              width: '12px',
                              height: '12px'
                            }}
                            src={icon_arrow}
                          />
                        )
                      }}
                    </Field>
                  </CellGroup>
                </Form>
              </div>
              <img
                src={rejectBtn}
                onClick={() => {
                  handleSubmit()
                }}
                class={styles.rejectBtn}
                alt=""
              />
            </div>
          </div>
          {/* <Popup
          show={data.searchStatus}
          position="bottom"
          round
          columns-field-names={{ text: '' }}
          safe-area-inset-bottom
          onClose={() => (data.searchStatus = false)}
          onClosed={() => (data.openStatus = false)}
        >
          <Picker columns={data.subjectList} onCancel={() => { data.searchStatus = false }} onConfirm={confirmSubject}></Picker>
        </Popup> */}

          <Popup
            show={data.searchStatus}
            round
            closeable
            position="bottom"
            style={{ height: '60%' }}
            teleport="body"
            onUpdate:show={val => (data.searchStatus = val)}
          >
            <SubjectModel
              subjectList={data.subjectList}
              choiceSubjectIds={data.choiceSubjectIds}
              onChoice={onChoice}
              single={true}
              selectType="Checkbox"
            />
          </Popup>
        </div>

        <Overlay show={data.showSuccess} z-index={1000}>
          <div class={styles.showWrap}>
            <img class={styles.showWrapTop} src={teacherSuccess} alt="" />
            <h2>恭喜您已成功登记为</h2>
            <h4>
              {data.schoolName} <span>【音乐老师】</span>{' '}
            </h4>
            <p>请下载酷乐秀机构版APP进行学习</p>
            <div class={styles.downApp} onClick={downApp}>
              立即下载
            </div>
          </div>
        </Overlay>

        {data.imgCodeStatus ? (
          <ImgCode
            v-model:value={data.imgCodeStatus}
            phone={forms.phone}
            registerType="REGISTER"
            onClose={() => {
              data.imgCodeStatus = false
            }}
            onSendCode={onCountDown}
          />
        ) : null}
      </>
    )
  }
})
