<template>
  <qinui-login-box class="login">
    <qinui-space placement="col" :size="80" diyStyle="width: 100vw;">
      <qinui-login-header
        title="番知云大剧院"
        imageWidth="156"
        imageHeight="156"
        image="https://test-oss.test.fanzhi.cn/images/aa/ab/b204dafcbd0f744eabedf44d9b4e.jpg?x-oss-process=image/resize,w_200,h_200,m_fill/quality,q_100"
      />
      <qinui-login-tel @sendCode="onGetCode" @submitLogin="onSubmit" ref="loginTel" />
    </qinui-space>
  </qinui-login-box>
</template>

<script>
  export default {
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.loginTel.init();
    },
    methods: {
      onSubmit(loginTelDatas) {
        console.log(loginTelDatas, '提交数据');
      },
      async onGetCode(theRefs) {
        await theRefs.loginTelForm.validateField('tel');
        if (theRefs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          qin.showLoading({
            title: '正在获取验证码',
          });
          setTimeout(() => {
            qin.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            qin.showToast({
              title: '验证码已发送',
              icon: 'none',
            });
            // 通知验证码组件内部开始倒计时
            theRefs.uCode.start();
          }, 2000);
        } else {
          qin.showToast({
            title: '倒计时结束后再发送',
            icon: 'none',
          });
        }
      },
    },
  };
</script>
<style lang="scss">
  .login {
    height: 100vh;
    background: #fff;
  }
</style>