<?php

$baseUrl = Yii::$app->request->baseUrl;
$routes = require_once('routes.php');
$hostUrl = Yii::$app->request->getHostInfo();

/**
 * Class Router
 */
class Router
{
    public $routes = [];
    public $redirects = [];
    public $paths = [];

    public $icons = [
        '欢迎'   => 'glyphicon glyphicon-home',
        '厂商' => 'glyphicon glyphicon-user',
        '序列号'   => 'glyphicon glyphicon-shopping-cart',
        '版本'   => 'glyphicon glyphicon-qrcode',
        '项目'   => 'glyphicon glyphicon-hdd',
        '机器型号'   => 'glyphicon glyphicon-print',
        '生产日期'   => 'glyphicon glyphicon-bullhorn',
        '数据统计'   => 'glyphicon glyphicon-stats',
        '发票'   => 'glyphicon glyphicon-envelope',
        '系统'   => 'glyphicon glyphicon-hdd',
        '设置'   => 'glyphicon glyphicon-cog',
        '自动化' => 'glyphicon glyphicon-time',
        '账号' => 'glyphicon glyphicon-user',
    ];

    /**
     * Router constructor.
     * @param array $routes
     */
    public function __construct(array $routes)
    {
        $this->routes = $routes;
        $this->formatRoutes($this->routes);
        $this->paths = $this->process($this->routes);
    }

    /**
     * @param array $routes
     */
    private function formatRoutes(array &$routes)
    {
        foreach ($routes as $i => &$route){
            $route['icon'] = '';
            if(isset($route['label'])){
                $route['icon'] = $this->getIcon($route['label']);
            }
            if(isset($route['routes']) && is_array($route['routes'])){
                $route['children'] = $route['routes'];
                unset($route['routes']);
                $this->formatRoutes($route['children']);
            }
        }
    }

    private function getIcon(string $label)
    {
        return isset($this->icons[$label]) ? $this->icons[$label] : '';
    }

    /**
     * @param array $routes
     * @param array $paths
     * @param array $parents
     * @param int $level
     * @return array
     */
    private function process(array $routes, $paths = [], $parents = [], $level = 0)
    {
        foreach ($routes as $i => $route){
            /**
             * 处理redirects
             */
            if(isset($route['redirect'])) {
                $this->redirects[$route['path']] = $route['redirect'];
                continue;
            }
            /**
             * 处理paths
             */
            if($level == 0){
                $parents = [];
            }
            if(isset($route['children']) && is_array($route['children'])){
                $parents[] = $route['path'];
                $paths = $this->process($route['children'], $paths, $parents, $level+1);
            } else {
                $paths[$route['path']] = $parents;
            }
        }

        return $paths;
    }

    /**
     * @return array
     */
    public function paths()
    {
        foreach ($this->paths as $key => $value){
            array_push($value, $key);
            $this->paths[$key] = $value;
        }
        return $this->paths;
    }

    /**
     * @return array
     */
    public function routes()
    {
        return $this->routes;
    }

    /**
     * @return array
     */
    public function redirects()
    {
        return $this->redirects;
    }
}

$router = new Router($routes);
$routes = $router->routes();
?>
<style>
    .sidebar-menu li:hover,
    .sidebar-submenu li:hover {
        cursor:pointer;
    }
    
    .x-iframe {
        position: fixed;
        left: 228px;
        top: 50px;
        right: 0;
        bottom: 0;
        height: 100%;
    }

    .loader-container {
        position:absolute;
        top:40%;
        left: 0;
        right: 0;
        text-align:center;
    }
    .loader {
        font-size:12px;
        background-color:#fff;
        padding:10px 0 16px 0;
        margin:0 auto;
        width:230px;
        border:1px solid #999;
        text-align:left;
        z-index:2;
    }
    .loader-bg {
        background-color:#F7F8FA;
        position:relative;
        top:8px;
        left:8px;
        height:7px;
        width:213px;
        font-size:1px;
    }
    .progress {
        height:5px;
        font-size:1px;
        width:1px;
        position:relative;
        top:1px;
        left:0px;
        background-color:#0c80d8;
    }
</style>

