<div id="index" v-cloak>
    <div id="loadingBar" v-if="barPercent > 0">
        <el-progress
                :percentage="barPercent"
                :stroke-width="2"
                :show-text="false"
                :status="barStatus"
                stroke-linecap="round"></el-progress>
    </div>
    <p v-if="active == 'dev'" id="devMarker" marker-value="DEV"></p>

    <div id="aside" :style="{width:(prop.coll?'64px':'200px')}">
        <el-menu
                @select="handleSelect"
                :default-active="prop.menu"
                :unique-opened="prop.open"
                :collapse="prop.coll"
                :collapse-transition="prop.tran">
            <#if token.hasRes("ADMIN")>
            <el-submenu index="37730a50-4f13-4835-bf3f-65af82ca2d98">
                <template slot="title">
                    <i class="el-icon-document-copy"></i>
                    <span slot="title">配置模块</span>
                </template>
                <#if token.hasRes("ADMIN_SERVICES")>
                <el-menu-item index="56799af2-df08-44fa-a97c-faccc0963dd9" @click="addTab({title: '虚拟主机', name: 'SERVICES', url: '${context}/admin/services.htm'})">虚拟主机</el-menu-item>
                </#if>
                <#if token.hasRes("ADMIN_LOCATIONS")>
                <el-menu-item index="03bcbb6e-7a2a-430e-998c-ce512c52b506" @click="addTab({title: '路径配置', name: 'LOCATIONS', url: '${context}/admin/locations.htm'})">路径配置</el-menu-item>
                </#if>
                <#if token.hasRes("ADMIN_CONFIG")>
                <el-menu-item index="60701dea-1083-4a85-b83f-77ea1c099577" @click="addTab({title: '配置预设', name: 'CONFIG', url: '${context}/admin/config.htm'})">配置预设</el-menu-item>
                </#if>
            </el-submenu>
            </#if>
        </el-menu>
    </div>

    <div id="main" :style="{marginLeft:(prop.coll?'64px':'200px')}">
        <div id="head">
            <div class="collapseSwitch" @click="collapseSwitch">
                <a :class="prop.coll?'reversal':''"><i class="el-icon-s-fold"></i></a>
            </div>

            <el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>

            <div class="menu">
                <ul>
                    <li>
                        <el-dropdown size="mini">
                            <el-link :underline="false" @click="onHome" icon="el-icon-user">${token.userAlias}</el-link>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="onLogout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li>
                        <el-dropdown size="mini">
                            <el-link :underline="false" @click="onHome" icon="el-icon-warning-outline">关于</el-link>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="addTab({title: '开发指导', name: 'helpDev', url: context + '/helpDev.htm'})">开发指导</el-dropdown-item>
                                <el-dropdown-item @click.native="addTab({title: '使用指导', name: 'help', url: context + '/help.htm'})">使用指导</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                    <li>
                        <el-link :underline="false" icon="el-icon-full-screen" @click="switchFullScreen">全屏</el-link>
                    </li>
                    <li>
                        <el-link :underline="false" icon="el-icon-switch-button" @click="onLogout"></el-link>
                    </li>
                </ul>
            </div>
        </div>
        <div id="content">
            <el-tabs v-model="prop.tabName" type="border-card" closable @tab-remove="removeTab">
                <el-tab-pane
                        v-for="(item, index) in tabs"
                        :lazy="true"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name">
                    <iframe :src="item.url" style="width: 100%;height: 100%;border: 0;"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <el-dialog
            title="密码修改"
            width="350px"
            :visible.sync="form.formShow">
        <el-form class="form" :model="form" :rules="formRules" ref="form" label-position="right" label-width="90px">
            <el-form-item label="当前密码" prop="password" size="mini">
                <el-input v-model="form.password" type="password" clearable size="mini" placeholder="请输入当前密码"></el-input>
            </el-form-item>
            <el-form-item label="新设密码" prop="newPassword" size="mini">
                <el-input v-model="form.newPassword" type="password"  clearable size="mini" placeholder="请输入新设密码"></el-input>
            </el-form-item>
            <el-form-item label="密码确认" prop="newPassword_" size="mini">
                <el-input v-model="form.newPassword_" type="password"  clearable size="mini" placeholder="请输入密码确认"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="form.formShow = false">取 消</el-button>
			<el-button size="mini" type="primary" @click="onChangePwd">确 认</el-button>
		</span>
    </el-dialog>
