{{template "header" }}
<div id="app" style="width:100%">
    <template>
        <el-container v-loading.fullscreen.lock="fullscreenLoading">
            <el-main class="mainMain">
                <div class="profile">
                    <div class="profileItem">
                        <div class="profileLeft"><i class="el-icon-eleme"></i>
                            微信公众号
                        </div>
                        <div class="profileRight"><{visitor.wechat_oauth}></div>
                        <div class="clear"></div>
                    </div>
                    <div class="profileItem" v-on:click="addIpblack(visitor.source_ip)">
                        <div class="profileLeft"><i class="el-icon-place"></i>
                            <{flyLang.ipAddress}>
                        </div>
                        <div class="profileRight"><{visitor.source_ip}></div>
                        <div class="clear"></div>
                    </div>


                    <div class="profileItem">
                        <div class="profileLeft"><i class="el-icon-s-platform"></i>
                            <{flyLang.OsVersion}>
                        </div>
                        <div class="profileRight"><{visitor.osVersion}></div>
                        <div class="clear"></div>
                    </div>
                    <div class="profileItem" :title="visitor.browser">
                        <div class="profileLeft"><i class="el-icon-eleme"></i>
                            <{flyLang.Browser}>
                        </div>
                        <div class="profileRight"><{visitor.browser}></div>
                        <div class="clear"></div>
                    </div>
                    <div class="profileItem"  v-on:click="openUrl('https://www.baidu.com/s?wd='+visitor.client_ip)">
                        <div class="profileLeft">
                            <i class="el-icon-map-location"></i>
                            <{flyLang.city}>
                        </div>
                        <div class="profileRight"><{visitor.city}></div>
                        <div class="clear"></div>
                    </div>
                    <div class="profileItem">
                        <div class="profileLeft">
                            <i class="el-icon-time"></i>
                            <{flyLang.firstTime}>
                        </div>
                        <div class="profileRight"><{visitor.created_at}></div>
                        <div class="clear"></div>
                    </div>
                    <div class="profileItem">
                        <div class="profileLeft">
                            <i class="el-icon-time"></i>
                            <{flyLang.lastTime}>
                        </div>
                        <div class="profileRight"><{visitor.updated_at}></div>
                        <div class="clear"></div>
                    </div>
                    <el-tooltip :content="visitor.refer" placement="left">
                        <div class="profileItem" :title="visitor.refer">
                            <div class="profileLeft">
                                <i class="el-icon-guide"></i>
                                <{flyLang.title}>
                            </div>
                            <div class="profileRight"><{visitor.refer}></div>
                            <div class="clear"></div>
                        </div>
                    </el-tooltip>
                    <el-tooltip  :content="visitor.visitor_id" placement="left">
                        <div class="profileItem">
                            <div class="profileLeft">
                                <i class="el-icon-paperclip"></i>
                                visitorId
                            </div>
                            <div class="profileRight"><{visitor.visitor_id}></div>
                            <div class="clear"></div>
                        </div>
                    </el-tooltip>
                    <el-tooltip  v-for="v in visitorExtra" :content="v.val" placement="left">
                        <div class="profileItem" :title="v.val">
                            <div class="profileLeft">
                                <i class="el-icon-paperclip"></i>
                                <{v.key}>
                            </div>
                            <div class="profileRight" v-on:click="copyText(v.val)"><{v.val}></div>
                            <div class="clear"></div>
                        </div>
                    </el-tooltip>
                </div>

                <el-empty :description="flyLang.nodata" v-show="visitorMessages.list.length==0"></el-empty>
                <div v-for="v in visitorMessages.list" style="font-size: 14px;">
                    <div class="alignCenter" style="color:#5050ff;" v-if="v.mes_type=='kefu'">
                        <el-avatar class="chatRowAvator"  :size="30" :src="v.kefu_avator"></el-avatar>
                        <{v.kefu_name}>
                        <el-tooltip :content="v.visitor_id" placement="top">
                            <font>@<{v.visitor_name}></font>
                        </el-tooltip>
                        <span style="margin-left: 10px;"><{v.create_time}></span>
                    </div>
                    <div class="alignCenter" style="color: #008040;"  v-if="v.mes_type=='visitor'">
                        <el-avatar class="chatRowAvator"  :size="30" :src="v.visitor_avator"></el-avatar>
                        <el-tooltip :content="v.visitor_id" placement="top">
                            <font><{v.visitor_name}></font>
                        </el-tooltip>
                        <span style="margin-left: 10px;"><{v.create_time}></span>
                    </div>
                    <div v-html="v.content" style="color:#333;margin:10px 0px 15px 0px;word-break: break-all;"></div>
                </div>
                <el-pagination
                        background
                        @current-change="visitorMessagesPage"
                        :current-page="visitorMessages.page"
                        layout="prev,pager, next"
                        :page-size="visitorMessages.pagesize"
                        :total="visitorMessages.count">
                </el-pagination>
            </el-main>

        </el-container>
    </template>

</div>
</body>
{{template "setting_bottom" .}}