<template>
    <div class="adviser-container">
        <div class="close-button" @click="goMessageList()" v-show='buttonShow'>
            <img :src="closeButton" alt="">
        </div>
        <div class="title-box">
            <div class="title-one">项目金牌顾问</div>
            <div class="title-two">请选择一名顾问带您体验1V1线上实景看房
            </div>
        </div>
        <div class="adviser-list">
            <div class="adviser-item" v-for="(item,index) in adviserList" @click="goChat(item)">
                <div class="head-box">
                    <img v-if="item.head_portrait" :src="item.head_portrait" alt="">
                    <img v-else :src="serverUrl+'im/Avatar_male.png'" alt="">
                </div>
                <div class="message-box">
                    <div class="name">{{item.name}}</div>
                    <div class="evaluate">{{item.evaluate}}</div>
                </div>
                <div class="time"><img :src="chatButton" alt=""></div>
            </div>
        </div>
        <div v-if="showTel">
            <div class="sorry-box">
                <div class="sorry-pic" :style="'background-image:url('+serverUrl+'im/sorry.png)'">
                </div>
                <div class="sorry-text">顾问当前繁忙，您可以留电预约或者稍后再试</div>
            </div>
            <div class="tel-button" @click ='goTel()'>
                <img :src="serverUrl+'im/yuyue.png'" alt="">
            </div>
        </div>
        <loading v-if="loading"></loading>
    </div>

</template>

<script>
    import {imService} from '@/services'
    import util from '@/utils/util.js'
    import ubt from '@/utils/ubt.js'
     var webim = require('../../utils/im/webim.js')
    import Loading from '@/components/loading.vue'
    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com/";
            return {
                title:'在线咨询',
                loading:false,
                serverUrl:serverUrl,
                showCloseButton:false,
                buttonShow:false,
                pathName:null,
                houseid:'109',
                showTel:false,
                flags:true,
                chatButton:`${serverUrl}im/im-chat.png`,
                closeButton:`${serverUrl}im/close-button.png`,
                adviserList:[
                ],
                sharerImage:'',
                channel:''
            }
        },
        computed:{

        },
        filters:{
            avatarFilter(val){
                return val?val:'asd'
            }
        },
        created(){
            //debugger
             if(this.$route.query&&this.$route.query.houseid==102){
                this.houseid = this.$route.query.houseid;
                sessionStorage.setItem('imhouseid',this.$route.query.houseid)
            }
        },
        mounted() {
            util.setTitle(this.title)
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                 window.addEventListener("popstate", function(e) {
                console.log("后退");
                self.location.reload();
            }, false);
            var state = {
                title : "",
                url : "#"
            };
            window.history.replaceState(state, "", "");
                var isPageHide = false;
                window.addEventListener('pageshow', function () {
                    if (isPageHide) {
                        window.location.reload();
                    }
                });
                window.addEventListener('pagehide', function () {
                    isPageHide = true;
                });
            }

            if(this.$route.query&&this.$route.query.pathName){
                  console.log(this.$route.query,'oooooooooooi')
                this.$store.dispatch('setPathName',this.$route.query);
                this.pathName=  this.$route.query;
                console.log(this.pathName,'hhhhhhhhhhhh')
                //debugger
                if(this.pathName.pathName=='preview'){
                     this.buttonShow=true
                }
            }
            console.log(this.$store.state.pathName,'opopopopopop');
            if( this.pathName&&this.pathName.channel){
                this.channel = this.pathName.channel
            }
            if( this.pathName&&this.pathName.sharerImage){
                this.sharerImage = this.pathName.sharerImage;

            }
            this.getToken();
            let customerId = localStorage.getItem('localCustomerId'+this.houseid);
            if(customerId&&localStorage.getItem(customerId+'&isSendMsg')){
                this.showCloseButton = true
            }
            if(!((this.$route.query&&this.$route.query.pathName)||(customerId&&localStorage.getItem(customerId+'&isSendMsg')))){
                this.flags = false
            }
        },
        methods: {
            goMessageList(){
                let that = this
                console.log(this.pathName.templateContentId,this.pathName.projectId,'gggggggggggg')
                webim.logout(function(resp){
                     that.$router.push({name:that.pathName.pathName,query:that.pathName})
                })

                if(this.pathName){
                    this.$router.push({name:this.pathName.pathName,
                        query:{templateContentId:this.pathName.templateContentId,projectId:this.pathName.projectId}})
                }else{

                }
            },
             goChat(item){
                console.log('qwe')
                if(!(item.id&&item.houseid&&item.tel)){
                    this.$message('数据有误，找不到'+item.To_Account)
                    return
                }
                sessionStorage.setItem('adviserInfo',JSON.stringify(item));
                ubt.trackEvent('01011093','sfc.nb.app.home.videoshow.adviserList.itme.click','','',item.id,'','','','','','',item.tel)
                this.$router.push({path:'./im',query:this.$route.query})
            },
            async getToken(){
                if(!localStorage.getItem('localCustomerId'+this.houseid)){
                    let result = await imService.getUserSig(util.reformParam(util.tokenUrl,{
                        "nickname":"",
                        "mobile":"",
                        "verifycode":"",
                        "invitation_code":"",
                        "password":"",
                        "channel":this.channel,
                        "sharerImage":this.sharerImage,
                        "source":"2",
                        "new_guested":"1",
                        "module":"",
                        "houseid":this.houseid,
                        "anonymous":"1",
                        "appVersion":"150"
                    }))
                    let token = result.data.single.tonken;
                    localStorage.setItem('imToken',token);
                    console.log(result,'asf');

                    localStorage.setItem('tmpMobile',result.data.single.loginid);
                    let localCustomerId = result.data.single.id+'_'+result.data.single.loginid+'_'+this.houseid;
                    localStorage.setItem('localCustomerId'+this.houseid,localCustomerId);
                }
                this.getAdviserList();

            },
            async getAdviserList(){
                this.loading = true;
                setTimeout(()=>{
                    this.loading = false;
                },2000)
                let time = util.formatDatetime(new Date())
                let result = await imService.getAdviserList({
                    houseid:this.houseid,
                    time:time,
                    pageNo:1,
                    pageSize:30
                })
                if(result.data.pageModel.resultSet.length<1){
                    this.showTel = true
                }
                this.adviserList = result.data.pageModel.resultSet||[];
                console.log(result.data.pageModel.resultSet,'拿到列表')
                this.loading = false;
            },
            goTel(){

                this.$router.push({path:'./getTel',query:this.$route.query})
            }
        },
        components: {
            Loading
        }
    }
