 <template>
  <div class="download-con">
    <div class="fix-top">
      <div class="download-logo">
        <img src="@/assets/img/download-logo.png" alt="">
      </div>
      <div class="down-tips">
        <p>BSN公链 · 领军影视文化数藏</p>
      </div>
    </div>
    <div class="fix-container">
      <div class="container-input flex-center">
        <h1 class="title">{{ title }}</h1>
        <div class="input-group flex-default">
            <input v-model="phone" maxlength="11" placeholder="请输入您的手机号码" class="input"/>
            <button @click="goShowCaptcha">确定</button>
          </div>
          <div class="invite-code" v-if="inviteCode">
            <p >推荐人邀请码：{{ inviteCode }}</p>
          </div>
          <p class="append">微信扫码登陆，进行数字蔵品支付购买</p>
          <div class="qrcode" >
          <img src="@/assets/img/indexqrcode.png" alt="">
        </div>
      </div>
    </div>
    <div v-if="modalShow === 'codeSent'" class="dialog">
      <p class="d-title">
        验证码已发送到
        <span>{{ phone | phoneFilter }}</span>
      </p>
      <verification-code
        @codeInputted="goRegister"
        class="v-code"
        :code-count="4"
        :type="3"
      ></verification-code>
      <p class="d-tip" v-if="sending">
        请注意查收验证码
        <span>{{ time }}</span>
      </p>
      <p class="d-tip" @click="goShowCaptcha" v-if="!sending">发送验证码</p>
    </div>
    <div v-if="modalShow === 'registered'" class="dialog">
      <p class="d-p">该手机号已注册</p>
    </div>
  </div>
</template>

<script>
import VerificationCode from "@/components/VerificationCode";
// import QRCode from "qrcodejs2";
export default {
  components: { VerificationCode },
  data() {
    return {
      phone: "",
      inviteCode: "",
      channel: "",
      download:
        "http://66666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk6666666askdhsakhdjashdjashdjashdjlk66",
      modalShow: "",
      time: 0,
      countTime: 60,
      sending: false,
      timeId: "",
      longHeight: false,
      inviteUrl: window.location.href,
      url: {
        ios: "",
        android: "",
      },
      // 1 注册  2 下载
      step: 1,
      flag:false
    };
  },
  computed: {
    title() {
      if (this.step == 1) {
        return "输入手机号码注册";
      } else {
        return "已注册账号";
      }
    },
  },
  watch: {},
  created() {
    let { invite_code, channel, download } = this.$route.query;
    this.inviteCode = invite_code;
    this.channel = channel;
    this.download = download;
    let {origin, pathname} = window.location
    this.inviteUrl = `${origin}${pathname}#/download?invite_code=${invite_code}`
  },
  mounted() {
    this.longHeight = window.innerHeight > 800;
    this.getDownloadUrl();
    // this.$nextTick(() => {
    //   this.creatQrcode()
    // })
  },
  methods: {
    // creatQrcode() {
    //   new QRCode(this.$refs.qrcode, {
    //     width: 168,
    //     height: 168, // 高度
    //     text: this.inviteUrl,
    //     correctLevel: QRCode.CorrectLevel.H,
    //   });
    // },
    getDownloadUrl() {
      this.$api({
        apiName: 'getSysVersion',
        success: (res) => {
          this.url = res
        }
      })
    },
    closeModal() {
      if (
        (this.modalShow === "codeSent" && !this.sending) ||
        this.modalShow === "registered"
      ) {
        this.modalShow = "";
      }
    },
    goShowCaptcha() {
      if (/^1[0-9]{10}$/.test(this.phone)) {
        this.goSendCode();
      } else {
        this.$toast("请输入正确的手机号");
      }
    },
    countDown() {
      this.time = this.countTime;
      this.sending = true;
      this.timeId = setInterval(() => {
        if (this.time > 0) {
          this.time--;
        } else {
          this.time = 0;
          this.sending = false;
          clearInterval(this.timeId);
        }
      }, 1000);
    },
     goSendCode() {
       this.$api({
         apiName: 'checkAccount',
         postData:this.phone,
         success: (res)=> {
            if(res) {
              this.modalShow = "registered";
              this.step = 2;
              setTimeout(() => {
                this.$router.push({ name: 'login' })
              }, 1000);
              return;
            }
            this.sendSmsCode()
         }
       })
    },
    sendSmsCode() {
      this.$api({
        apiName: 'sendSmsCode',
        postData: {
          account: this.phone,
          area: "+86",
          type: 1,
        },
        success:()=> {
          this.countDown()
          this.modalShow = "codeSent";
          this.$toast("已发送");
        }
      })
    },
    goRegister(code) {
      this.$api({
        apiName: "login",
        postData: {
          account: this.phone,
          area: "+86",
          registerCode: this.inviteCode,
          verificationCode: code,
        },
        success: (res) => {
          if (res) {
            this.modalShow = "";
            this.$toast("注册成功");
            this.step = 2;
            // this.$nextTick(() => {
            //   this.creatQrcode()
            // })
            this.$router.push({ name: 'home' })
          }
        },
      });
    },
  },
  filters: {
    phoneFilter(val) {
      var pat = /(\d{3})\d*(\d{4})/;
      return val.replace(pat, "$1****$2");
    },
  },
};
</script>