</div>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body, #index {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    a:active, a:hover {
        opacity: 0.7;
        outline: 0;
        text-decoration: none
        cursor: pointer;
    }

    #loadingBar {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
    }

    #loadingBar div[role=progressbar] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }

    #loadingBar div[role=progressbar] .el-progress-bar__outer{
        background-color: transparent;
    }

    #devMarker{
        position: absolute;
        bottom: 50px;
        right: 50px;
    }

    #devMarker:after{
        pointer-events:none;
        content: attr(marker-value);
        font-size: 100px;
        color: rgba(188, 188, 188, 0.5);
        z-index: 9999;
        display: block;
        position: relative;
        text-align: center;
        line-height: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #aside {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transition: all .5s;
        background: #252a2f;
    }

    #aside ul[role=menubar] {
        border-right: solid 0 #e6e6e6;
    }

    #main {
        height: 100%;
        margin-left: 200px;
        transition: all .5s;
    }

    #head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        background: #252a2f;
    }

    #head .collapseSwitch {
        display: inline-block;
        height: 40px;
        width: 40px;
        text-align: center;
        font-size: 24px;
        border-left: 1px solid #424242;
        border-right: 1px solid #424242;
    }

    #head .collapseSwitch a {
        display: inline-block;
        transition: all .5s;
    }

    #head .collapseSwitch a.reversal {
        transform: rotate(-180deg);
    }

    #head a {
        color: #d6d6d6;
        vertical-align: top;
        transition: all .3s;
    }

    #head a:hover {
        color: #409EFF;
        opacity: 1;
    }

    #head .collapseSwitch:hover {
        background: #3b4146;
    }

    #head .menu {
        display: inline-block;
        float: right;
    }

    #head .menu ul {
        display: inline-block;
    }

    #head .menu ul li {
        display: inline-block;
        height: 100%;
        margin: 0 6px;
        vertical-align: top;
    }

    #head .menu ul li > * {
        height: 20px;
        vertical-align: middle;
        line-height: 20px;
    }

    #content,#content .el-tabs__content  {
        padding: 0;
        height: calc(100% - 40px);
    }

    #content > div,#content .el-tab-pane  {
        padding: 0;
        border: 0;
        height: 100%;
    }

    #content div[role=tab]{
        padding: 0 10px;
    }
