var list = new Array();
var objectFilter = [];
var usageFilter = [];
var listObj = new Object();
var table = [];

const vm = Vue.createApp({
    data() {
        return {
            banner: "",
            pageHeader: "",
            userName: "",
            role: "",
            right: -1,
            list: list,
            table: table,
        }
    },
    mounted() {
        $.ajax({
            url: "/Authorization/script/php/permission/get_right.php",
            contentType: "application/json",
            dataType: "json",
            type: "GET",
            async: false,
            data: {
                page: window.location.pathname,
            }
        }).done(response => {
            console.log(response)
            this.userName = response.name;
            this.role = response.GroupName;
            this.right = response.RightID;
            this.pageHeader = response.PageName;
            this.banner = response.PgroupName;
            addUserImage(response.name.charAt(0), response.GroupName);
        }).fail(function (error) {
            console.log(error);
        });

    },
    provide() {
        return {
            banner: Vue.computed(() => this.banner),
            role: Vue.computed(() => this.role),
            userName: Vue.computed(() => this.userName),
            right: Vue.computed(() => this.right),
        }
    }
});
vm.component('side-bar', {
    inject: ['right'],
    data() {
        return {
            right: this.right,
        }
    },
    template: `<aside id="sidebar-left" class="sidebar-left">
        <div class="sidebar-header">
            <div class="sidebar-title"> 導覽 </div>
            <div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
        </div>
        <div class="nano">
            <div class="nano-content">
                <nav id="menu" class="nav-main" role="navigation">
                    <ul class="nav nav-main">
                        <side-bar-list href="index.php" fa="fa fa-gear" span="權限管理"></side-bar-list>
                        <side-bar-list v-if="right.value > 3" href="Log.php" fa="fa fa-history" span="Log日誌"></side-bar-list>    
                    </ul>
                </nav>
            </div>
        </div>
    </aside>`
});

vm.component('side-bar-hide', {
    inject: ['banner'],
    data() {
        return {
            banner: this.banner,
        }
    },
    template: `<aside id="sidebar-left" class="sidebar-left">
        <div class="sidebar-header">
            <div class="sidebar-title"> 導覽 </div>
            <div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
        </div>
        <div class="nano">
            <div class="nano-content">
                <nav id="menu" class="nav-main" role="navigation">
                    <ul class="nav nav-main">
                        <li style="display:none;">
                            <a href="home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </aside>`
});

vm.component('header-menu', {
    inject: ['banner', 'userName', 'role'],

    data() {
        return {
            banner: this.banner,
            userName: this.userName,
            role: this.role,
        }
    },
    template: `<header class="header">
    <div class="logo-container">
        <div class="banner-txt">{{banner.value}}</div>
        <div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
            <i class="fa fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>
    <!-- start: search & user box -->
    <div class="header-right"> <span class="separator"></span>
    <ul class="notifications">
        <li>
            <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                <i class="fa fa-bell"></i>
                <span id="warning-count" class="badge">0</span>
            </a>
            <div class="dropdown-menu notification-menu">
                <div class="notification-title">
                    <span id="warning-count2" class="pull-right label label-default">0</span>
                    警告
                </div>
                <div class="content">
                    <ul>
                        <li id="warning-style" style="display: none;">
                            <a href="warning.php" class="clearfix">
                                <div class="image">
                                    <i class="fa fa-warning bg-danger"></i>
                                </div>
                                <span class="title">人員進入危險區域</span>
                                <span class="message">現在</span>
                            </a>
                        </li>
                        <div id="warning-none">No warning</div>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href="/Front-Page/home.php" class="notification-icon" data-toggle="tooltip" title="綜合登入入口" data-placement="bottom">
                <i class="fa fa-home"></i>
            </a>
        </li>
    </ul><span class="separator"></span>
        <div id="userbox" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture"> <img src="assets/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="assets/images/!logged-user.jpg" /> </figure>
                <div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@JSOFT.com"> <span class="name">{{userName.value}}</span> <span class="role">{{role.value}}</span> </div> <i class="fa custom-caret"></i>
            </a>
            <div class="dropdown-menu">
                <ul class="list-unstyled">
                    <li class="divider"></li>
                    <li> <a role="menuitem" tabindex="-1" href="/Front-Page/script/php/Logout.php"><i class="fa fa-power-off"></i> Logout</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end: search & user box -->
</header>`
});

vm.component('inner-menu', {
    template: `<div class="inner-menu-toggle">
<a href="#" class="inner-menu-expand" data-open="inner-menu">
    Show Bar <i class="fa fa-chevron-right"></i>
</a>
</div>

<menu id="content-menu" class="inner-menu" role="menu">
<div class="nano">
    <div class="nano-content">

        <div class="inner-menu-toggle-inside">
            <a href="#" class="inner-menu-collapse">
                <i class="fa fa-chevron-up visible-xs-inline"></i><i class="fa fa-chevron-left hidden-xs-inline"></i> Hide Bar
            </a>
            <a href="#" class="inner-menu-expand" data-open="inner-menu">
                Show Bar <i class="fa fa-chevron-down"></i>
            </a>
        </div>

        <div class="inner-menu-content">
            
            <slot name="inner-upload"></slot>
            <slot name="inner-equipment"></slot>
        </div>
    </div>
</div>
</menu>`
});

