<!DOCTYPE html>
<html lang="zh-cn" >
<head>
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能咨询</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="/static/chat/css/mui.min.css" rel="stylesheet" />
    <link href="/static/chat/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <link href="/static/chat/css/preview.image.css" rel="stylesheet" type="text/css"/>
	<link href="/static/chat/css/chat.css" rel="stylesheet" />
</head>
<body class="chatpage">

    <input type="hidden" id="channelType" value="1" />
    <input type="hidden" id="userId" value="1490856529372954624" />
    <input type="hidden" id="userName" value="游客" />
    <input type="hidden" id="channelId" value="sitemap.xml" />
    <input type="hidden" id="fileUrlPrefix" value="https://aitextrobot.com.cn:8443" />
    <footer class="chat-footer" id="tfooter">
        <div class="footer-left">
            <i id="msg-type" class="iconfont icon-microphone"></i>
        </div>
        <div class="footer-center">
            <textarea id="msg-text" type="text" class="input-text" autocomplete="off" placeholder="请输入您要咨询的问题"></textarea>
            <button id="msg-sound" type="button" class="input-sound" style="display: none;">按住 说话</button>
            <div id="msg-autocomplete-result"></div>
        </div>
        <div class="footer-right">
            <button id="msg-submit" type="button" class="mui-btn"><i class="iconfont icon-send"></i></button>
        </div>
    </footer>

    <div class="mui-content" >
        <div id="msg-list">
            <!-- 聊天内容 -->
        </div>
        <!--<div id="msg-top">
            &lt;!&ndash; top业务 &ndash;&gt;
        </div>-->
    </div>
