{{template "header" }}

<div id="deployBox" style="width:100%;height: 100%;">
    <template>
                <el-tabs v-model="tabActive" type="border-card" >
                    <el-tab-pane :label="flyLang.normalModel" name="normalModel">
                        <el-descriptions style="margin-bottom: 10px;" direction="vertical" :column="1" border>
                            <el-descriptions-item label="通用聊天链接">
                                <a v-on:click="window.open(host+'/chatIndex?kefu_id='+kefuName+'&ent_id='+entId)" style="margin-right: 10px"><{host}>/chatIndex?kefu_id=<{kefuName}>&ent_id=<{entId}></a>
                                <el-button  size="mini" type="primary" v-on:click="window.open(host+'/chatIndex?kefu_id='+kefuName+'&ent_id='+entId)">测试对话</el-button>
                                <el-button  size="mini" type="primary" v-on:click="window.open(host+'/kefu/downloadDeploy?token='+localStorage.getItem('token'))">落地页部署</el-button>
                                <div>
                                    <p style="margin-bottom: 10px;">直连链接在微信中打开会展示提示遮罩，请下载落地页，部署在自己域名和服务器下</p>
                                    <p style="margin-bottom: 10px;"><{flyLang.visitorLinkQrcode}></p>
                                    <div style="position: relative;">
                                        <img :src="avator" id="qrcodeLogo2" style="top:90px;margin-top:-20px;left:90px;margin-left:-20px;position:absolute;border:2px solid #fff;display: none;width: 40px;height:40px;border-radius: 8px;">
                                        <div id="dynicQrImg2">
                                        </div>
                                    </div>

                                </div>
                            </el-descriptions-item>

                            <el-descriptions-item label="微信授权聊天链接">
                                <a style="margin-right: 10px" ><{host}>/wechatIndex?kefu_id=<{kefuName}>&ent_id=<{entId}></a>
                                <el-button  size="mini" type="primary"  v-on:click="copyText(host+'/wechatIndex?kefu_id='+kefuName+'&ent_id='+entId)"><{flyLang.copy}></el-button>
                                <br/>
                                <{flyLang.wechatLinkDesc}><br/>
                                <div>
                                    <p style="margin-bottom: 10px;"><{flyLang.wechatLinkQrcode}></p>
                                    <div style="position: relative;">
                                        <img :src="avator" id="qrcodeLogo3" style="top:90px;margin-top:-20px;left:90px;margin-left:-20px;position:absolute;border:2px solid #fff;display: none;width: 40px;height:40px;border-radius: 8px;">
                                        <div id="dynicQrImg3">
                                        </div>
                                    </div>
                                </div>
                            </el-descriptions-item>
                            <el-descriptions-item label="API调用">
                                <table>
                                    <tr>
                                        <td width="100px" align="right"><el-tag>POST</el-tag></td>
                                        <td style="height: 50px;padding-left: 20px"><{host}>/api/v1/<{entId}>/<{kefuName}>/robot/chat
                                            <el-button  size="mini" type="primary"  v-on:click="copyText(host+'/api/v1/'+entId+'/'+kefuName+'/robot/chat')"><{flyLang.copy}></el-button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td  width="100px" align="right"><el-tag>Content-Type</el-tag></td>
                                        <td  style="height: 50px;padding-left: 20px">application/json</td>
                                    </tr>
                                    <tr>
                                        <td width="100px" align="right"><el-tag>body</el-tag></td>
                                        <td  style="height: 50px;padding-left: 20px">
                                             <pre>
{
 "visitor_id": "1",
 "content": "你好",
 "visitor_name": "测试访客"
}
                                            </pre>
                                        </td>
                                    </tr>
                                </table>



                            </el-descriptions-item>
                            <el-descriptions-item :label="flyLang.paramIntro">
                                <div v-html="flyLang.paramsDesc"></div>
                                <div v-html="flyLang.visitorLinkDesc"></div>
                            </el-descriptions-item>

                        </el-descriptions>
                    </el-tab-pane>
                    <el-tab-pane :label="flyLang.dialogModel" name="dialogModel">

                        <el-descriptions style="margin-bottom: 10px;" direction="vertical" :column="1" border>
                            <el-descriptions-item :label="flyLang.dialogModel">
                                <{flyLang.delogDeployDesc}><a target="_blank" :href="'/deploy?siteUrl='+host+'&kefuName='+kefuName+'&entId='+entId">demo</a>
                            </el-descriptions-item>
                            <el-descriptions-item label="code">
                                <textarea class="deployLink" style="height: 360px;">
