<template>
    <div class="tel-sec" :style="`background-color:${bgc}`">

        <div class="tel-btn" @click="contactCounselor" :style="`background-color:${btnColor}`">
            <p>一对一在线咨询</p>
        </div>
        <div class="line"></div>
        <ul :style="`color:${btnColor}`">
            <li class="saveTel" @click="isSaveTel"><i></i>留电</li>
            <li class="phone">
                <a v-on:click="trackTel" :href="'tel:'+tfbContent1.telephone" :style="`color:${btnColor}`">
                    <i></i>电话咨询
                </a>
            </li>
            <li class="qrcode" @click="showQrcode" v-if="tfbContent1.miniQrCode"><i></i>查看二维码</li>
        </ul>
        <div class="saveTelContain" v-if="saveTelFlag">
            <div class="tel-sec1">
                <input type="tel" v-model="phone" placeholder="您的手机号" maxlength="11"/>
                <div class="btn text-center" @click="getVerifyFn">{{verifyText}}</div>
            </div>
            <div class="tel-sec1 verify">
                <input type="tel" placeholder="填写验证码" v-model="verify" maxlength="6"/>
                <div class="btn text-center" @click="submit">提交</div>
            </div>
        </div>
        <!--<img :src="tfbContent1.appQrCode" class="code-img" v-if="tfbContent1.appQrCode"/>-->
        <!--<p class="text-center text-code" v-if="tfbContent1.appQrCode">扫描下载项目APP</p>-->
        <!--<div class="projectNmae">-->
            <!--<p class="text-center text-adr">项目地址：{{tfbContent1.address}}</p>-->
            <!--<p class="text-center text-adr">开发商：{{tfbContent1.owner}}</p>-->
        <!--</div>-->
        <div class="tel-bot">
            <!--<div class="tel-main">-->
                <!--<div class="coun-btn">-->
                    <!--<a v-on:click="trackTel" :href="'tel:'+tfbContent1.telephone" :style="`background: url(${serverUrl}button_phone.png) center  center no-repeat/2.4rem .7rem`">-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
            <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">本资料提供的所有文字、图片、视频数据仅供参考，</p>
                    <p class="sub-title">最终以政府批准文件及双方签订的买卖合同为准</p>
                </div>
            </div>
        </div>
        <div class="shade" v-if="isShowQrcode" @click="hideQrcode">
            <div class="isShowQrcode" @click.stop="copyName">
                <img :src="tfbContent1.miniQrCode" alt="">
                <p v-if="isWX">长按识别，进入小程序</p>
                <p v-else>点击复制项目小程序名称，进入微信搜索</p>
            </div>
        </div>
        <textarea v-model="miNiName" style="transform: translateX(-100000px);position: fixed" id="miNiName"></textarea>
    </div>
