<template>
  <div>
    <div class="banner-block">
      <img :src="logoUrl">
    </div>
    <div class="form-block" v-if="getPhone==0">
      <div class="input-block">
        <input placeholder="请输入手机号" autofocus="autofocus" type="number" pattern="[0-9]*" v-model="mobile"/>
      </div>
      <p class="tip">* 如已购买课程，手机号必须填下单时填写的收件人手机号</p>
      <div class="input-block">
        <input placeholder="请输入图片验证码" oninput="if(value.length>4)value=value.slice(0,4)" type="number" maxlength="4" pattern="[0-9]*" v-model="imgCode"/>
        <img src="/api/public/img/verify" class="img" ref="imgCode" @click="refImgCode"/>
      </div>
      <div class="input-block">
        <input placeholder="请输入短信验证码" oninput="if(value.length>4)value=value.slice(0,4)" type="number" maxlength="4" pattern="[0-9]*" v-model="msgCode"/>
        <button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
        <button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
      </div>
      <div class="btn-block">
      <div class="btn" ref="btn" @click="bindMobile">
        确定
      </div>
     </div>
    </div>
    <div class="form-block" v-if="getPhone==1">
      <div class="input-block">
        <input    v-model="userDesc.mobile"/>
        <button class="codeMsg right-btn" @click="changeMoblie" >更换手机号</button>
      </div>
      <p class="tip">* 如果您的订单手机号为上述手机号直接点下方确定按钮即可</p>
      <div class="btn-block">
      <div class="btn" ref="btn" style="margin-top:100px;" @click="goList">
        确定
      </div>
     </div>
    </div>
  </div>
</template>