<script type='text/javascript'>
    (function(a, b, c, d) {
        let h = b.getElementsByTagName('head')[0];let s = b.createElement('script');
        s.type = 'text/javascript';s.src = c+"/static/js/kefu-front.js";s.onload = s.onreadystatechange = function () {
            if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") d(c);
        };h.appendChild(s);
    })(window, document,"<{host}>",function(u){
        KEFU.init({
            KEFU_URL:u,
            KEFU_KEFU_ID: "<{kefuName}>",
            KEFU_ENT: "<{entId}>",
        })
    });
</script>
                       </textarea>
                            </el-descriptions-item>
                            <el-descriptions-item :label="flyLang.paramIntro">
                                KEFU_KEFU_ID:  客服账号用户名<br>
                                KEFU_ENT: 客服的商户ID<br>
                                KEFU_LANG:  cn 中文 ， en英文，jp日文，ru俄文，kr韩文<br>
                                KEFU_SHOW_TYPES: 展示样式，0：不展示，1：普通右下角，2：圆形icon<br>
                                KEFU_AUTO_OPEN: true 自动展开，false 不自动<br>
                                VISITOR_ID:访客id<br>
                                VISITOR_NAME:访客昵称<br>
                                VISITOR_AVATOR:访客头像<br>
                            </el-descriptions-item>
                        </el-descriptions>


                    </el-tab-pane>

                    <el-tab-pane label="微信提醒" >
                        <el-descriptions direction="vertical" :column="2" border>
                            <el-descriptions-item label="客服绑定微信提醒">
                                <div style="display: flex;margin-bottom: 10px;">
                                    <img src="/static/images/wechat.png" style="width: 60px;height:60px;margin-right: 10px;"/>
                                    <div>
                                        <h4  style="margin-bottom: 5px;"><{flyLang.wechatNoticeDesc}></h4>
                                        <el-button @click="window.open('/wechatNotice')" size="small" type="success"><{flyLang.bind}></el-button>
                                        <el-button icon="el-icon-refresh" @click="getWechatOpenidList()" size="small" type="success"></el-button>
                                    </div>
                                </div>



                                <el-table
                                        :empty-text="flyLang.nodata"
                                        :data="openidList"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="oauth_id"
                                            :label="flyLang.wechat">
                                    </el-table-column>

                                    <el-table-column
                                            prop="created_at"
                                            :label="flyLang.createTime">
                                    </el-table-column>

                                    <el-table-column
                                            prop="id"
                                            :label="flyLang.doIt">
                                        <template slot-scope="scope">
                                            <el-button @click="deleteOauth(scope.row.oauth_id)" type="primary" size="small"><{flyLang.delete}></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-descriptions-item>

                        </el-descriptions>
                    </el-tab-pane>
            
                </el-tabs>
    </template>

