<template>
<div class="drawer-right" :class="{'drawer-open': triggerDrawer}">
    <div class="drawer-mask" @click="handleDrawer"></div>
    <div class="drawer-content-wrapper">
        <div class="drawer-content">
            <div class="drawer-close" @click="handleDrawer">
                <i class="el-icon-close"></i>
            </div>
            <div class="drawer-body">
                <div class="mr-b24">
                    <h3 class="drawer-title">整体风格设置</h3>
                    <div class="drawer-blockcheck">
                        <el-tooltip class="item" effect="dark" content="暗色菜单风格" placement="top">
                            <div class="icon-box" @click="setting.navTheme = 'dark'">
                                <i class="el-icon-check"
                                    :style="{'color': setting.primaryColor}"
                                    v-if="setting.navTheme === 'dark'"></i>
                                <img src="./icon/style-left.svg" alt="dark">
                            </div>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="亮色菜单风格" placement="top">
                            <div class="icon-box" @click="setting.navTheme = 'light'">
                                <i class="el-icon-check"
                                    :style="{'color': setting.primaryColor}"
                                    v-if="setting.navTheme === 'light'"></i>
                                <img src="./icon/style-right.svg" alt="light">
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="mr-b24">
                    <h3 class="drawer-title">主题色</h3>
                    <div class="drawer-blockcheck">
                        <el-tooltip class="item" effect="dark"
                            v-for="(item, index) in primaryColor"
                            :style="{'background': '#' + item.color}"
                            :key="index"
                            :content="item.name"
                            placement="top">
                            <div class="primary-color"
                                @click="changePrimryColor(item.color)">
                                <i class="el-icon-check" v-if="setting.primaryColor === item.color"></i>
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="divider"></div>
                <div class="mr-b24">
                    <h3 class="drawer-title">导航模式</h3>
                    <div class="drawer-blockcheck">
                        <el-tooltip class="item" effect="dark" content="侧边栏菜单布局" placement="top">
                            <div class="icon-box" @click="setting.layout = 'sidemenu'">
                                <i class="el-icon-check"
                                    :style="{'color': setting.primaryColor}"
                                    v-if="setting.layout === 'sidemenu'"></i>
                                <img src="./icon/nav-left.svg" alt="leftmenu">
                            </div>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="顶部菜单布局" placement="top">
                            <div class="icon-box" @click="setting.layout = 'topmenu'">
                                <i class="el-icon-check"
                                    :style="{'color': setting.primaryColor}"
                                    v-if="setting.layout === 'topmenu'">
                                </i>
                                <img src="./icon/nav-right.svg" alt="topmenu">
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="setting-list">
                    <div class="list-item">
                        <div class="item-name">内容区域宽度</div>
                        <div class="item-action">
                            <el-select v-model="setting.fixedWidth" size="mini">
                                <el-option
                                    v-for="item in contentWidths"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-name">固定 Header</div>
                        <div class="item-action">
                            <el-switch
                                v-model="setting.fixedHeader"
                                inactive-color="#bfbfbf">
                            </el-switch>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-name">下滑时隐藏 Header</div>
                        <div class="item-action">
                            <el-switch
                                v-model="setting.autoHideHeader"
                                :disabled="!setting.fixedHeader"
                                inactive-color="#bfbfbf">
                            </el-switch>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-name">固定侧边菜单</div>
                        <div class="item-action">
                            <el-switch
                                v-model="setting.fixedSiderbar"
                                inactive-color="#bfbfbf">
                            </el-switch>
                        </div>
                    </div>
                </div>
                <div class="divider"></div>
            </div>
        </div>
        <div class="drawer-handle"
            :style="{'background': '#' + setting.primaryColor}"
            @click="handleDrawer">
            <i :class="'el-icon-' + (triggerDrawer ? 'close' : 'setting')"></i>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'drawer',
    data() {
        return {
            triggerDrawer: false,
            primaryColor: [
                {
                    color: 'f5222d',
                    name: '薄暮'
                }, {
                    color: 'fa541c',
                    name: '火山'
                }, {
                    color: 'faad14',
                    name: '日暮'
                }, {
                    color: '13c2c2',
                    name: '明青'
                }, {
                    color: '52c41a',
                    name: '极光绿'
                }, {
                    color: '1890ff',
                    name: '拂晓蓝（默认）'
                }, {
                    color: '2f54eb',
                    name: '极客蓝'
                }, {
                    color: '722ed1',
                    name: '酱紫'
                }
            ],
            contentWidths: [
                {name: '定宽', value: true},
                {name: '流式', value: false}
            ],
            setting: {
                navTheme: 'dark',
                primaryColor: '#1890FF',
                layout: 'sidemenu',
                fixedWidth: true,
                fixedHeader: true,
                fixedSiderbar: true,
                autoHideHeader: false
            }
        };
    },
    watch: {
        setting: {
            handler(obj) {
                if (!obj.fixedHeader) {
                    this.setting.autoHideHeader = false;
                }
                global.layoutSetting = obj;
            },
            deep: true
        }
    },
    methods: {
        changePrimryColor(color) {
            this.setting.primaryColor = color;
            let headerBox = document.head;
            let link = document.createElement('link');
            let lastDom = headerBox.lastChild;
            let url = 'http://xpage-layout.bj.bcebos.com/xpage-layout-setting/element-theme-' + color + '.css';
            if (lastDom.nodeName === 'LINK') {
                headerBox.removeChild(lastDom);
            }
            link.setAttribute('rel', 'stylesheet');
            link.setAttribute('type', 'text/css');
            link.setAttribute('href', url);
            headerBox.appendChild(link);
        },
        handleDrawer() {
            this.triggerDrawer = !this.triggerDrawer;
        }
    }
};
</script>
<style lang="less" src="./index.less">

</style>