<section class="main-left" id='main-left' >
    <aside class="first-sidebar">
        <ul class="sidebar-menu">
            <?php foreach ($routes as $route):?>
                <li>
                    <a path="<?=$route['path']?>" class="route">
                        <div>
                            <?php if(isset($route['icon'])):?><i class="<?=$route['icon']?>"></i><?php endif;?>
                        </div>
                        <div><?=$route['label']?></div>
                    </a>
                </li>
            <?php endforeach;?>
        </ul>
    </aside>
    <aside class="second-sidebar" style="width:0;overflow-y: scroll;height: 100%;">
        <div class="sidebar-submenu-title">
            <span class="sidebar-submenu-label"></span>
        </div>
        <ul class="sidebar-submenu" style="margin-bottom: 10px;padding-bottom:100px"></ul>
    </aside>
</section>

<section class="main-right" style="margin-left: 70px;" id='main-right' >
    <iframe on frameborder="0" class="x-iframe" width="100%" scrolling="no" id="x-iframe"></iframe>
</section>

<script>

    var paths     = <?=json_encode($router->paths())?>;
    var routes    = <?=json_encode($router->routes())?>;
    var redirects = <?=json_encode($router->redirects())?>;
    var isMoblie = false;

    function checkIsMoblie() {
        var userAgentInfo = navigator.userAgent;
        var agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
        isMoblie = false;
        for ( var v = 0; v < agents.length; v++ ) {
            if (userAgentInfo.indexOf(agents[v]) > 0) {
                isMoblie = true;
                break;
            }
        }
    }

    checkIsMoblie();
    
    function hideSubmenuSidebar()
    {
        var w = '70px';
        $('.main-left').css('width', w);
        $('.second-sidebar').width(0).hide();
        $('.main-right').css('marginLeft', w);
        $('.x-iframe').css('left', w);
    }
    
    function showSubmenuSidebar()
    {
        var w = '228px';
        $('.main-left').css('width', w);
        $('.second-sidebar').width(178).show();
        $('.main-right').css('marginLeft', w);
        $('.x-iframe').css('left', w);
    }

    function getParents(path)
    {
        var parents = paths[path];
        if(typeof parents === 'undefined'){
            var parts = path.toString().replace(/^\//, "" );
            parts = parts.replace(/\/$/, "" );
            parts = parts.split('/');
            var _parts = [];
            var _collect = [];
            for(var i in parts){
                _collect.push(parts[i]);
                _parts.push(_collect.join('/'));
            }
            for(var i in _parts){
                var _path = '/' + _parts[i];
                var _parents = paths[_path];
                if(typeof _parents != 'undefined'){
                    parents = _parents;
                    break;
                }
            }
            if(typeof parents == 'undefined'){
                parents = null;
            }
        }
        return parents;
    }
    /**
     * 根据path获取item
     */
    function getItemByPath(path)
    {
        for(var i in routes){
            var item = routes[i];
            if(item.path == path){
                return item;
            }
        }
    }

    /**
     * 转化一下path,有一些path被设置了redirect
     */
    function convertRedirectPath(path)
    {
        if(typeof redirects[path] != 'undefined'){
            path = redirects[path];
        }
        return path;
    }

    /**
     * 构造第二层子菜单
     * @param item
     * @returns {string}
     */
    function getSubMenu2OrItem(item)
    {
        if($.isArray(item.children)){
            var html = '<li><a href="javascript:;"><i class="fa fa-angle-left pull-right"></i><span>'+item.label+'</span><span class="pull-right-container"><i></i></span></a>';
            html += '<ul class="treeview-menu" style="display: block;">';
            for(var i in item.children){
                var route = item.children[i];

                html += '<li><a path="' + route.path + '" class="route"> <span>' + route.label + '</span> </a></li>';

            }
            html += '</ul></li>';
            return html;
        }

        return '<li><a path="' + item.path + '" class="route"> <span>' + item.label + '</span> </a></li>';
    }

    /**
     * 构造子菜单
     * @param items
     * @returns {string}
     */
    function getSubMenuItems(items)
    {
        var html = [];
        for(var i in items){
            if(typeof items[i].redirect != 'undefined'){
                continue;
            }
            html.push(getSubMenu2OrItem(items[i]))
        }
        return html.join('');
    }

    // 获取调整地址
    function getJumpPath(path){
        return "<?= (YII_ENV_PROD) ? '' :  Yii::getAlias('@web') . '/' ?>" + path;
    }

    /**
     * 切换iframe页
     */
    function changeIframe(path)
    {
        var _path = convertRedirectPath(path);
        if(_path){
            path = _path;
        }
        location.hash = path;
        var $iframe = $('.x-iframe');
        $iframe.attr('src', getJumpPath(path));
        bindChangeIframe($iframe);
        if (isMoblie) {
            $('.main-left').css('display', 'none');
            $('.x-iframe').css('left', '0px');
            $('#x-iframe').contents().find(".content").css('right', '0px');
        }
    }

    var tid;
    function bindChangeIframe($iframe)
    {
        removeLoading();
        $('body').append('<div class="loader-container"><div class="loader">' +
            '<div align="center">页面加载中……</div>' +
            '<div class="loader-bg"><div class="progress"></div></div>' +
            '</div></div>');

        //loading
        var pos = 0;
        var dir = 2;
        var len = 0;
        function animate() {
            var $e = $('.loader-container .progress');
            if($e[0] != null) {
                if (pos == 0) len += dir;
                if (len > 32 || pos>179) pos += dir;
                if (pos > 179) len -= dir;
                if (pos > 179 && len == 0) pos=0;
                $e.css({"left": pos, "width": len});
            }
        }

        function removeLoading() {
            clearInterval(tid);
            $('.loader-container').remove();
        }

        tid = setInterval(animate, 20);
        $iframe.off('load').on('load', function() {
            removeLoading();
        });
    }


    /**
     * 创建二层菜单
     */
    function buildSubMenu2(item, current)
    {
        current = current || '';
        var $label = $('.sidebar-submenu-label');
        var $menu2 = $('.sidebar-submenu');

        if(typeof item.children == 'undefined'){
            hideSubmenuSidebar();
        } else {
            showSubmenuSidebar();
        }

        //重新渲染前先清空
        $label.html('');
        $menu2.html('');

        //构造二级菜单
        $label.text(item.label);
        if(typeof item.children != 'undefined'){

            var content = getSubMenuItems(item.children);
            $menu2.html(content);

            bindSubMenu2Event();

            //二级菜单默认路由
            if( !current ){
                //获取未指定二级菜单默认路由，如果有redirect映射关系，转换当前路径
                var path = convertRedirectPath(item.path);
            } else {
                path = current;
            }

            var parents = getParents(path);

            $route = $menu2.find('.route');
            $route.each(function () {
                var $this = $(this);
                if($.inArray($this.attr('path'), parents) > -1){
                    $menu2.find('li').removeClass('active');
                    $this.closest('li').addClass('active');
                }
            });
        }
    }

    /**
     * 绑定二层菜单的点击事件
     */
    function bindSubMenu2Event() {
        var $menu2 = $('.sidebar-submenu');
        var $route = $menu2.find('.route');
        $route.on('click', function () {
            var $this = $(this);
            var path = $this.attr('path');
            var path = convertRedirectPath(path);
            $route.each(function () {
                var $this = $(this);
                var current = $this.attr('path');
                if(current == path){
                    $menu2.find('li').removeClass('active');
                    $this.closest('li').addClass('active');
                }
            });
            changeIframe(path);
        });
    }
    
    function isValidPath(path)
    {
        if(getParents(path)){
            return true;
        }
        return false;
    }

    $(document).ready(function () {

        //初始化当前页面
        var hash = location.hash.replace('#/', '');
        if(!hash){
            hash = 'dashboard';
            hideSubmenuSidebar();
        }
        $('.x-iframe').attr('src', getJumpPath(hash));

        //初始化当前页包括二层菜单
        var current = location.hash.replace('#', '');
        if(!current){
            current = 'dashboard';
        }

        if(isValidPath(current)){

            var parents = getParents(current);
            $('.route').each(function () {
                var $this = $(this);
                if($.inArray($this.attr('path'), parents) != -1){
                    $this.parents('li').addClass('active');
                }
            });
            var item = getItemByPath(parents[0]);
            buildSubMenu2(item, current);
        }

        /**
         * 绑定一层菜单的点击事件，一层菜单需要生成二层菜单。
         */
        $('.sidebar-menu .route').on('click', function(){
            var $this = $(this);
            var path = $this.attr('path');
            menuChange(path)
        });
        
        function menuChange(path)
        {
            path = convertRedirectPath(path);
            if(isValidPath(path)){

                var parents = getParents(path);

                //选中效果
                var $li = $('.sidebar-menu li');
                $li.removeClass('active');
                $li.find('.route').each(function () {
                    var $this = $(this);
                    if($.inArray($this.attr('path'), parents) != -1){
                        $this.parents('li').addClass('active');
                    }
                });

                /**
                 * 渲染二层菜单
                 */
                var item = getItemByPath(parents[0]);
                buildSubMenu2(item, path);
            }
            /**
             * 切换iframe页面
             */
            changeIframe(path);
        }

        window.tabChange  = function (path) {
            menuChange(path);
        };

        //显示菜单
        $('.treeview-menu').show();
    });
</script>