</div>
</body>
<script src="/static/js/chat-lang.js?v=1.0.0"></script>
<script src="/static/js/jquery.qrcode.js"></script>
<script>
    var LANG=checkLang();
    new Vue({
        el: '#deployBox',
        delimiters:["<{","}>"],
        data: {
            flyLang:KEFU_LANG[LANG],
            window:window,
            host:getBaseUrl(),
            kefuId:"",
            entId:"",
            nickname:"",
            avator:"",
            kefuName:"",
            versionName:"",
            visitorQrcode:"",
            visitorUrl:"",
            wechatVisitorUrl:"",
            wechatVisitorQrcode:"",
            wechatKefuQrcode:"",
            wechatMenuUrl:"",
            systemWechatKefuQrcode:"",
            systemBussinesId:"{{.systemBussinesId}}",
            siteHost:"",
            siteName:"",
            siteDesc:"",
            contact:"",
            tel:"",
            openidList:[],
            tabActive:"normalModel",
        },
        methods: {

            kefuInfo() {
                var _this = this;
                sendAjax("/kefu/kefuinfo","get",{},function (data) {
                    if (data.code != 200) {
                        window.location.href = "/ironMan/signInx";
                    } else {
                        var result = data.result;
                        _this.kefuId = result.id;
                        _this.entId = result.ent_id;
                        _this.kefuName = result.name;
                        _this.nickname = result.nickname;
                        _this.avator = result.avator;
                        _this.visitorUrl=_this.host+'/chatIndex?kefu_id='+result.name+'&ent_id='+result.ent_id;
                        var visitorUrlTxt=_this.host+'/chatIndex?kefu_id='+result.name+'%26ent_id='+result.ent_id;
                        _this.visitorQrcode=_this.host+"/kefu/qrcode?str="+visitorUrlTxt+"&token="+localStorage.getItem("token");
                        _this.wechatMenuUrl=_this.host+'/wechatIndex?ent_id='+result.ent_id+'%26kefu_id='+result.name;
                        _this.wechatVisitorQrcode=_this.host+"/kefu/qrcode?str="+_this.wechatMenuUrl+"&token="+localStorage.getItem("token");
                        _this.getWechatKefuQrcode();


                        $("#qrcodeLogo2").show();
                        var info=_this.host+'/chatIndex?kefu_id='+_this.kefuName+'&ent_id='+_this.entId;
                        $('#dynicQrImg2').empty().qrcode({
                            text: info,      // 二维码的内容
                            render: "canvas",               // 设置渲染方式
                            width: 180,                     // 设置宽度: 默认256
                            height: 180,                    // 设置高度: 默认256
                            background: "#ffffff",          // 背景颜色
                            foreground: "#000000",          // 前景颜色
                        });

                        var info=_this.host+'/wechatIndex?kefu_id='+_this.kefuName+'&ent_id='+_this.entId;
                        $("#qrcodeLogo3").show();
                        $('#dynicQrImg3').empty().qrcode({
                            text: info,      // 二维码的内容
                            render: "canvas",               // 设置渲染方式
                            width: 180,                     // 设置宽度: 默认256
                            height: 180,                    // 设置高度: 默认256
                            background: "#ffffff",          // 背景颜色
                            foreground: "#000000",          // 前景颜色
                        });
                    }
                });


            },
            getWechatKefuQrcode(){
                var _this=this;
                sendAjax("/wechat/showQrcode","get",{entId:this.entId,sceneName:"kf_"+this.kefuName},function(result){
                    if(result.code==200){
                        _this.wechatKefuQrcode=result.result.url
                    }
                });
                sendAjax("/wechat/showQrcode","get",{entId:this.systemBussinesId,sceneName:"kf_"+this.kefuName},function(result){
                    if(result.code==200){
                        _this.systemWechatKefuQrcode=result.result.url
                    }
                });
            },
            getWechatOpenidList(){
                var _this=this;
                sendAjax("/kefu/wechatOpenidList","get",{},function(result){
                        _this.openidList=result.result
                });
            },
            deleteOauth(oauthId){
                var _this=this;
                sendAjax("/kefu/delWechatOpenid","get",{"oauth_id":oauthId},function(result){
                    _this.getWechatOpenidList();
                });
            },
            handleTabClick(tab, event){
                let _this=this;
                if(tab.name=="wechat"){

                }
            },
            reqAuthcode(){
                this.$message({
                    message: "开发中",
                    type: 'error'
                });
            },
            copyText(text){
                copyText(text);
                this.$message({
                    message: "success",
                    type: 'success'
                });
            },
        },
        mounted:function(){
            let _this=this;
            //监听页面显示隐藏
            document.addEventListener('visibilitychange', function(){
                var visibility = document.visibilityState;
                if(visibility == 'visible'){
                    _this.getWechatOpenidList();
                }else if(visibility == 'hidden'){
                }
            });
        },
        created: function () {
            this.kefuInfo();
            this.getWechatOpenidList();
            let tabActive=getQuery("tab");
            if (tabActive!="") this.tabActive=tabActive;
        }
    })
</script>
{{template "setting_bottom" .}}