<template>
    <section>
        <img :src="imgUrl" style="width:100%;pointer-events:none;display:block"/>
        <div class="tel-sec">
            <p class="tel-title">请填写手机号，置业顾问将以{{telephone}}联络您。</p>
            <div class="tel-sec1">
                <input type="tel" v-model="phone" placeholder="手机号"/>
                <div class="btn text-center" @click="getVerifyFn">{{verifyText}}</div>
            </div>
            <div class="tel-sec1">
                <input type="tel" placeholder="验证码" v-model="verify"/>
                <div class="btn text-center" @click="submit">提交</div>
            </div>
            <div class="tel-bot">
                <div class="tel-main">
                    <div class="tel-btn" @click="contactCounselor">
                        <p>在线顾问</p>
                        <i></i>
                    </div>
                    <div class="coun-btn">
                        <a v-on:click="trackTel" :href="'tel:'+telephone">
                            <p>电话咨询</p>
                            <i></i>
                        </a>
                    </div>
                </div>
                <img :src="appQrcode" class="code-img" v-if="appcodeImg==''?false:true"/>
                <p class="text-center text-code" v-if="appcodeImg==''?false:true">扫描下载APP</p>
                <div class="edite-code">
                    <img :src="content.finalImg== undefined||content.finalImg=='' ?'http://skyforest.static.elab-plus.com/detail/defaultCode.png':content.finalImg"/>
                    <div class="code-title">
                        <p class="title">{{content.finalTitle1}}</p>
                        <p class="sub-title">{{content.finalTitle2}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import util from "../../utils/util";
import ubt from '../../utils/ubt.js'
import  system from "../../utils/system.js"
import configMes from '../../utils/configMes.js'
import {previewService} from '@/services'
import { Toast } from "mint-ui";
import _ from 'lodash'
import queryString from 'query-string'
const parsed = queryString.parse(location.search);
const code = parsed.code || null;
    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com";
            return {
                serverUrl:serverUrl,
                templateContentId:'',
                phone:'',//手机号
                //title:'投放宝',
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                templateType:'',//模板类型
                verify:'',//验证码
                channel:'',//渠道
                sharerImage:'',//二维码
                sendingCode:false,//控制验证码
                submitFlag:false,//防止多次提交
                appcodeImg:'',//底部二维码
                //codeFlag:true,//底部二维码显示控制
                source:4,//来源
                //content:{},//模板内容
                uid:'',//uid
                sessionId:'',//sessionId
                phone:'',//手机号
                platform:4,//渠道来源
                tmpprojectId:'',
                trueProjectId:'',
                keyvalue:'tfb.laypoint.page.enter',//埋点 key值
                telephone:'',//底部电话号码
                appQrcode:'',//底部二维码
            }
        },
        mounted() {
            this.sharerImage = this.$route.query.sharerImage||'';
            this.channel = this.$route.query.fromChannel||'';
            this.templateContentId = this.$route.query.templateContentId;
            this.trueProjectId = this.$route.query.projectId||'';
            this.uid=configMes.getUuid();
            if(sessionStorage.getItem('sid')){
                this.sessionId=sessionStorage.getItem('sid');
            }else{
              sessionStorage.setItem('sid',new Date().getTime());
                this.sessionId=sessionStorage.getItem('sid');
            }

            if(localStorage.getItem('uid')){
                this.uid=localStorage.getItem('uid');
            }else{
              localStorage.setItem('uid', configMes.getUuid());
                this.uid=localStorage.getItem('uid');
            }
            console.log(this.houseId,'jjj')
            this.customerId = localStorage.getItem('localCustomerId'+this.houseId);
            this.isSend = localStorage.getItem(this.customerId+'&isSendMsg'+this.houseId);
            if(this.templateContentId){//未绑定小程序
                //this.source = 4;
            }
            if(system.isIosApp()){
                this.source = 1;
            }
            if(system.isAndroidApp()){
                this.source = 2;
            }

            this.telephone = this.$store.state.tfbContent1.telephone;
            this.appQrcode = this.$store.state.tfbContent1.appQrcode;
            console.log('仓库',this.telephone,this.appQrcode)
        },
        updated(){

        },
        watch:{
            content(val){
                this.content = val
            },
            // projectId(val){
            //     this.tmpprojectId = val;
            // },
            // appQrcode(val){
            //     this.appcodeImg = val;
            // },
            // source(val){
            //     this.sourceFlag = val;
            // },
            // telephone(val){
            //     this.telephone = val;
            // },
            // id(val){
            //     this.id=val
            // },
            // houseId(val){
            //     this.houseId=val
            // },
            imgUrl(val){
                this.imgUrl = val
            }

        },
        created(){
            console.log(this.uid,'-----',this.sessionId,'=====')
            if(this.sendingCode){
                this.getVerifyFn();
            }
        },
        props:{
            //telephone:String,
            content:Object,
            // id:null,
            // appQrcode:String,
            // projectId:null,
            // houseId:null,
            imgUrl:null,
        },
        methods: {
            async verifyCodeFn(){//验证码
                let data = {
                    sms_mobile: this.phone,
                    sms_template: 'verification.code',
                    sms_code: this.houseId==109 ? 'SMS_004' : 'SMS_002',
                    sms_type: '1',
                    sms_params: '{"":""}'
                };
                console.log('---验证码---',data)
                let result = await previewService.verifyCode(data);
                if(result.data.success){
                }else{
                    Toast(result.data.message)
                }
            },
            async checkVerifyCodeEffective(){// 校验验证码
                if(this.submitFlag){
                    return;
                }
                let data = {
                    mobile: this.phone,
                    type: 'verification.code',
                    verifycode: this.verify
                };
                console.log('---校验验证码---',data)
                let result = await previewService.checkVerifyCodeEffective(data);
                if(result.data.success){
                    this.submitFlag = true;
                    this.telData();
                    this.layPointFn();
                    Toast('提交成功')
                }else{
                    this.submitFlag = false;
                    Toast(result.data.message)
                }
            },
            async telData(){//留电
                let data = {
                    houseId: this.houseId,
                    customerMobile: this.phone,
                    sharerImage: this.sharerImage,
                    channel:this.channel,
                    platForm:this.platform,
                    refer:location.href
                };

                let result = await previewService.telData(data);
                if(result.data.success){
                    Toast('提交成功')
                }else{
                    Toast(result.data.message);
                }
            },
            async layPointFn(val){//进入页面埋点

                let data = {
                    projectId:this.tmpprojectId||this.projectId,
                    system:this.source,
                    tfbContentId:this.id,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    mobile:this.phone,
                    keyvalue:this.keyvalue
                }
                let result = await previewService.layPoint(data);
                console.log(result,'dasdsadasdsad')
            },

            getVerifyFn() {
                let vm = this;
                if (this.sendingCode) {
                    return;
                }

                if (!this.phone) {
                    Toast('请输入手机号');
                    return;
                }

                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }
                this.sendingCode = true;
                this.verifyCodeFn();
                let time = 60;
                vm.verifyText = time + 's';
                vm.timer1 = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                        vm.verifyText = time + 's';
                    } else {
                        vm.sendingCode = false;
                        vm.verifyText = '获取验证码';
                        clearInterval(vm.timer1);
                    }
                }, 1000)


            },
            submit(){

                let vm = this;

                if (!vm.phone) {
                    Toast('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }

                if (!vm.verify) {
                    Toast('请输入验证码');
                    return;
                }
                this.keyvalue = 'tfb.laypoint.leavephone.sendverifycode.click';
                if(this.submitFlag){
                    Toast('已经提交')
                    return;
                }

                this.checkVerifyCodeEffective();

            },
            trackTel(){//电话咨询
                this.keyvalue = 'tfb.laypoint.concat.tel.click';
                this.layPointFn();
            },
            contactCounselor(){
                this.keyvalue = 'tfb.laypoint.im.click';
                this.layPointFn();
                let param = {pathName:this.$route.name,templateContentId:this.templateContentId,houseid:this.houseId,projectId:this.trueProjectId,sharerImage:this.$route.query.sharerImage,channel:this.$route.query.channel};
                console.log(param,'op')

                console.log(this.isSend,this.customerId,'ooo')
                if(this.isSend&&this.customerId){
                    this.$router.push({ name: "messageList",query:param});
                }else{
                    this.$router.push({ name: "AdviserList" ,query:param});
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .tel-sec{
        max-width:640px;
        background-color: #CDC9BE;
        padding:0.55rem 0.4rem 0;
        margin:0 auto;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        .tel-title{
            color:#fff;
            font-size: 0.24rem;
            color: #FFFFFF;
            line-height:0.36rem;
            margin-top:0;
        }
        .tel-sec1{
            display: flex;
            align-items: center;
            padding:0;
            margin-bottom: 0.2rem;
            input{
                flex:2;
                height:0.6rem;
                border-radius: 0.08rem;
                outline: none;
                border:none;
                padding-left:0.2rem;
            }
            div{
                height:0.6rem;
                line-height:0.6rem;
                font-size: 0.26rem;
                color: #FFFFFF;
                background: #737373;
                box-shadow: 0 5px 28px 0 rgba(0,0,0,0.39);
                border-radius: 0.08rem;
                flex: 1;
                margin-left:0.2rem;
            }
        }
        .tel-bot{
            margin-top:0.6rem;
            padding-top:0.6rem;
            border-top:1px solid #737373;
            .tel-main{
                display: flex;
                width:5rem;
                height:0.8rem;
                margin:0 auto;
                font-size: 0.3rem;
                color: #737373;
                p{
                    position: absolute;
                    right:0.45rem;
                    top:50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    margin:0;
                }
                a{
                    color: #737373;
                }
                i{
                    width:0.38rem;
                    height:0.38rem;
                    display: block;
                    position: absolute;
                    left:0.4rem;
                    top:50%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                }
                .tel-btn{
                    flex: 1;
                    border-radius: 1rem 0 0 1rem;
                    background-color: #fff;
                    border-right:1px solid #CDC9BE;
                    position: relative;
                    i{
                        background: url('http://skyforest.static.elab-plus.com/previewModel/counselor.png');
                        background-size: 100% 100%;
                    }
                }
                .coun-btn{
                    flex: 1;
                    border-radius: 0 1rem 1rem 0;
                    background-color: #fff;
                    position: relative;
                    i{
                        background: url('http://skyforest.static.elab-plus.com/previewModel/tel.png');
                        background-size: 100% 100%;
                    }
                }
            }
            .code-img{
                width:2.4rem;
                height:2.4rem;
                border:0.06rem solid #fff;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                margin:1.6rem auto 0.4rem;
                display: block;
            }
            .text-code{
                font-size: 0.24rem;
                color: #737373;
                line-height:0.33rem;
                margin:0;
            }
            .edite-code{
                padding:1.22rem  0.4rem 0.46rem;
                position: relative;
                img{
                    width:1.11rem;
                    height:1.11rem;
                    background-color: #fff;
                    display: block;
                    // position: absolute;
                    // left:0.4rem;
                }
                .code-title{
                    width:4.8rem;
                    position: absolute;
                    bottom:0.46rem;
                    right:0;
                    .title{
                        font-size: 0.28rem;
                        color: #737373;
                        border-bottom:1px solid #737373;
                        margin:0;
                        line-height:0.4rem;
                    }
                    .sub-title{
                        font-size: 0.24rem;
                        color: #737373;
                        line-height:0.33rem;
                        margin:0;
                    }
                }
            }
        }
        }
</style>