</script>

<style lang="scss" scoped>
 .adviser-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 10px;
         .title-one{
             font-size:38px;
             font-weight:bold;
         }
         .title-two{
             font-size:18px;
             font-weight: 500;

         }
         width:100%;
     }
     .adviser-list{
         .adviser-item{
             border-bottom:1px solid #cccccc;

             box-sizing: border-box;
             margin: 0 auto;
             width:calc(100% - 40px);
             height:110px;
             display:flex;
             align-items: center;
             justify-content: flex-start;
             .head-box{
                 width:60px;
                 height:60px;
                 border-radius: 60px;
                 overflow: hidden;
                 img{
                     width:100%;
                     height:100%;
                 }
             }
             .message-box{
                 margin-left:10px;
                 .name{
                     height:20px;
                     font-size:22px;
                     font-weight:bold;
                 }
                 width:calc(100% - 80px);
                 .evaluate{
                     text-overflow:ellipsis;
                     overflow: hidden;
                     white-space:nowrap;
                     margin-top:8px;
                     color:#999999;
                     max-width:200px;
                 }
             }

             .time{
                 width:30px;
                 height:30px;
                    img{
                        width:100%;
                        height:100%;
                    }
             }
         }
     }
     .sorry-box{
         margin:100px auto;
         width:100%;
         .sorry-pic{
             background-size: cover;
             height:50vw;
             transform: translateX(5%);
             margin:0 auto;
             width:50vw;
         }
         .sorry-text{
             width:100%;
             font-weight:600;
             text-align: center;
             color:#3EB2AC;
         }
     }
     .tel-button{
         width:50vw;
         margin:0 auto;
         img{
             width:100%;
             height:100%;
         }
     }
 }
</style>