<style lang="less">
.download-con {
  width: 100%;
  height: 100%;
  min-height: 667px;
  background-image: url(~@/assets/img/download-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .fix-top{
    height: 43.02848575712144%;
    width: 100%;
    position: relative;
    .download-logo{
      position: absolute;
      top: 17.77003484320557%;
      left: 50%;
      width: 70px;
      height: 30px;
      transform: translateX(-50%);
      img{
        width: 100%;
        height: 100%;
      }
    }
    .down-tips{
      position: absolute;
      top: 71.42857142857143%;
      width: 100%;
      left: 0;
      p{
        height: 24px;
        font-size: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 24px;
        text-align: center;
      }
    }
  }
  .fix-container{
    position: relative;
    .container-input{
      flex-direction: column;
      .title{
        font-size: 16px;
        height: 18px;
        line-height: 18px;
        color: #FFFFFF;
      }
      .input-group{
        margin-top: 12px;
        width: 252px;
        height: 32px;
        border-radius: 16px;
        background-color: #FFFFFF;
        overflow: hidden;
        input {
            width: 189px;
            border-radius: 25px;
            border: none;
            padding: 0px 17px;
            line-height: 32px;
            height: 32px;
            font-size: 12px;
            font-family: "PingFangSC-Regular,PingFang SC" !important;
          }
        button {
          font-family: LucidaGrande;
          width: 63px;
          background: linear-gradient(90deg, #C8AB88 0%, #FCD6A7 52%, #B28F65 100%);
          border: none;
          border-radius: 16px;
          height: 32px;
          font-size: 14px;
          color: #1A1A1A;
        }
      }
      .invite-code{
        margin-top: 7px;
        height: 20px;
        font-size: 14px;
        font-family: LucidaGrande PingFangSC-Regular,PingFang SC;
        color: #FFFFFF;
        line-height: 17px;
      }
      .invite-code {
        font-family: "PingFangSC-Regular,PingFang SC" !important;
        margin-left: 17px;
        text-align: center;
        color: #ea3037;
        font-size: 14px;
        margin-bottom: 30px;
      }
      .append{
        height: 17px;
        font-size: 12px;
        font-family: LucidaGrande PingFangSC-Regular,PingFang SC;
        color: #FFFFFF;
        line-height: 15px;
        margin-top: 61px;
      }
      .qrcode {
        width: 141px !important;
        height: 141px !important;
        border: 4px solid #ffffff;
        margin: 18px 0 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .dialog {
    z-index: 103;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: 300px;
    /*height: 100px;*/
    border-radius: 10px;
    padding: 30px 20px;
    .d-title {
      text-align: left;
      color: #474747;
      font-size: 14px;
      span {
        color: #6368de;
      }
    }
    .v-code {
      margin-top: 20px;
    }
    .d-tip {
      margin-top: 20px;
      color: #474747;
      span {
        color: #f44e36;
      }
    }
    .d-p {
      color: #474747;
    }
  }
}
</style>