</style>
<script>
    window.index = new Vue({
        el: "#index",
        data: {
            context: '${context?default("")}',//上下文
            active: '${active}',//环境
            tabs: [],//所有Tabs
            prop: {
                menu: '',
                tabName: '',
                open: <#if prop.open>true<#else>false</#if>,
                coll: <#if prop.coll>true<#else>false</#if>,
                tran: <#if prop.tran>true<#else>false</#if>,
                full: <#if prop.full>true<#else>false</#if>
            },
            barStatus:null,
            barPercent: 0,
            barInterval: null,
            form:{
                formShow:false,
                password:'',
                newPassword:'',
                newPassword_:''
            },
            formRules: {
                password: [
                    {required: true, message: '请输入当前登录密码', trigger: 'blur'},
                ],
                newPassword: [
                    {required: true, message: '请输入新登录密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '新登录密码长度需在 6 到 20 个字符', trigger: 'blur'}
                ],
                newPassword_: [
                    {required: true, message: '密码确认不能为空', trigger: 'blur'},
                    { validator: function (rule, value, callback) {
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== index.form.newPassword) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur' }
                ]
            },
            resultUnRead:[]
        },
        methods: {
            onHome: function () {
                this.addTab({
                    title: '首页',
                    name: 'home',
                    url: this.context + '/home.htm'
                })
            },
            barStart: function () {
                clearInterval(this.barInterval);
                this.barPercent = 10;
                this.barInterval = setInterval(function () {
                    this.barPercent = this.barPercent + (90 - this.barPercent) * 0.01;
                }.bind(this), 100)
            },
            barFinish: function () {
                clearInterval(this.barInterval);
                this.barPercent = 100;
                setTimeout(function () {
                    this.barPercent = 0;
                }.bind(this), 1000);
            },
            barError: function () {
                clearInterval(this.barInterval);
                this.barPercent = 100;
                this.barStatus = 'exception'
                setTimeout(function () {
                    this.barPercent = 0;
                    this.barStatus = null;
                }.bind(this), 1000);
            },
            collapseSwitch: function () {
                this.prop.coll = !this.prop.coll;
                this.onSaveState();
            },
            handleSelect: function (index) {
                this.prop.menu = index;
            },
            addTab: function (tab) {
                //查找是否存在该tab
                var tempTabs = this.tabs.filter(function (tab_) {
                    return tab_.name === tab.name;
                })
                //不存在则添加
                if (tempTabs.length <= 0) {
                    this.tabs.push(tab)
                }
                this.prop.tabName = tab.name;
                this.onSaveState();
            },
            removeTab: function (tabName) {
                var activeName = this.prop.tabName;
                var tempTabs = this.tabs;
                if (activeName === tabName) {
                    tempTabs.forEach(function (tab, index) {
                        if (tab.name === tabName) {
                            var nextTab = tempTabs[index + 1] || tempTabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.prop.tabName = activeName;
                this.tabs = tempTabs.filter(function (tab) {
                    return tab.name !== tabName
                })
            },
            onChangePwd:function () {
                this.$refs['form'].validate(function (valid) {
                    if (valid) {
                        new Ajax("wadmin", "user", "changePwd").post(this.form, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                this.onLogoutForChangePwd();
                            }
                        }.bind(this));
                    }
                }.bind(this))
            },
            onLogout: function() {
                nav.boxYesNo("退出提示", "是否退出当前登录账户?" ,function (result) {
                    if (result){
                        new Ajax("wframe", "auth", "logout").post({}, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                nav.clearCookie("token");
                                $w.openUrl("/login.htm", true);
                            }
                        }.bind(this));
                    }
                }.bind(this))
            },
            onLogoutForChangePwd: function () {
                nav.boxYes("退出提示", "密码修改成功立即重新登录?" ,function (result) {
                    new Ajax("wadmin", "user").method("logout").post({}, function (response) {
                        if (response.errors.length > 0) {
                            nav.e(response.errors[0].message);
                        } else {
                            nav.clearCookie("token");
                            $w.openUrl("/login.htm", true);
                        }
                    }.bind(this));
                }.bind(this))
            },
            switchFullScreen:function(){
                this.prop.full = !this.prop.full;
                if (this.prop.full) {
                    nav.screenFull()
                } else {
                    nav.screenNotFull()
                }
                this.onSaveState();
            },
            onSaveState: function () {
                $.putSessionStorage("prop", JSON.stringify(this.prop));
                $.putSessionStorage("tabs", JSON.stringify(this.tabs));
            },
            refreshMsg: function () {
            }
        },
        created: function () {
        },
        activated: function () {
        },
        mounted: function () {
            var prop = $.getSessionStorage("prop");
            if (prop) {
                this.prop = JSON.parse(prop);
            }

            var tabs = $.getSessionStorage("tabs");
            if (tabs) {
                this.tabs = JSON.parse(tabs);
            }else {
                this.onHome();
                // 开发模式，默认打开指导页
                if (this.active ===  'dev') {
                    this.addTab({
                        title: '开发指导',
                        name: 'helpDev',
                        url: this.context + '/helpDev.htm'
                    })
                }
            }

            if (this.prop.full) {
                nav.screenFull();
            } else {
                nav.screenNotFull();
            }

            // 获取系统消息
            this.$nextTick(function () {
                this.refreshMsg();
            }.bind(this));
        },
        watch: {
            "prop.tabName":function () {
                this.onSaveState();
            }
        }
    })
</script>