<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" sizes="48x48" href="/assets/img/logo-icon.svg">
    <title></title>
    <script src="/assets/plugins/jquery/jquery-2.2.4.min.js"></script>

    <link href="/assets/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/plugins/font-awesome/css/pro.min.css" rel="stylesheet" />
    <link href="/assets/plugins/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/plugins/jquery-ui-dist/jquery-ui.css" rel="stylesheet" />
    <link href="/assets/css/custom.css?tf=202502201235" rel="stylesheet" />
    <script src="/assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>

    <link href="/assets/plugins/fancybox-3.0/dist/jquery.fancybox.css" rel="stylesheet" />
    <script src="/assets/plugins/fancybox-3.0/dist/jquery.fancybox.js"></script>
    <script src="/assets/plugins/fancybox-3.0/init.js?tf=202412251811"></script>

    <script src="/assets/plugins/sweetalert2-7.25.0/sweetalert2.min.js"></script>
    <link href="/assets/plugins/sweetalert2-7.25.0/sweetalert2.css" rel="stylesheet" />

    <!-- vue2-datepicker css -->
    <link rel="stylesheet" href="/assets/plugins/vue2-datepicker/index.css">

    <!--vue2-datepicker js-->
    <script src="/assets/plugins/vue2-datepicker/index.js"></script>
    <script src="/assets/plugins/vue2-datepicker/moment.min.js"></script>

    <script src="/js/util/tool.js"></script>
    <script src="/js/uw/StorageUtil.js"></script>
    <script src="/js/adminUtil.js?tf=202412261253"></script>

    <!--Header-->
</head>
<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            <div class="col-md-3 left_col" id="leftMenu">
                <div class="left_col scroll-view">
                    <div class="left_col scroll-view menucontent">
                        <div class="navbar nav_title">
                            <a href="/" class="site_title">
                                <span v-html="systemName"></span>
                                <div>後台管理系統</div>
                            </a>
                        </div>
                        <div class="clearfix"></div>

                        <!-- menu profile quick info -->
                        <div class="profile clearfix">
                            <div class="profile_pic">
                                <img class="img-circle profile_img" src="/assets/img/user.png" />
                            </div>
                            <div class="profile_info">
                                <span v-if="memberObj.marketId > 0">{{memberObj.marketName}}</span>
                                <span v-else>Hi, </span>
                                <h2>{{memberObj.name}}</h2>
                            </div>
                        </div>
                        <!-- /menu profile quick info -->
                        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                            <div id="menuContent" style="" class="menu_section">
                                <tree-item v-for="item in menuList" :key="item.id" :item="item"></tree-item>
                            </div>
                        </div>

                        <!-- /menu footer buttons -->
                        <div class="sidebar-footer hidden-small">
                            <a data-toggle="tooltip" data-placement="top" title="變更密碼" href="/member/changePW" class="hlkChangePWD">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" title="登出" @click="Logout()" class="hlkLogout">
                                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                            </a>
                        </div>
                        <!-- /menu footer buttons -->
                    </div>
                </div>
            </div>

            <!-- top navigation -->
            <div class="top_nav" id="topHeader">
                <div class="nav_menu">
                    <nav>
                        <div class="nav toggle">
                            <a id="menu_toggle" @click="menuToggle();"><i class="fa fa-bars"></i></a>
                        </div>
                        <div class="nav toggle logout">
                            <a class="changepwd" href="/member/changePW"><i class="fas fa-pencil-alt fa-sm"></i></a>
                            <a id="logout" @click="Logout()"><i class="fas fa-sign-out-alt"></i></a>
                        </div>
                    </nav>
                </div>
            </div>
            <!-- /top navigation -->
            <!-- page content -->
            <div valign="top" class="right_col" role="main">
                <div id="dvMain">
                    <div class="page-title clearfix">
                        <div class="title_left">
                            <h3>{{pageTitle}}</h3>
                        </div>
                        <div class="titlebar">
                            <!--ContentTitleRight-->
                        </div>
                        <div class="title_right">
                            <h4 v-show="isSystemManager && authDesc != ''">Auth: {{authDesc}}</h4>
                        </div>
                    </div>
                    <div class="x_panel" style="margin-bottom: 80px;">
                        <div class="x_content">
                            <!--Content-->
                        </div>
                    </div>
                    <div class="loading" v-if="isLoading == true"><div>資料處理中 <img src="/assets/img/ajax-loader.gif" width="16" /></div></div>
                </div>
                <!-- /page content -->
            </div>
        </div>
    </div>

    <!--左側選單-->
    <template id="tmpTree">
        <ul v-if="item.parentFolder == 0 && item.type == 'folder' && item.children.length > 0" class="nav side-menu">
            <li :class="{active: isOpen}" @click.stop="toggle">
                <a>{{item.name}}<span class="fas fa-chevron-down"></span></a>
                <ul class="nav child_menu" :style="isOpen ? 'display: block':'display: none'">
                    <tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
                </ul>
            </li>
        </ul>

        <li v-else-if="item.parentFolder > 0 && item.type == 'folder' && item.children.length > 0" @click.stop="toggle">
            <a>{{item.name}}<span class="fas fa-chevron-down"></span></a>
            <ul class="nav child_menu" :style="isOpen ? 'display: block':'display: none'">
                <tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
            </ul>
        </li>

        <li v-else-if="item.type == 'function'" class="function" :class="{'current-page': item.isCurrentPage}">
            <a :href="item.link" :target="item.target"
               :class="{'inquiry': item.link == '/order/inquirylist',
                        'order': item.link == '/order/orderlist',
                        'packing': item.link == '/order/shiplist',
                        'recycle': item.link == '/order/recyclelist',
                        'oemPendings': item.link == '/oem/stock/confirm'}">
                {{item.name}}
                <span class="badge bg-red"></span><span class="badge bg-green"></span><span class="badge bg-orange"></span>
                <span v-if="item.link == '/order/shiplist' || item.link == '/oem/order/shiplist'" class="packingapply badge bg-red"></span>
                <span v-if="item.link == '/order/recyclelist' || item.link == '/oem/order/recyclelist'" class="recycleapply badge bg-red"></span>
            </a>
        </li>
    </template>

    <!-- Bootstrap -->
    <script src="/assets/plugins/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="/assets/third-party/01_vue.min.js"></script>
    <script>Vue.config.devtools = false;</script>
    <script>Vue.config.productionTip = false;</script>

    <!--FinalScript-->
    <script>
        Vue.component('tree-item', {
            template: '#tmpTree',
            props: {
                item: Object
            },
            data: function () {
                return {
                    isOpen: false
                };
            },
            created: function () {
                var v = this;

                var isCurrentPage = false;
                if (v.item.isOpen) {
                    isCurrentPage = true;
                } else {
                    if (v.item.children.length > 0) {
                        v.item.children.forEach(function (oChild) {
                            oChild.isCurrentPage = false;
                            if (oChild.link != null && oChild.link.toLowerCase() == window.location.pathname.toLowerCase()) {
                                isCurrentPage = true;
                                oChild.isCurrentPage = true;
                            }
                        });
                    } else {
                        v.item.isCurrentPage = false;
                        if (v.item.link != null && v.item.link.toLowerCase() == window.location.pathname.toLowerCase()) {
                            isCurrentPage = true;
                            v.item.isCurrentPage = true;
                        }
                    }
                }
                v.isOpen = isCurrentPage;

            },
            methods: {
                toggle: function () {
                    this.isOpen = !this.isOpen;
                }
            }
        });
    </script>

    <script src="/master.js?tf=202404101831" type="module"></script>
</body>
</html>
