<style lang="less">
  @import './index.less';
</style>

<template>
    <div class="layout">
        <Layout style="height: 100%;">
            <Sider ref="side1" :width="256" hide-trigger collapsible :collapsed-width="100" v-model="isCollapsed" style="background-color: #f3f3f3;">
                <div style="height: 64px;padding: 10px;">
                    sdfsdf
                </div>
                <Menu active-name="0"  width="auto" :class="menuitemClasses">
                    <MenuItem name="0">
                        <Icon type="md-home"></Icon>
                        <span>首頁</span>
                    </MenuItem>
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="md-school" />
                            <span>智慧校園管理</span>
                        </template>
                        <MenuItem name="1-1">
                            <Icon type="ios-paper" />
                            <span>智慧校園管理</span>
                        </MenuItem>
                        <MenuItem name="1-2">
                            <Icon type="ios-paper" />
                            <span>學生帳號管理</span>
                        </MenuItem>
                        <MenuItem name="1-3">
                            <Icon type="ios-paper" />
                            <span>教師帳號管理</span>
                        </MenuItem>
                        <MenuItem name="1-4">
                            <Icon type="ios-paper" />
                            <span>班級管理</span>
                        </MenuItem>
                        <MenuItem name="1-5">
                            <Icon type="ios-paper" />
                            <span>軟體暨授權項目管理</span>
                        </MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-book-outline" />
                            <span>教材內容管理</span>
                        </template>
                        <MenuItem name="2-1">
                            <Icon type="ios-paper" />
                            <span>校本課綱總攬</span>
                        </MenuItem>
                        <MenuItem name="2-2">
                            <Icon type="ios-paper" />
                            <span>校本課綱管理</span>
                        </MenuItem>
                        <MenuItem name="2-3">
                            <Icon type="ios-paper" />
                            <span>知識點管理</span>
                        </MenuItem>
                        <MenuItem name="2-4">
                            <Icon type="ios-paper" />
                            <span>內容管理</span>
                        </MenuItem>
                        <MenuItem name="2-5">
                            <Icon type="ios-paper" />
                            <span>題目/庫管理</span>
                        </MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="md-calendar" />
                            <span>學習活動服務</span>
                        </template>
                        <MenuItem name="3-1">
                            <Icon type="ios-paper" />
                            <span>活動行事曆</span>
                        </MenuItem>
                        <MenuItem name="3-2">
                            <Icon type="ios-paper" />
                            <span>學習活動儀錶板</span>
                        </MenuItem>
                        <MenuItem name="3-3">
                            <Icon type="ios-paper" />
                            <span>測驗與作業總攬</span>
                        </MenuItem>
                        <MenuItem name="3-4">
                            <Icon type="ios-paper" />
                            <span>自主學習活動總攬</span>
                        </MenuItem>
                    </Submenu>
                    <Submenu name="4">
                        <template slot="title">
                            <Icon type="ios-book-outline" />
                            <span>班級智慧服務</span>
                        </template>
                        <MenuItem name="4-1">
                            <Icon type="ios-paper" />
                            <span>區班校活動紀錄簿</span>
                        </MenuItem>
                        <MenuItem name="4-2">
                            <Icon type="ios-paper" />
                            <span>全校成績總攬</span>
                        </MenuItem>
                        <MenuItem name="4-3">
                            <Icon type="ios-paper" />
                            <span>操行成績總攬</span>
                        </MenuItem>
                        <MenuItem name="4-4">
                            <Icon type="ios-paper" />
                            <span>學積分析儀表</span>
                        </MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout>
                <Header :style="{padding: 0}" class="layout-header-bar">
                    <div class="flexBox">
                        <div class="item flex-grow-2">
                            <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
                            <h2 style="font-size: 1.6em;color:#d0b772;display: inline-block;vertical-align: middle;">醍摩豆智慧雲平台雲平台雲平台</h2>
                        </div>
                        <div class="item flex-grow-1 right">
                            <div class="userControl">
                                <Dropdown trigger="click" placement="bottom-end">
                                    <a style="display: inline-block;vertical-align: middle;height: 35px;" href="javascript:void(0)">
                                        <img style="width: 35px;cursor: pointer;" src="@/assets/image/touxiang.png">
                                    </a>
                                    <DropdownMenu slot="list" style="width: 350px;">
                                        <DropdownItem disabled style="color: #515a6e;cursor: pointer;display:flex;align-items: center;">
                                            <img style="width: 50px;margin-right: 16px;border-radius: 50%;" src="@/assets/image/touxiang.png">
                                            <div style="text-align:left;">
                                                <h3>Osbert#1234</h3>
                                                <h3>Osbert@habook.com.tw</h3>
                                            </div>
                                        </DropdownItem>
                                        <DropdownItem class="scrollstyle joinedSchool">
                                            <div class="jSchool" v-for="(item, key) in userInfo.joinSchool" :key="key">
                                                <div class="box">
                                                    <img :src="item.avatar">
                                                    <div class="detail">
                                                        <h4>{{item.name}}</h4>
                                                        <small>{{item.shortCode}}</small>
                                                    </div>
                                                </div>                                                
                                            </div>                                                
                                        </DropdownItem>
                                        <DropdownItem disabled divided style="color: #515a6e;cursor: pointer;text-align: left;margin-top: 0;">
                                            <Icon size="15" :type="switch1 ? 'ios-moon-outline' : 'ios-sunny'" style="margin-right: 15px;" />深色主題
                                            <i-switch v-model="switch1" @on-change="themeChange" style="margin-left: 10px;float:right;"></i-switch>
                                        </DropdownItem>
                                        <DropdownItem divided style="text-align: left;"><Icon size="15" type="md-settings" style="margin-right: 15px;" />選項</DropdownItem>
                                        <DropdownItem divided style="text-align: left;"><Icon size="15" type="md-log-out" style="margin-right: 15px;" />登出</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>                            
                        </div>
                    </div>                                        
                </Header>
                <Content :style="{background: '#fff', minHeight: '260px'}">
                    <router-view/>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapsed: false,
            value2: false,
            switch1: false,
            collapse1: '0'
        }
    },
    computed: {
        userInfo() { return this.$access.getExtendInfo('userInfo');},
        rotateIcon() {
            return [
                'menu-icon',
                this.isCollapsed ? 'rotate-icon' : ''
            ]
        },
        menuitemClasses() {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    created() {
    },
    methods: {
        themeChange(status) {
            if (status) {
                let x = document.getElementsByTagName('html')[0] // 抓取html TAG
                x.setAttribute('white', true) // 設定新屬性 並給值
            } else {
                let x = document.getElementsByTagName('html')[0] // 抓取html TAG
                x.removeAttribute('white') // 刪除屬性
            }
        },
        collapsedSider() {
            this.$refs.side1.toggleCollapse()
        }
    },
    mounted() {

    }
}

</script>