<!--    <audio src="1227678818427273216.wav" autoplay></audio>-->
    <!-- 录音状态弹框 -->
    <div class="blackBoxSpeak">
        <p class="blackBoxSpeakConent">上划，取消发送</p>
    </div>
    <!-- 取消状态弹框 -->
    <div class="blackBoxPause">
        <p class="blackBoxPauseContent" style="background: red">松开， 取消发送</p>
    </div>
    <!-- 显示更多内容 -->
    <div id="more-pop" class="mui-popover mui-popover-action mui-popover-bottom">
        <div class="more-detail">
            <div class="more-detail-title">
                详情
                <a class="more-detail-closebtn" href="#more-pop"><i class="mui-icon mui-icon-close"></i></a>
            </div>
            <div class="mui-content more-detail-content" id="msg-detailContent"></div>
        </div>
    </div>

    <script src="/static/chat/js/jquery-3.7.0.min.js"></script>
    <script src="/static/chat/js/mui.min.js"></script>
    <script src="/static/chat/js/mui.previewimage.js"></script>
    <script src="/static/chat/js/mui.zoom.js"></script>
    <script src="/static/chat/js/arttmpl.js"></script>
    <script src="/static/chat/js/recorder-core.min.js"></script>
    <script src="/static/chat/js/mp3.min.js"></script>
    <script src="/static/chat/js/mp3-engine.min.js"></script>
    <script src="/static/chat/js/jquery.autocomplete.min.js"></script>
    <script src="/static/chat/js/jquery.nicescroll.min.js"></script>
    <script src="/static/chat/js/sub-html.js"></script>
    <script src="/static/chat/js/common.js"></script>
    <script src="/static/chat/js/request.method.js"></script>
    <script src="/static/chat/js/audio-player.js"></script>
    <script src="/static/chat/js/queue.js"></script>
    <script src="/static/chat/js/robot.js"></script>
    <script src="/static/chat/js/socket.js"></script>

    <!-- 演示模拟数据 -->
    <script src="/static/chat/js/jquery.mockjax.js"></script>
    <script src="/static/chat/js/demoData.js"></script>

    <!-- 演示模拟数据 end -->
    <script type="text/javascript" charset="utf-8">

        $(function(){
            mui.previewImage();
            //获取缓存用户信息,如果本地缓存中有，从缓存中获取
            let userId = $('#userId').val() || common.getLocalStorage('userId');
            let userName = common.getLocalStorage('userName') || $('#userName').val();
            let channelId =  $('#channelId').val();
            common.setLocalStorage('userId', userId);
            common.setLocalStorage('userName', userName);
            common.setLocalStorage('channelId', channelId);
            //初始化websocket
            socket.initWebSocket({
                url: '/websocket',
                userId: userId
            });
            //初始化机器人信息
            let robotObj = new robot({
                //内容展示的父容器id #id
                elem: '#msg-list',
                //用户id
                userId: userId,
                //用户名称
                userName: userName,
                //渠道id
                channelId:channelId,
                //渠道类型 1：web、2：wechat、3：app
                channelType: $('#channelType').val(),
                //消息输入框id -> #id
                msgInputId: '#msg-text',
                //消息发送按钮id -> #id
                msgSubmitBtnId: '#msg-submit',
                //开启tts语音转写
                enableTts: false,
                fileUrlPrefix: $('#fileUrlPrefix').val(),
                recommendTitle: channelId === '2031848466984960' ? '执业师分类' : '热门意图',
            });
            robotObj.getChannelInfo();
            robotObj.initRobot();

            window.addEventListener('socket-message', function (event){
                //console.log('在chat.html中收到socket message消息', event)
            });

            //监听mui-table-view-cell列表点击事件
            mui('body').on('tap','li.mui-table-view-cell',function() {
                let question = this.getAttribute("content");
                //客户咨询
                robotObj.userConsult({
                    'question': question
                });
            });

            //监听href点击事件
            mui("body").on('tap','a[href]',function(){
                let href = $(this).attr('href');
                //处理http
                if(href.indexOf("http://") === 0 || href.indexOf("https://") === 0){
                    mui.openWindow({
                        url: href,
                        target: '__blank'
                    })
                }else if(href.indexOf("#") !== 0){
                    //客户咨询
                    robotObj.userConsult({
                        'question': href
                    });
                    //如果是点击的详情里面的，关闭详情页
                    mui('.mui-popover-bottom').popover('hide');
                }
            });

            // 文字、语音输入切换
            mui('.footer-left').on('tap', 'i[id="msg-type"]', function (){
                let yuyin = $(this).hasClass('icon-yuyin');
                if(yuyin){
                    // 打开录音,请求权限
                    recOpen();
                    // 显示录音按钮
                    $(this).addClass("icon-jianpan").removeClass("icon-yuyin");
                    $("#msg-text").hide();
                    $("#msg-sound").show();
                    $(".footer-right").addClass("hide-submit");
                }else{
                    // 关闭录音,释放资源
                    recClose();
                    // 显示文字输入框
                    $(this).addClass("icon-yuyin").removeClass("icon-jianpan");
                    $("#msg-text").show();
                    $("#msg-sound").hide();
                    $(".footer-right").removeClass("hide-submit");
                }
            });

            // 播放语音
            let playing = false, currentAudio = null;
            $(document).on('click', '.weixinAudio', function () {
                let $audio = $(this).find("audio");
                $audio.prop("src", $audio.data("src"));
                let $audioArea = $(".weixinAudio").find(".audio_area");
                if (playing) {
                    if(currentAudio === $audio.get(0)){     // 是当前播放中的音频、立即停止，并清除音频
                        currentAudio.pause();
                        // currentAudio.currentTime = 0;
                        currentAudio = null;
                        // currentAudio = $audio.get(0);
                        $audioArea.removeClass("playing");
                        playing = false;
                    }else{                                 // 不是当前播放中的，先停止播放中的，再重新赋值音频并播放
                        playing = true;
                        currentAudio.pause();
                        $audioArea.removeClass("playing");
                        currentAudio = $audio.get(0);
                        currentAudio.play();
                        // if(currentAudio.networkState && currentAudio.readyState)
                        $(this).find(".audio_area").addClass("playing");
                    }
                }else{
                    playing = true;
                    currentAudio = $audio.get(0);
                    currentAudio.play();
                    $(this).find(".audio_area").addClass("playing");
                }


                if(currentAudio != null){
                    currentAudio.addEventListener('ended', function () {
                        //在这个方法里写相应的逻辑就可以了
                        $(".weixinAudio").find(".audio_area").removeClass("playing");
                    }, false);
                }
            });




            //录音按钮
            let bt_recoding = document.getElementById("msg-sound");
            // 录音动画弹框
            let blackBoxSpeak = document.querySelector(".blackBoxSpeak");

            // 录音取消弹框
            let blackBoxPause = document.querySelector(".blackBoxPause");

            //手指移动相关
            let posStart = 0;//初始化起点坐标
            let posEnd = 0;//初始化终点坐标
            let posMove = 0;//初始化滑动坐标

            function initEvent() {
                //pc端鼠标是否触发dragstart移动开始事件（pc端鼠标点击后如果没有移动不触发dragstart）
                let isPcDrag = false;
                //是否是pc端事件
                let isPcEvent = typeof window.ontouchstart === 'undefined';
                //如果是pc端， 因为鼠标点击后如果没有移动不触发dragstart。
                // 追加 mousedown 点击后开始录音， mouseup在鼠标没有移动情况下发送录音。 如果鼠标移动了则不执行业务
                if(isPcEvent){
                    bt_recoding.addEventListener('mousedown', function (event) {
                        //阻止浏览器默认行为
                        event.preventDefault();
                        posStart = 0;
                        //获取起点坐标
                        posStart = event.pageY;
                        dragStartData(posStart);
                    });

                    bt_recoding.addEventListener('mouseup', function (event) {
                        if(!isPcDrag){
                            //阻止浏览器默认行为
                            event.preventDefault();
                            posEnd = 0;
                            //获取终点坐标
                            posEnd = event.pageY;
                            let endData = {
                                startPoint: posStart,
                                endPoint: posEnd
                            };
                            dragEndData(endData);
                        }

                    });
                }

                //鼠标拖动开始事件
                let startEventType = typeof window.ontouchstart === 'undefined' ? 'dragstart' : 'touchstart';
                bt_recoding.addEventListener(startEventType, function (event) {
                    isPcEvent && (isPcDrag = true);
                    event.preventDefault();//阻止浏览器默认行为
                    posStart = 0;
                    posStart = isPcEvent ? event.detail.touches[0].pageY : event.touches[0].pageY;//获取起点坐标
                    dragStartData(posStart);
                });

                //鼠标拖动中事件
                let moveEventType = typeof window.ontouchstart === 'undefined' ? 'drag' : 'touchmove';
                bt_recoding.addEventListener(moveEventType, function (event) {
                    event.preventDefault();//阻止浏览器默认行为
                    posMove = isPcEvent ? event.detail.changedTouches[0].pageY : event.targetTouches[0].pageY;//获取滑动实时坐标
                    if (posStart - posMove < 200) {
                        //隐藏录音 显示暂停
                        showBlackBoxSpeak();
                    } else {
                        //显示录音 隐藏暂停
                        showBlackBoxPause();
                    }
                });

                //拖动结束事件
                let endEventType = typeof window.ontouchstart === 'undefined' ? 'dragend' : 'touchend';
                bt_recoding.addEventListener(endEventType, function (event) {
                    event.preventDefault(); //阻止浏览器默认行为
                    posEnd = 0;
                    //获取终点坐标
                    posEnd = isPcEvent ? event.detail.changedTouches[0].pageY : event.changedTouches[0].pageY;
                    let endData = {
                        startPoint: posStart,
                        endPoint: posEnd
                    };
                    dragEndData(endData);
                });

                //开始移动处理数据
                let dragStartData = function (startPoint) {
                    posStart = 0;
                    //获取起点坐标
                    posStart = startPoint;
                    //显示录音 隐藏暂停
                    showBlackBoxSpeak();
                    // 启动开始录音
                    recStart();
                }

                //移动结束处理数据
                let dragEndData = function (data) {
                    isPcEvent && (isPcDrag = false);
                    //初始化状态
                    initStatus();
                    if (data.startPoint - data.endPoint < 200) {
                        // 停止录音
                        recStop();
                        // 关闭录音动画
                        showBlackBoxNone();
                        console.log("发送录音");
                    } else {
                        // 暂停录音
                        recPause();
                        // 关闭录音动画
                        showBlackBoxNone();
                        console.log("取消发送");
                    }
                }
            }

            initEvent();

            //初始化状态
            let initStatus = function () {
                bt_recoding.innerText = '按住 说话';
                //全部隐藏
                showBlackBoxNone();
            }

            //显示录音 隐藏暂停
            let showBlackBoxSpeak = function () {
                bt_recoding.innerText = '松开 发送';
                blackBoxSpeak.style.display = "block";
                blackBoxPause.style.display = "none";
            }

            //隐藏录音 显示暂停
            let showBlackBoxPause = function () {
                bt_recoding.innerText = '松开，取消发送';
                blackBoxSpeak.style.display = "none";
                blackBoxPause.style.display = "block";
            }

            //隐藏录音
            let showBlackBoxNone = function () {
                blackBoxSpeak.style.display = "none";
                blackBoxPause.style.display = "none";
            }


            let rec, recBlob;
            /**调用open打开录音请求好录音权限**/
            let recOpen = function () {//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
                rec = null;
                recBlob = null;
                let newRec = Recorder({
                    type: "mp3", sampleRate: 16000, bitRate: 16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
                    , onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
                        //录音实时回调，大约1秒调用12次本回调

                    }
                });

                createDelayDialog(); //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
                newRec.open(function () {//打开麦克风授权获得相关资源
                    dialogCancel(); //如果开启了弹框，此处需要取消
                    rec = newRec;
                    console.log((rec && Recorder.IsOpen()) ? "已打开录音，可以点击录制开始录音了": "打开录音失败");
                }, function (msg, isUserNotAllow) {//用户拒绝未授权或不支持
                    dialogCancel(); //如果开启了弹框，此处需要取消
                    console.log('%c'+(isUserNotAllow ? "UserNotAllow，" : "") + "打开录音失败：" + msg, 'color:red');
                });

                window.waitDialogClick = function () {
                    dialogCancel();
                    console.log("%c打开失败：权限请求被忽略，<span style='color:#f00'>用户主动点击的弹窗</span>", 'color:red');
                };
            };

            /**关闭录音，释放资源**/
            function recClose() {
                if (rec) {
                    rec.close();
                    console.log("已关闭");
                } else {
                    console.log("%c未打开录音", 'color:red');
                }
            }

            /**开始录音**/
            function recStart() {//打开了录音后才能进行start、stop调用
                if (rec && Recorder.IsOpen()) {
                    recBlob = null;
                    rec.start();
                    console.log("已开始录音...");
                } else {
                    console.log("%c未打开录音", 'color:red');
                }
            }

            /**暂停录音**/
            function recPause() {
                if (rec && Recorder.IsOpen()) {
                    rec.pause();
                } else {
                    console.log("%c未打开录音", 'color:red');
                }
            }

            /**恢复录音**/
            function recResume() {
                if (rec && Recorder.IsOpen()) {
                    rec.resume();
                } else {
                    console.log("%c未打开录音", 'color:red');
                }
            }

            /**结束录音，得到音频文件**/
            function recStop() {

                if (!(rec && Recorder.IsOpen())) {
                    mui.toast('未打开录音')
                    console.log("%c未打开录音", 'color:red');
                    return;
                }
                rec.stop(function (blob, duration) {
                    //转换秒
                    let seconds = Math.floor(duration / 1000) % 60;
                    if(seconds < 1){
                        mui.toast('说话时间太短');
                        return;
                    }
                    let blobUrl = (window.URL || webkitURL).createObjectURL(blob);
                    console.log(blob, blobUrl, "时长:" + duration + "ms");

                    recBlob = blob;
                    console.log("已录制mp3：" + formatMs(duration) + "ms " + blob.size + "字节，可以点击播放、上传、本地下载了");

                    robotObj.userSendAudio({
                        audioBlob: blob,
                        audioPath: blobUrl,
                        duration: seconds
                    });
                }, function (msg) {
                    console.log("%c录音失败:" + msg, 'color:red');
                });
            }


            //recOpen我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
            let showDialog = function () {
                if (!/mobile/i.test(navigator.userAgent)) {
                    return;//只在移动端开启没有权限请求的检测
                }
                dialogCancel();

                //显示弹框，应该使用自己的弹框方式
                let div = document.createElement("div");
                document.body.appendChild(div);
                div.innerHTML = (''
                    + '<div class="waitDialog" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">'
                    + '<div style="display:flex;height:100%;align-items:center;">'
                    + '<div style="flex:1;"></div>'
                    + '<div style="width:240px;background:#fff;padding:15px 20px;border-radius: 10px;">'
                    + '<div style="padding-bottom:10px;">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>'
                    + '<div style="text-align:center;"><a onclick="waitDialogClick()" style="color:#0B1">忽略</a></div>'
                    + '</div>'
                    + '<div style="flex:1;"></div>'
                    + '</div>'
                    + '</div>');
            };
            let createDelayDialog = function () {
                dialogInt = setTimeout(function () {//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
                    showDialog();
                }, 8000);
            }
            let dialogInt;
            let dialogCancel = function () {
                clearTimeout(dialogInt);

                //关闭弹框，应该使用自己的弹框方式
                let elems = document.querySelectorAll(".waitDialog");
                for (let i = 0; i < elems.length; i++) {
                    elems[i].parentNode.removeChild(elems[i]);
                }
            };
            //recOpen弹框End

            let formatMs = function (ms, all) {
                console.log(ms)
                let f = Math.floor(ms / 60000), m = Math.floor(ms / 1000) % 60;
                let s = (all || f > 0 ? (f < 10 ? "0" : "") + f + ":" : "")
                    + (all || f > 0 || m > 0 ? ("0" + m).substr(-2) + "″" : "");
                    + ("00" + ms % 1000).substr(-3);
                return s;
            };

        });

    </script>
</body>
</html>
