var bimSupport = "BIM資源網";
var pageHeader = "";
var list = new Array();
var objectFilter = [];
var usageFilter = [];
var listObj = new Object();
var table = [];
const vm = Vue.createApp({
    data() {
        return {
            banner: bimSupport,
            pageHeader: pageHeader,
            list: list,
            table: table,
        }
    }
});
vm.component('side-bar', {
    data() {
        return {
            banner: bimSupport,
        }
    },
    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>
                            <a href="home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
                        </li>
                        <li class="nav-parent">
                            <a>
                                <i class="fa fa-desktop" aria-hidden="true"></i>
                                <span>BIM監測查詢網</span>
                            </a>
                            <ul class="nav nav-children">
                                <li>
                                    <a href="#modalForm" class="modal-with-form"> <i class="fa fa-upload" aria-hidden="true"></i> <span>上傳CSV</span> </a>
                                    <!-- Modal Form -->
                                    <div id="modalForm" class="modal-block modal-block-primary mfp-hide">
                                        <section class="panel">
                                            <header class="panel-heading">
                                                <h2 class="panel-title">上傳表單</h2>
                                            </header>
                                            <div class="panel-body">
                                                <form id="CSVform" class="form-horizontal mb-lg" action="./script/php/upload.php" method="post" enctype="multipart/form-data">
                                                    <div class="form-group">
                                                        <label class="col-md-3 control-label">檔案上傳</label>
                                                        <div class="col-md-6">
                                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                                <div class="input-append">
                                                                    <div class="uneditable-input"> <i class="fa fa-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file">
                                                                        <span class="fileupload-exists">變更檔案</span> <span class="fileupload-new">選擇檔案</span>
                                                                        <input type="file" name="fileToUpload" id="fileToUpload" /> </span> <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <footer class="panel-footer">
                                                <div class="row">
                                                    <div class="col-md-12 text-right">
                                                        <button class="btn btn-primary modal-confirm" onclick="uploadCSV()">Submit</button>
                                                        <button class="btn btn-default modal-dismiss">Cancel</button>
                                                    </div>
                                                </div>
                                            </footer>
                                        </section>
                                    </div>
                                </li>
                                <li class="nav-parent">
                                    <a href="C3Index.php">C3工地監測儀器</a>
                                    <ul class="nav nav-children">
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-parent nav-active nav-expanded">
                            <a> <i class="fa fa-cloud" aria-hidden="true"></i> <span>{{banner}}</span> </a>
                            <ul class="nav nav-children">
                                <side-bar-list href="component-list.php" fa="fa fa-briefcase" span="BIM元件庫"></side-bar-list>
                                <side-bar-list href="api-list.php" fa="fa fa-gear" span="BIM程式庫"></side-bar-list>    
                                <side-bar-list href="video-list.php" fa="fa fa-video-camera" span="亞新教育訓練平台"></side-bar-list>
                                <side-bar-list href="other-list.php" fa="fa fa-tasks" span="BIM相關資源"></side-bar-list>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </aside>`
});

vm.component('header-menu', {
    data() {
        return {
            banner: bimSupport,
            userName: userName
        }
    },
    template: `<header class="header">
    <div class="logo-container">
        <div class="banner-txt">{{banner}}</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="/Common/assets/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="/Common/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}}</span> <span class="role">administrator</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="/Common/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('upload-component', {
    template: `<a class="modal-with-form btn btn-block btn-primary btn-md pt-sm pb-sm text-md" href="#modalForm2">
    <i class="fa fa-upload mr-xs"></i>
    上傳元件
</a>
<div id="modalForm2" class="modal-block modal-block-primary mfp-hide">
    <section class="panel form-wizard" id="w1">
        <header class="panel-heading">
            <h2 class="panel-title">上傳BIM元件</h2>
        </header>
        <div class="panel-body panel-body-nopadding">
            <div class="wizard-tabs">
                <ul class="wizard-steps">
                    <li class="active">
                        <a href="#w1-account" data-toggle="tab" class="text-center">
                            <span class="badge hidden-xs">1</span>
                            選擇檔案及類別
                        </a>
                    </li>
                    <li>
                        <a href="#w1-profile" data-toggle="tab" class="text-center">
                            <span class="badge hidden-xs">2</span>
                            填寫詳細資料
                        </a>
                    </li>
                </ul>
            </div>
            <form class="form-horizontal" novalidate="novalidate">
                <div class="tab-content">
                    <div id="w1-account" class="tab-pane active">
                        <div class="form-group">
                            <label class="col-md-1 control-label">rfa上傳</label>
                            <div class="col-md-6">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="input-append">
                                        <div class="uneditable-input">
                                            <i class="fa fa-file fileupload-exists"></i>
                                            <span class="fileupload-preview"></span>
                                        </div>
                                        <span class="btn btn-default btn-file">
                                            <span class="fileupload-exists">變更檔案</span>
                                            <span class="fileupload-new">選擇檔案</span>
                                            <input type="file" />
                                        </span>
                                        <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">glb上傳</label>
                            <div class="col-md-6">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="input-append">
                                        <div class="uneditable-input">
                                            <i class="fa fa-file fileupload-exists"></i>
                                            <span class="fileupload-preview"></span>
                                        </div>
                                        <span class="btn btn-default btn-file">
                                            <span class="fileupload-exists">變更檔案</span>
                                            <span class="fileupload-new">選擇檔案</span>
                                            <input type="file" />
                                        </span>
                                        <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">設備類別</label>
                            <div class="col-sm-3">
                                <select class="form-control mb-md" id="typeSelect">
                                    <option value="">請選擇設備類別</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="w1-profile" class="tab-pane">
                        <div class="form-group">
                            尚未選擇設備類別
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <ul class="pager">
                <li class="previous disabled">
                    <a><i class="fa fa-angle-left"></i> 上一步</a>
                </li>
                <li class="finish hidden pull-right modal-confirm">
                    <a>完成送出</a>
                </li>
                <li class="next">
                    <a>下一步 <i class="fa fa-angle-right"></i></a>
                </li>
            </ul>
        </div>
    </section>
</div>`,
});

