<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body class="layui-layout-body">
<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect>
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a>
                        <i class="layui-icon layui-icon-website"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" >
                        <video id="remoteVideo" style="display: none" ></video>
                        <video id="localVideo" style="display: none" muted="muted"></video>
                    </a>
                </li>
            </ul>

            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                <li class="layui-nav-item" lay-unselect >
                    <a href="javascript:;" id="call-status" style="width: 50px" ></a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <cite id="sip-status">
                            @if($data['sip_id'])
                                外呼号：{{$data['username']}}
                            @else
                                无外呼号
                            @endif
                        </cite>
                    </a>
                    @if($data['sip_id'])
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="regBtn" >在线</a></dd>
                        <dd><a href="javascript:;" id="unregBtn">离线</a></dd>
                    </dl>
                    @endif
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a layadmin-event="message" lay-text="消息中心">
                        <i class="layui-icon layui-icon-notice"></i>
                        <!-- 如果有新消息，则显示小圆点 -->
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="theme">
                        <i class="layui-icon layui-icon-theme"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="note">
                        <i class="layui-icon layui-icon-note"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <cite>{{auth()->user()->nickname}}</cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="change-password">修改密码</a></dd>
                        <dd><a href="{{route("auth.logout")}}">退出</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                    <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
            </ul>
        </div>

        <!-- 侧边菜单 -->
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo" lay-href="{{route("index.console")}}">
                    <span>后台系统</span>
                </div>
                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                    lay-filter="layadmin-system-side-menu">
                    <li data-name="home" class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;" lay-tips="主页" lay-direction="2">
                            <i class="layui-icon layui-icon-home"></i>
                            <cite>主页</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="console">
                                <i class="layui-icon layui-icon-layouts"></i>
                                <a lay-href="{{route("index.console")}}">控制台</a>
                            </dd>
                            <dd data-name="console">
                                <i class="layui-icon layui-icon-layouts"></i>
                                <a lay-href="{{route("index.onlinecall")}}">在线拨号</a>
                            </dd>
                        </dl>
                    </li>
                    @foreach(\Illuminate\Support\Facades\Session::get('menus') as $menu1)
                        <li data-name="{{$menu1['name']}}" class="layui-nav-item">
                            <a
                                @if($menu1['type']==1 && ($menu1['route'] || $menu1['url']))
                                lay-href="{{$menu1['url']?$menu1['url']:route($menu1['route'],[],false)}}"
                                @else
                                href="javascript:;"
                                @endif
                                lay-tips="{{$menu1['name']}}" lay-direction="2">
                                <i class="layui-icon {{$menu1['icon']}}"></i>
                                <cite>{{$menu1['name']}}</cite>
                            </a>
                            @if(isset($menu1['childs']) && !empty($menu1['childs']))
                                <dl class="layui-nav-child">
                                    @foreach($menu1['childs'] as $menu2)
                                        <dd data-name="{{$menu2['name']}}" >
                                            <a
                                                @if($menu2['type']==1 && ($menu2['route'] || $menu2['url']))
                                                lay-href="{{$menu2['url']?$menu2['url']:route($menu2['route'],[],false)}}"
                                                @else
                                                href="javascript:;"
                                                @endif
                                                lay-tips="{{$menu2['name']}}" lay-direction="2">
                                                <i class="layui-icon {{$menu2['icon']}}"></i>
                                                <cite>{{$menu2['name']}}</cite>
                                            </a>
                                            @if(isset($menu2['childs']) && !empty($menu2['childs']))
                                                <dl class="layui-nav-child">
                                                    @foreach($menu2['childs'] as $menu3)
                                                        <dd data-name="{{$menu3['name']}}">
                                                            <a
                                                                @if($menu3['type']==1 && ($menu3['route'] || $menu3['url']))
                                                                lay-href="{{$menu3['url']?$menu3['url']:route($menu3['route'],[],false)}}"
                                                                @else
                                                                href="javascript:;"
                                                                @endif
                                                                lay-tips="{{$menu3['name']}}" lay-direction="2">
                                                                <i class="layui-icon {{$menu3['icon']}}"></i>
                                                                <cite>{{$menu3['name']}}</cite>
                                                            </a>
                                                        </dd>
                                                    @endforeach
                                                </dl>
                                            @endif
                                        </dd>
                                    @endforeach
                                </dl>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <!-- 页面标签 -->
        <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
                <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                            <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                            <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li lay-id="{{route("index.console")}}" lay-attr="{{route("index.console")}}" class=""><i class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body">
            <div class="layadmin-tabsbody-item layui-show">
                <iframe src="{{route("index.console")}}" frameborder="0" class="layadmin-iframe"></iframe>
            </div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/webrtc/sip-0.7.0.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index',
        notice: 'notice/notice',
    }).use(['index', 'layer', 'jquery','notice'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var notice = layui.notice;
        // 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
        notice.options = {
            closeButton:true,//显示关闭按钮
            debug:false,//启用debug
            positionClass:"toast-bottom-right",//弹出的位置,
            showDuration:"300",//显示的时间
            hideDuration:"1000",//消失的时间
            timeOut:"5000",//停留的时间
            extendedTimeOut:"1000",//控制时间
            showEasing:"swing",//显示时的动画缓冲方式
            hideEasing:"linear",//消失时的动画缓冲方式
            iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
            onclick: null, // 点击关闭回调
        };

        $(".change-password").on("click", function () {
            layer.open({
                type: 2,
                title: '修改密碼',
                shadeClose: true,
                area: ['30%', '50%'],
                content: '/change_my_password_form'
            })
        })

        @if(isset($data['sip_id'])&&$data['sip_id'])
        navigator.mediaDevices.getUserMedia({audio: true, video: true});
        var userAgentSession;
        var userAgent;
        function initUserAgent(){
            userAgent = new SIP.UA({
                uri: '{{$data["uri"]}}',
                wsServers: ['wss://{{$data["wss_url"]}}:7443'],
                authorizationUser: '{{$data["username"]}}',
                password: '{{$data["password"]}}',
                displayName: '{{$data["username"]}}',
                hackIpInContact: true,
                rtcpMuxPolicy: 'negotiate',
                hackWssInTransport: true,
                rel100: SIP.C.supported.SUPPORTED,
                log: {
                    level: 0, //日志等级
                },
                /**
                 * sip.js生成的随机contact字符串 设置后会以此为后缀 可以搭配 cusContactName使用,根据自身业务进行使用
                 *  设置前: sofia/internal/sip:admin10@df7jal23ls0d.invalid;
                 *  设置后: sofia/internal/sip:admin10@192.168.0.253;
                 *
                 *
                 hackIpInContact: "106.13.223.129",
                 userAgentString: "myAwesomeApp",
                 registerOptions: {
                    expires: 300,
                    registrar: 'sip:xdwh.dgg.net',
                },
                 **
                 * 此处是笔者自定义的参数,因为注册到fs时,sip.js会随机生成contact字符串,如:sofia/internal/sip:admin10@df7jal23ls0d.invalid;
                 *  笔者自己添加了一个参数,对sip.js的源码进行了修改 ,修改后效果  sofia/internal/sip:1012@192.168.0.253 不需要的可以不理会此参数
                 * 此处纠正问题,官方提供了一个参数[contactName],使用此参数即可,sip.js使用官方的即可
                 * contactName:"1012"
                 */
                contactName:"1001"
            });
            //注册成功
            userAgent.on('registered', function (e) {
                $('#sip-status').text($("#regBtn").text());
            });
            //未注册成功
            userAgent.on('unregistered', function () {
                $('#sip-status').text($("#unregBtn").text());
                $('#sip-status').click(function () {
                    return;
                })
            });
            //监听来电
            userAgent.on('invite', function (session) {
                userAgentSession = session;
                userAgentSession.on('terminated', function (message, cause) {//结束
                    $("#call-status").html("")
                    layer.msg("通话结束");
                });
                userAgentSession.accept({
                    media: {
                        render: {
                            remote: document.getElementById('remoteVideo'),
                            local: document.getElementById('localVideo')
                        },
                        constraints: {
                            audio: true,
                            video: false
                        }
                    }
                });
                layer.msg("新的来电系统已为您自动接听");
                $("#call-status").html('<span class="layui-badge">挂断</span>')
                $("#call-status span").click(function () {
                    if(userAgent){
                        userAgentSession.terminate()
                    }
                })
            });
            userAgent.start()
        }

        $("#regBtn").click(function () {
            initUserAgent();
            userAgent.register();
        })
        $("#unregBtn").click(function () {
            if(userAgent){
                userAgent.unregister()
            }
        })
        @endif

        const ws = new WebSocket("wss://{{$data['websocket_url']}}/wss?user_id={{auth()->user()->id}}")
        var ticker
        ws.onopen = function () {
            ticker = setInterval(function () {
                ws.send('{"scene":"heartbeat","data":""}')
            },30000)
        }
        ws.onmessage = function (e) {
            console.log("收到服务端消息：" + e.data)
            let data = JSON.parse(e.data);
            if (data.scene != undefined){
                switch (data.scene) {
                    case 'heartbeat':
                        console.log(data.data)
                        break;
                    case 'msg':
                        notice.info(data.data)
                        break;
                    default:
                        break;
                }
            }
        }
        ws.onclose = function (e) {
            console.log("websocket已断开")
            if(ticker){
                clearInterval(ticker)
            }
        }



    });
</script>

</body>
</html>