vm.component('inner-menu-li', {
    template: `<li>
                  <a v-bind:href="href" v-bind:class = "GetLocation?'menu-item active':'menu-item'"><i class="fa fa-gears"></i>{{name}}</a>            
               </li>`,
    computed: {
        GetLocation() {
            var url_href = window.location.href;
            var url = new URL(url_href);
            var type = url.searchParams.get("type");
            if (type != null) {
                if (this.href.includes(type)) {
                    return true;
                } else {
                    return false;
                }
            }


        }
    },
    props: {
        href: String,
        name: String,
    }
});

vm.component('search-bar', {
    template: `<li style="padding-top: 10px;">
    <div class="input-group input-search" style="table-layout: auto;">
        <input type="search" class="form-control" name="q" id="quicksearch" placeholder="Search...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit" id="searchBtn"><i class="fa fa-search"></i></button>
        </span>
    </div>
</li>`,
});

vm.component('filter-bar', {
    template: `<li class="right">
        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
            <li>
                <label>Filter:</label>
            </li>
            <li class="active">
                <button id="switch" class="btn btn-default">篩選<span id="caret" class="caret"></span></button>
            </li>
        </ul>
    </li>`,
});

vm.component('filter-content', {
    template: `<div id="filter-content" class="panel-body" style="display:none;">
    <label style="padding: 10px 15px;">元件版本:</label>
    <div class="btn-group">
        <div id="options">
            <div id="revitVersion" class="option-set" data-group="year">
                
            </div>
        </div>
    </div>
</div>`,
});

vm.component('filter-content2', {
    data() {
        return {
            usageFilter: usageFilter,
            objectFilter: objectFilter,
        }
    },
    template: `<div id="filter-content" class="panel-body" style="display:none;">
    <div class="filters">
        <div class="ui-group">
            <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="software">
                <li style="padding: 10px 15px;">
                    <label>開發類型:</label>
                </li>
                <li class="active">
                    <a class="button" data-filter="">any</a>
                </li>
                <li>
                    <a class="button" data-filter=".Dynamo">Dynamo</a>
                </li>
                <li>
                    <a class="button" data-filter=".Revit">Revit</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="filters">
        <div class="ui-group">
            <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="object">
                <li style="padding: 10px 15px;">
                    <label>物件:</label>
                </li>
                <li class="active">
                    <a class="button" data-filter="">any</a>
                </li>
                <filter-li v-for="item in objectFilter" v-bind:object="item"></filter-li>
            </ul>
        </div>
    </div>
    <div class="filters">
        <div class="ui-group">
            <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="usage">
                <li style="padding: 10px 15px;">
                    <label>功能:</label>
                </li>
                <li class="active">
                    <a class="button" data-filter="">any</a>                    
                </li>
                <filter-li v-for="item in usageFilter" v-bind:object="item"></filter-li>                   
            </ul>
        </div>
    </div>
    
</div>`,
});

vm.component('filter-li', {
    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
    props: {
        object: String,
    },
    computed: {
        addDot() {
            return "." + this.object;
        }
    },

});

vm.component('side-bar-list', {
    template: `<li v-bind:class = "GetLocation?'nav-active':''">
    <a v-bind:href="href">
        <i v-bind:class="fa" aria-hidden="true"></i><span>{{span}}</span>
    </a>
</li>`,
    computed: {
        GetLocation() {
            var pathname = window.location.pathname.split('/');
            var type = pathname[pathname.length - 1]
            if (this.href.includes(type)) {
                return true;
            } else {
                return false;
            }
        }
    },
    props: {
        span: String,
        fa: String,
        href: String,
    },
});

vm.component('role-block', {
    data() {
        return {
            roles: roles,
        }
    },
    props: {
        tbodyId: String,
        title: String,
        tableId: String,
    },
    template: `<section class="panel">
    <header class="panel-heading">
        <div class="panel-actions">
            <a href="#" class="fa fa-caret-down"></a>
            <a href="#" class="fa fa-times"></a>
        </div>
        <h2 class="panel-title">{{title}}</h2>
    </header>
    <div class="panel-body">
        <table class="table table-bordered table-striped mb-none" v-bind:id="tableId">
            <thead>
                <tr>
                    <th>員工編號</th>
                    <th>使用者帳號</th>
                    <th>使用者名稱</th>
                    <th>所屬部門</th>
                    <th>使用者權限</th>
                </tr>
            </thead>
            <tbody v-bind:id="tbodyId">

            </tbody>
        </table>
    </div>
</section>`,

});