vm.component('equipment-list', {
    data() {
        return {
            jsonData: jsonData,
            userName: userName,
            url: "component-favorite.php?userName=" + userName,
        }
    },
    template: `
    <div class="sidebar-widget m-none">
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">類別</h6>                    
    </div>
    <div class="widget-content">
        <nav id="menu" class="nav-main" role="navigation">
            <ul class="nav nav-main">
                <special-li v-for="item in jsonData" v-bind:name="item.category_name" v-bind:children="item.children" v-bind:parent="item.category_code"></special-li>     
                <hr class="separator" />
                <li>
                    <a v-bind:href="url" class="menu-item"><i class="fa fa-gears"></i>清單列表</a>
                </li>
            </ul>
        </nav>
        

    </div>
</div>`,

});

vm.component('special-li', {
    template: `
    <li class="nav-parent">
        <a class="dropdown-btn" v-bind:href="hrefLink(parent)" v-bind:name="parent">{{name}}</a>
        <ul class="nav nav-children" style="background: inherit; padding-left: 15px;">
            <special-li2 v-for="item in children" v-bind:href="item.component_code" v-bind:name="item.component_name" v-bind:parent="parent"></special-li2>
        </ul>
    </li>
    `,

    props: {
        name: String,
        children: Array,
        parent: String
    },
    methods: {
        hrefLink(parent) {
            return 'component-list.php?parent=' + parent;
        }
    }
});

vm.component('special-li2', {
    template: `
    <li>
        <a v-bind:href="hrefLink(href, parent)" class="menu-item" v-bind:name="parent">{{name}}</a>
    </li>
    `,
    props: {
        href: String,
        name: String,
        parent: String
    },
    methods: {
        hrefLink(code, parent) {
            return 'component-list.php?type=' + code + '&parent=' + parent;
        }
    }
});