<script>
  import {sendMobileCodeApi,getUserDetailApi,bindMobileApi} from "../../service/api";
  import logoUrl from '../../assets/yujiBg.png'
  import { Toast } from 'vant';
  import common from '../../util/common'
  export default {
    name: "inspectorActivit",
    mounted(){
      this.$sa.track('ViewActivationpage',{
      });
      if(!localStorage.getItem('cc_token')){
        let token = common.getUrlParam().token || this.$route.query.token
        console.log(token)
        if(token){
          localStorage.setItem('cc_token',token);
          this.$store.dispatch('setToken',token);
        }else{
          this.$router.push({name:'author',query:{retUrl:this.$route.fullPath,is_new_user_url:1}})
        }
      }
      getUserDetailApi().then(res=>{
        localStorage.setItem('userDesc',JSON.stringify(res));
        this.userDesc = res
        // if(this.userDesc.mobile){
        //   this.getPhone = 1
        // }else{
          
        // }
        this.getPhone = 0
      })
      window.onresize=()=>{
        // console.log(document.body.clientHeight,'body')
        if(originClientHeight>document.documentElement.clientHeight){
        }else{
          document.documentElement.scrollTop = 0
          document.body.scrollTop = 0
        }
      }
    },
    data(){
      return {
        logoUrl:logoUrl,
        mobile:'',
        time:0,
        flag:true,
        imgCode:'',
        msgCode:'',
        timeSet:null,
        getPhone:'-1',
        userDesc:{}
      }
    },
    methods:{
      goList(){
        this.$router.replace({name:'inspectorList'});
      },
      changeMoblie(){
        this.getPhone = 0;
      },
      refImgCode(){
        this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random()
      },
      sendMobileCode(){
        if(this.imgCode===''||!this.imgCode){
          Toast('请填写图形验证码');
          return false;
        }
        let json={
          img_code:this.imgCode
        };
        let mobileCheck = /^1\d{10,11}$/;
        if(this.mobile.match(mobileCheck)){
          json.mobile = this.mobile
        }else{
          Toast('请正确填写手机号');
          return false
        }
        this.time=30;
        this.timeO();

        this.$sa.track('clickSendcode',{});
        sendMobileCodeApi(json).then(res=>{
          if(res === '操作成功'){
            Toast('验证码已发送');
          }else{
            this.time = 0;
            this.refImgCode();
            Toast(res);
          }
        }).catch(res=>{
          this.refImgCode();
        })
      },
      timeO(){
        if(this.time>0){
          this.time--;
          setTimeout(()=>{
            this.timeO()
          },1000)
        }
      },
      bindMobile(){
        this.$sa.quick('trackHeatMap',this.$refs.btn)
        if(this.flag){
          this.flag = false;
          if(this.msgCode===''||!this.msgCode) {
            Toast('请填写手机验证码');
            return false;
          }
          let json={
            verify_code:this.msgCode
          };
          let mobileCheck = /^1\d{10,11}$/;
          if(this.mobile.match(mobileCheck)){
            json.mobile = this.mobile
          }else{
            Toast('请正确填写手机号');
            return false
          }
          if(window.location.href.indexOf('teacher_id') > -1){
            json.teacher_id = common.getUrlParam().teacher_id || this.$route.query.teacher_id
          }
          // if(window.location.href.indexOf('source') > -1){
          //   json.source = common.getUrlParam().source || this.$route.query.source
          // }
          json.source = "login"
          bindMobileApi(json).then(data=>{
            getUserDetailApi().then(res=>{
              localStorage.setItem('userDesc',JSON.stringify(res));
               this.$router.replace({name:'inspectorList'});
              this.flag = true
            })
          }).catch(res=>{
            this.refImgCode();
            this.flag = true
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .child-view{
    background: white;
  }
  .banner-block{
    text-align: center;
    position: relative;
    top: -20 * @toVw;
    img{
      width: 100%;
    }
  }
  .form-block{
    position: relative;
    z-index: 10;
    background: white;
    top: -42*@toVw;
    padding: 20 * @toVw;
    border-radius:20*@toVw; 
    .tip{font-size: 12*@toVw;color: #FF7875;position: absolute;top:  74 * @toVw;left: 47 * @toVw;}
    .input-block{
      width: 273*@toVw;height: 47*@toVw;
      line-height:47*@toVw;
      text-indent: 10*@toVw;
      border: 1*@toVw solid #cccccc;
      margin-bottom: 26 * @toVw;
      position: relative;
      .img{
        position: absolute;
        right: 10*@toVw;
        width: 100*@toVw;
        top: 10*@toVw;
        font-size: 12*@toVw;
      }
      .right-btn{
        position: absolute;
        right:10*@toVw;
        padding: 0;
        width: 100*@toVw;
        top: 10*@toVw;
        height: 25*@toVw;
        line-height: 25*@toVw;
        font-size: 12*@toVw;
        
      }
      input{
        padding: 10 * @toVw 0;
        font-size:14*@toVw;
        background: transparent;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(0,0,0,1);
        line-height:20*@toVw;
        outline: none;
        border: none;
        &::-webkit-input-placeholder{
          font-size:14*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }    /* 使用webkit内核的浏览器 */
        &:-moz-placeholder{
          font-size:14*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }                  /* Firefox版本4-18 */
        &::-moz-placeholder{
          font-size:14*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }                  /* Firefox版本19+ */
        &:-ms-input-placeholder{
          font-size:14*@toVw;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20*@toVw;
        }
      }
    }
    .btn-block{
    text-align: center;margin-top: 27*@toVw;
    .btn{
      width: 273*@toVw;height: 47*@toVw;background:#FF7D77;color: white;line-height:47*@toVw; border-radius: 4*@toVw; 
    }
  }
  }
  
  .codeMsg{
    border-radius:4*@toVw;
    border:1*@toVw solid rgba(96,173,240,1);
    background: white;
    color: rgb(96,173,240);
    outline: none;
    float: right;
    padding: 8*@toVw 16*@toVw;
    &.disabled{
      opacity: 0.5;
    }
  }
  #myCanvas{
    position: absolute;
    z-index: -1;
    opacity: 0.2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 375 * @toVw;
  }
</style>