import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { Button, Field, Popup, Progress, showToast } from 'vant';
import iconKey from './images/icon-phone.png';
import loginError from './images/login-error.png';
import bannerBg from './images/banner.png';
import request from '@/helpers/request';
import { useRouter } from 'vue-router';
import { browser, checkPhone } from '@/helpers/utils';
import num1 from '../images/num1.png'
import num2 from '../images/num2.png'

export default defineComponent({
  name: 'instrument-registration',
  setup() {
    const router = useRouter();
    const state = reactive({
      progressRate: 0,
      statusShow: false,
      mobile: '',
      loading: false
    });
    const onSubmit = async () => {
      if (!checkPhone(state.mobile)) {
        return showToast('请输入正确的手机号码');
      }
      state.loading = true;
      try {
        const res = await request.post(
          '/edu-app/open/instrumentRegister/getStudentActivationRecord',
          {
            requestType: 'form',
            data: {
              mobile: state.mobile
            }
          }
        );

        animation(res);
      } catch {
        //
        state.loading = false;
      }
    };

    const animation = (item: any) => {
      const timer = setInterval(() => {
        if (state.progressRate >= 100) {
          clearInterval(timer);
          if (item.code !== 200) {
            state.statusShow = true;
            state.progressRate = 0;
            state.loading = false;
          } else {
            router.push({
              path: '/activationRegistrationDetail',
              query: {
                mobile: state.mobile
              }
            });
          }
        } else {
          state.progressRate += 4;
        }
      }, 80);
    };

    return () => (
      <div class={[styles.registrationContainer]}>
        <img src={bannerBg} class={styles.bannerBg} />
        <div class={styles.registration}>
          <div class={styles.inputGroup}>
            <Field
              class={styles.input}
              leftIcon={iconKey}
              v-model={state.mobile}
              autocomplete="off"
              maxlength={11}
              type="digit"
              placeholder="请输入【音乐数字课堂】激活成功时的手机号"
            />

            <div class={styles.btnGroup}>
              <Button
                block
                round
                disabled={state.loading}
                onClick={onSubmit}
                color="linear-gradient( 305deg, #007AFE 0%, #31C7FF 100%)">
                <p>{state.loading ? '正在进行核验' : '互通核验'}</p>
                <span>
                  {state.loading ? '请稍后······' : '多子女需多次核验'}
                </span>
              </Button>
              {state.loading && (
                <Progress
                  showPivot={false}
                  strokeWidth={4}
                  v-model:percentage={state.progressRate}
                  class={styles.progress}
                />
              )}
            </div>
          </div>
        </div>

        <Popup
          show={state.statusShow}
          style={{
            background: 'transparent',
            overflow: 'visible !important'
          }}>
          <div class={styles.popupContainer}>
            <img class={styles.title} src={loginError} />

            <div class={styles.content}>
              互通互联检测未通过，可能存在以下原因：
              <div class={styles.contentTip}>
                <p>
                  <img src={num1} class={styles.num} />
                  所在学校未开启互通互联
                </p>
                <p>
                  <img src={num2} class={styles.num} />
                  未激活数字化工具
                </p>
              </div>
            </div>
            <div class={styles.pBtnGroup}>
              <Button
                round
                block
                onClick={() => (state.statusShow = false)}
                color="linear-gradient( 305deg, #3192FF 0%, #40C8FF 100%)">
                我知道了
              </Button>
            </div>
          </div>
        </Popup>
      </div>
    );
  }
});