vm.component('api-list', {
    data() {
        return {
            jsonData: jsonData,
            userName: userName,
            url: "component-favorite.php?userName=" + userName,
        }
    },
    template: `<div class="sidebar-widget m-none">
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">適用性</h6>                    
    </div>
    <div class="widget-content">
        <ul class="mg-folders">
            <inner-menu-li href="api-list.php?type=土建" name="土建"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=土開" name="土開"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=軌道" name="軌道"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=機電" name="機電"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=資訊" name="資訊"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=通用" name="通用"></inner-menu-li>
        </ul>
    </div>
    <hr class="separator" />
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">專案</h6>                    
    </div>
    <div class="widget-content">
        <ul class="mg-folders">
            <inner-menu-li href="api-list.php?type=專案（果林地下汙水管線建置系統）" name="菓林地下汙水管線建置系統"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=專案（CF管線點位調查）" name="CF管線點位調查"></inner-menu-li>                                       
        </ul>
    </div>
    <hr class="separator" />
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">其他</h6>                    
    </div>
    <div class="widget-content">
        <ul class="mg-folders">
            <inner-menu-li href="api-list.php" name="所有程式清單"></inner-menu-li>
            <inner-menu-li href="api-list.php?type=未分類" name="未分類"></inner-menu-li>                                        
        </ul>
    </div>
</div>`,
});

vm.component('other-list', {
    data() {
        return {
            jsonData: jsonData,
            userName: userName,
            url: "component-favorite.php?userName=" + userName,
        }
    },
    template: `<div class="sidebar-widget m-none">
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">類別</h6>                    
    </div>
    <div class="widget-content">
        <ul class="mg-folders">
            <inner-menu-li href="other-list.php?type=收費建議" name="收費建議"></inner-menu-li>
            <inner-menu-li href="other-list.php?type=契約需求範例" name="契約需求範例"></inner-menu-li>
            <inner-menu-li href="other-list.php?type=驗收標準" name="驗收標準"></inner-menu-li>
            <inner-menu-li href="other-list.php?type=BIM專案管理" name="BIM專案管理"></inner-menu-li>
            <inner-menu-li href="other-list.php?type=樣板" name="樣板"></inner-menu-li>
            <inner-menu-li href="other-list.php?type=其他" name="其他"></inner-menu-li>
        </ul>
    </div>
    <hr class="separator" />
</div>`,
});

vm.component('isotope-item', {
    data() {
        return {
            list: list,
            filClass: "isotope-item col-sm-6 col-md-4 col-lg-3 ",
        }
    },
    props: {
        name: String,
        folder: String,
        id: Number,
        object: String,
        usage: String,
        software: String,
        detail: String,
        source: String,
        operate: String,
        viewTimes: Number,
        downloadTimes: Number,
    },
    computed: {
        addClass() {
            return this.filClass + " " + this.object + " " + this.usage + " " + this.software;
        }
    },
    methods: {
        bindHref(software, name, folder) {
            return 'assets/API/Universal/' + software + '/' + folder + '/' + name + '.png';
        },
        hrefLink(id) {
            return 'api-detail.php?object=' + id;
        }
    },
    template: `<div  v-bind:class="addClass">
    <div class="thumbnail">

        <a class="name" v-bind:href="hrefLink(id)">{{name}}</a>
        <div class="mg-description"><small style="display:none;">{{detail}}</small><small class="operate" style="display:none;">{{operate}}</small><small class="source" style="display:none;">{{source}}</small><small class="pull-right text-muted software" >{{software}}</small></div>
        <div class="thumb-preview">
            <div class="thumb-image"></div>
            <div><img v-bind:href="bindHref(software,name,folder)" v-bind:src="bindHref(software,name,folder)" class="img-responsive" alt="Project" onerror="this.src='assets/images/not-found-image.jpg'" style="transform: scale(1);"></div>
            
        </div>
        <p class="viewTimes" hidden>{{viewTimes}}</p>
        <p class="downloadTimes" hidden>{{downloadTimes}}</p>
    </div>
</div>`,
});