<template>
<div class="tel-container">
    <div class="close-button" @click="goAdviserList()">
        <img :src="serverUrl+'im/close-button.png'" alt="">
    </div>
    <div class="title-box">
        <div class="title-one">请填写手机号</div>
        <div class="title-two">置业顾问将以{{telPhone}}联络您。
        </div>
    </div>
    <div class="input-box">
        <div class="top-box" >
            <el-input v-model.trim="tel" placeholder="请输入手机号" class="tel-input"></el-input>
            <el-button type="small" class="getVerify" @click="getVerifyCode()">{{verifyText}}</el-button>
        </div>
        <div class="bottom-box">
            <el-input v-model.trim="verifyCode" placeholder="请输入验证码" class="verify-input" type="text"></el-input>
        </div>
    </div>
    <div class="sure" @click="sendTel()">
        <img :src="serverUrl+'im/sure.png'" alt="">
    </div>
    <div class="dialog" v-if="dialog">
        <div class="dialog-top">已成功预约留电</div>
        <div class="dialog-bottom">置业顾问将以{{telPhone}}联络您。</div>
    </div>
</div>
</template>

<script>
    import ubt from '@/utils/ubt.js'
    import {imService} from '@/services'
    import {previewService} from '@/services'

    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com/";
            return {
                verifyText:'获取验证码',
                isSend:false,
                tel:'',
                houseid:'109',
                telPhone:'(0574)5568 6666',
                dialog:false,
                verifyCode:'',
                serverUrl:serverUrl,
                pathName:{},
                templateContentId:'',
                 flag:false,
                projectId:''

            }
        },
        mounted() {

            console.log(this.$route.query,'hhhh')
          this.$nextTick(()=>{
                if(this.$route.query&&this.$route.query.houseid==102){
                this.telPhone='023-62382388';
                this.houseid=this.$route.query.houseid;
                 console.log(this.telPhone,this.houseid,'fffffffffffffff')
            }
          })

             this.pathName =  this.$route.query||{};
            // if( this.pathName.pathName){
            //     this.pathName = this.$store.state.pathName;
            //     this.templateContentId = this.$store.state.pathName.templateContentId;
            //     this.projectId = this.$store.state.pathName.projectId
            // }
                console.log(this.pathName,'别跳啊')
        },
        methods: {
            goAdviserList(){
                this.$router.go(-1)
            },
            async telData(){//留电
                let data = {
                    houseId: this.houseid,
                    customerMobile: this.tel,
                    sharerImage: this.pathName.sharerImage||'',
                    channel:this.pathName.channel||'',
                    platForm:'2',

                    refer:location.href
                };

                let result = await previewService.telData(data);
                if(result.data.success){

                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{

                }
            },
            async sendTel(){
                //debugger
                if(this.flag){
                    return
                }
                this.flag=true;
                console.log(this.flag)
                if (!/^1\d{10}$/.test(this.tel)) {
                    this.$message('请输入正确的手机号');
                    this.flag = false
                    return;
                }

              if(this.verifyCode.length<1){
                  this.$message('验证码不能为空')
                  this.flag = false
                  return;
              }
              let result = await previewService.checkVerifyCodeEffective({
                  mobile:this.tel,
                  type: 'verification.code',
                  verifycode:this.verifyCode
              })
                if(result.data.success){
                    ubt.trackEvent('01011093','sfc.nb.app.home.videoshow.preorder.click')
                    this.telData()
                  this.dialog = true;
                    setTimeout(()=>{

                      this.dialog = false;
                      if(this.pathName.pathName=='preview'){
                          //debugger
                          this.$router.push({name:this.pathName.pathName,
                            query:this.$route.query})
                      }else{
                        //   this.$router.push({name:'AdviserList',query:{templateContentId:this.pathName.templateContentId,projectId:this.pathName.projectId}})
                      }
                  },2000)
                }else{
                    this.flag = false
                    this.$message(result.data.message)
                }
            },
            async getVerifyCode(){
                if(this.isSend){
                    return
                }
                if (!/^1\d{10}$/.test(this.tel)) {
                    this.$message('输入的手机号不合法');
                    return;
                }
                let result = await imService.getVerifyCode({
                    sms_mobile: this.tel,
                    sms_template: 'verification.code',
                    sms_code: this.houseid==109 ? 'SMS_004' : 'SMS_002',
                    sms_type: '1',
                    sms_params: '{"":""}'
                })
                if(result){
                    this.isSend = true;
                    let time = 60;
                    let time1 = setInterval(()=>{
                        if(time>0){
                            time = time-1;
                            this.verifyText = time +'秒后获取'
                        }else{
                            this.verifyText = '获取验证码';
                            this.isSend = false;
                            clearInterval(time1)
                        }
                    },1000)
                }else{
                    this.$message('网络连接出现问题，请稍后再试！')
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tel-container{
        font-size: 16px;
        .close-button{
            position: absolute;
            top:20px;
            right:20px;
            height:20px;
            width:20px;
            img{
                width:100%;
                height:100%;
            }

        }
        .title-box{
            box-sizing: border-box;
            padding:10px 0 0 20px;
            .title-one{
                font-size:38px;
                font-weight:bold;
            }
            .title-two{
                font-size:18px;
            }
            width:100%;
        }
        .input-box{
            width:100%;
            box-sizing: border-box;
            margin-top:20px;
            padding:20px;
            .top-box{
                display: flex;
                justify-content: space-between;
                .tel-input{
                    width:70%;
                }
                .getVerify{
                }

            }
            .bottom-box{
                margin-top:10px;
                width:100%;
            }
        }
        .sure{
            z-index:20;
            width:50px;
            margin: 40vh auto 0px;
            height:50px;
            img{
                height:100%;
                width:100%;
            }
        }
    }
    .dialog{
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:68vw;
        height:100px;
        background: rgba(0,0,0,0.6);
        padding-top:30px;
        border-radius: 8px;
        .dialog-top{
            width:100%;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color:#fff;
        }
        .dialog-bottom{
            margin-top:5px;
            width:100%;
            text-align: center;
            font-size:14px;
            color:#fff;
        }
    }
</style>