</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 {
        props:{
          bgc:{//背景色
              type:String,
              default:'#B1C096'
          },
          btnColor:{//IM按钮底色和‘留点/电话咨询/查看二维码’文字颜色
              type:String,
              default:'#5f8a61'
          }
        },
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com/temp/template7/";
            return {
                saveTelFlag:false,
                isShowQrcode:false,
                miNiName:"w三轻奢公寓",//小程序的名字，后台提供
                qrCode:"http://skyforest.static.elab-plus.com/temp/code.png",//小程序二维码
                serverUrl:serverUrl,
                templateContentId:'',
                phone:'',//手机号
                //title:'投放宝',
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                imgUrl:'',//空白模板图片
                templateType:'',//模板类型
                verify:'',//验证码
                channel:'',//渠道
                isMini:false,//是否为小程序环境
                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值
            }
        },
        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.tfbContent1.houseId,'jjj')
            this.customerId = localStorage.getItem('localCustomerId'+this.tfbContent1.houseId);
            this.isSend = localStorage.getItem(this.customerId+'&isSendMsg'+this.tfbContent1.houseId);
            // if(this.tfbContent1.projectId){//绑定小程序
            //     this.source = 3;
            // }
            if(system.isIosApp()){
                this.source = 1;
            }
            if(system.isAndroidApp()){
                this.source = 2;
            }
            console.log('--------------------',this.tmpprojectId,'=========')
        },
        updated(){

        },
        computed:{
            tfbContent1(){
                return this.$store.state.tfbContent1;
            },
            isWX(){
                return navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"?true:false;
            }
            // 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
            // }

        },
        created(){
            wx.miniProgram.getEnv((res)=> {
                if(res.miniprogram){
                    this.isMini = true
                }
            })
            //util.setTitle(this.title);
            console.log(this.uid,'-----',this.sessionId)
            if(this.sendingCode){
                this.getVerifyFn();
            }

            if(this.isMini){//小程序
                this.source = 3;
            }else{
                this.source = 4;
            }
        },
        // props:{
        //     telephone:String,
        //     content:Object,
        //     id:null,
        //     appQrcode:String,
        //     projectId:null,
        //     houseId:null,
        // },
        methods: {
            copyName(){
                if(this.isWX){
                    return false;
                }
                if(!this.miNiName){
                    Toast("数据异常，未返回小程序名称！");
                    return false;
                }
                var Url2=document.getElementById("miNiName");
                Url2.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                Toast("已复制小程序名称，请前往微信黏贴并搜索");
            },
            isSaveTel(){
                this.saveTelFlag=!this.saveTelFlag;
            },
            hideQrcode(){
                this.isShowQrcode=false;
            },
            showQrcode(){
                this.isShowQrcode=true;
            },
             async verifyCodeFn(){//验证码
                let data = {
                    sms_mobile: this.phone,
                    sms_template: 'verification.code',
                    sms_code: this.tfbContent1.houseId==109 ? 'SMS_004' : 'SMS_002',
                    sms_type: '1',
                    sms_params: '{"":""}'
                };
                console.log('---验证码---',data)
                let result = await previewService.verifyCode(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{
                    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('提交成功')
                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{
                    this.submitFlag = false;
                    Toast(result.data.message)
                }
            },
            async telData(){//留电
                let data = {
                    houseId: this.tfbContent1.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('提交成功')
                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{
                    Toast(result.data.message);
                }
            },
            async layPointFn(val){//进入页面埋点

                let data = {
                    projectId:this.tmpprojectId||this.tfbContent1.projectId,
                    system:this.source,
                    tfbContentId:this.tfbContent1.id,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    mobile:this.phone,
                    keyvalue:this.keyvalue
                }
                //console.log(data,'//////////////')
                let result = await previewService.layPoint(data);
                console.log(result,'dasdsadasdsad')
                // if(result.data.success){
                //     if(val==1){
                //         Toast('提交成功')
                //     }
                // }else{
                //     if(val==1){
                //         Toast(result.data.message)
                //     }

                // }
                //console.log(result,'---------根据项目ID获取模板内容---------',JSON.parse(result.data.single.content))
            },

            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';
                //this.layPointFn(1);
                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();
                if(this.isMini){
                    wx.miniProgram.navigateTo({url:'../counselorList/counselorList'})
                    return
                }
                let param = {pathName:this.$route.name,templateContentId:this.$route.query.templateContentId,projectId:this.$route.query.projectId,templateCode:this.$route.query.templateCode,houseid:this.$store.state.tfbContent1.houseId,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>
    *{
        margin: 0;
        padding: 0;
        border: none;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .tel-sec{
        padding:.6rem .6rem .2rem .6rem;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        .tel-btn{
            margin: 0 auto;
            width: 4.22rem;
            line-height: .9rem;
            border-radius: .45rem;
            font-size: .36rem;
            color: #fff;
            background: url("http://skyforest.static.elab-plus.com/temp/chat.png") no-repeat .45rem center/.42rem .41rem;
            padding-left: 1.1rem;
        }
        .line{
            opacity: 0.32;
            border: .01rem solid #1C1C1C;
            height: .01rem;
            margin-top: .38rem;
        }
        ul{
            display: flex;
            margin-top: .3rem;
            align-items: center;
            justify-content: center;
            li{
                font-family: PingFangSC-Regular;
                font-size: .24rem;
                text-align: center;
                line-height: .3rem;
                margin: 0 .3rem;
                a{
                    text-decoration: none;
                }
            }
            li i{
                display: block;
                margin: 0 auto;
                width: .7rem;
                height: .7rem;
                margin-bottom: .1rem;
            }
            .saveTel i{
                background: url("http://skyforest.static.elab-plus.com/temp/liudian2.png") no-repeat top center/.7rem .7rem;
            }
            .phone i{
                background: url("http://skyforest.static.elab-plus.com/temp/tel.png") no-repeat top center/.7rem .7rem;
            }
            .qrcode i{
                background: url("http://skyforest.static.elab-plus.com/temp/code.png") no-repeat top center/.7rem .7rem;
            }
        }
        .saveTelContain{
            padding: .33rem .2rem .2rem .2rem;
            width: 6.3rem;
            height: 2.3rem;
            background: url("http://skyforest.static.elab-plus.com/temp/input box.png") no-repeat center center/100% 100%;
            .tel-sec1{
                display: flex;
                input{
                    width: 4.2rem;
                    height: .8rem;
                    line-height: .8rem;
                    border-radius: .08rem;
                    font-family: PingFangSC-Medium;
                    font-size: .3rem;
                    /*color: #FFFFFF;*/
                    text-align: justify;
                    background: transparent;
                    padding-left: .3rem;
                    outline: none;
                }

                input::placeholder{
                    width: 4.2rem;
                    height: .8rem;
                    line-height: .8rem;
                    border-radius: .08rem;
                    font-family: PingFangSC-Medium;
                    font-size: .3rem;
                    color: #FFFFFF;
                    text-align: justify;
                }
                div{
                    width: 1.65rem;
                    height: .8rem;
                    font-family: PingFangSC-Semibold;
                    font-size: .28rem;
                    color: #333333;
                    text-align: center;
                    line-height: .8rem;
                }
            }

            .verify{
                margin-top: .15rem;
            }
        }
        .tel-bot{
            margin-top: .75rem;
            p{
                ont-family: PingFangSC-Regular;
                font-size: .24rem;
                color: #666666;
                text-align: center;
            }
        }
        .shade{
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
            top: 0;
            left: 0;
            z-index: 100;
            .isShowQrcode{
                padding-top: .7rem;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%,-50%,0);
                width: 6rem;
                margin: 0 auto;
                height: 6rem;
                p{
                    font-size: .28rem;
                    text-align: center;
                    padding: .5rem 1.2rem;
                }
                img {
                    width: 3.6rem;
                    height: 3.6rem;
                    display: block;
                    margin: 0 auto;
                }
            }
        }
    }
</style>
