<template>
  <div class="activity">
    <img v-lazy="spcShopImg.spcShop7" alt="">
    <div class="form-block" >
      <div class="input-block">
        <input placeholder="请输入手机号"   autofocus="autofocus" type="number" pattern="[0-9]*" v-model="mobile"/>
      </div>
      <!-- <p class="tip">* 如已购买课程，手机号必须填下单时填写的收件人手机号</!-->
      <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>
    <img v-lazy="spcShopImg.spcShop1" alt="">
    <img v-lazy="spcShopImg.spcShop2" alt="">
    <img v-lazy="spcShopImg.spcShop3" alt="">
    <img v-lazy="spcShopImg.spcShop4" alt="">
    <!-- <img v-lazy="spcShopImg.spcShop5" alt=""> -->
    <img v-lazy="spcShopImg.spcShop6" alt="">
    <img class="nav" @click="navTo" ref="nav" v-lazy="spcShopImg.spcShop8" alt="">
  </div>
</template>

<script>
import { spcShopImg } from "../../util/imgUrl";
import { Toast} from 'vant';
import {sendMobileCodeApi,getUserDetailApi,bindMobileApi,getGoodsDetailApi} from "../../service/api";
  export default {
    name: "spcShop",
    data(){
      return {
        inviteList:[],
        spcShopImg:spcShopImg,
        imgCode:"",
        msgCode:'',
        time:0,
        mobile:''
      }
    },
    filters: {
    },
    mounted(){
      window.onscroll = () => {
      //变量t是滚动条滚动时，距离顶部的距离
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (this.$refs.nav) {
        if (t > 300) {
          this.$refs.nav.style.opacity = 1;
        } else {
          this.$refs.nav.style.opacity = 0;
        }
      }
    };
    if(!this.$route.query.shopId){
      this.$router.push('error')
      return
    }else{
      getGoodsDetailApi(this.$route.query.shopId).then(res => {

    })
    }
    },
    methods:{
      navTo(){
        window.scrollTo(0,0)
      },
      bindMobile(){
        this.$sa.quick('trackHeatMap',this.$refs.btn)
          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.getParamhref().teacher_id || this.$route.query.teacher_id
          }
          json.source = "login"
          let query = { shopId: this.$route.query.shopId,type:"" };
          if(this.$route.query.invite_code){
            query.invite_code = this.$route.query.invite_code
          }
          if (localStorage.getItem("gdt_vid")) {
            query.gdt_vid = localStorage.getItem("gdt_vid");
          }
          if (window.location.href.indexOf("cct_user_id") > -1) {
            query.cct_user_id = comment.getParamhref().cct_user_id;
          }
          console.log(json)
          bindMobileApi(json).then(data=>{
            getUserDetailApi().then(res=>{
              localStorage.setItem('userDesc',JSON.stringify(res));
              this.$sa.track('buttonClick',{
                tabTitle:'商品',
                moduleTitle:'商品领取',
                buttonName:'立即免费领取'
              });
              this.$router.push({
                name: "buy",
                query: query
              });
            })
          }).catch(res=>{
          })
      },
      refImgCode(){
        this.$refs.imgCode.src='/api/public/img/verify?flag='+Math.random()
      },
      sendMobileCode(){
        let mobileCheck = /^1\d{10,11}$/;
        console.log(this.mobile)
        let json={}
        if(this.mobile.match(mobileCheck)){
          json.mobile = this.mobile
        }else{
          Toast('请正确填写手机号');
          return false
        }
        // json.img_code = this.imgCode
        this.time=30;
        this.timeO();

        this.$sa.track('clickSendcode',{});
        sendMobileCodeApi(json).then(res=>{
          if(res === '操作成功'){
            Toast('验证码已发送');
          }else{
            this.time = 0;
            Toast(res);
          }
        }).catch(res=>{
        })
      },
      timeO() {
        if (this.time > 0) {
          this.time--;
          setTimeout(() => {
            this.timeO();
          }, 1000);
        }
      },
    }
  }
</script>
<style>
  img,video{
    max-width: 100%;
  }
</style>
<style scoped lang="less">
  @import "../../util/public";
  @red: #fc4a1b;
  @borderRadius: 8px;
  .activity {
    background-color: white;
        .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;
        }
      }
      .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: 18 * @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:#FE6C3D;color: white;line-height:47*@toVw; border-radius: 23*@toVw;
      }
    }
    }
    .nav{
        position: fixed;
        width: 185*@toVw;
        bottom: 30*@toVw;
        left: 100*@toVw;
        opacity: 0;
        transition:all 0.5s;
      }
  }
</style>
