<template>
    <div class="settings-container">
        <div class="settings-header">
            <span :class="['settings-header-item',activeTab === '1' ?  'active-item' : '']" @click="onTabChange('1')">{{ $t('settings.setting_title1')}}</span>
			<span :class="['settings-header-item',activeTab === '0' ?  'active-item' : '']" @click="onTabChange('0')">{{ $t('settings.setting_title2')}}</span>
			<span :class="['settings-header-item',activeTab === '2' ?  'active-item' : '']" @click="onTabChange('2')">{{ $t('settings.setting_title3')}}</span>
        </div>

        <div class="settings-body">
            <div class="normal-settings animated fadeIn" v-if="activeTab === '0'">
                <div class="normal-settings-item">
                    <span class="item-title">{{ $t('settings.langSetting')}}</span>
                    <span class="item-description">{{ $t('settings.langTips')}}</span>
                    <span class="item-content">
                        <Select v-model="cloudSetting.curLang" style="width:200px" @on-change="onSelectLang">
                            <Option value="zh-cn">中文（简体）</Option>
                            <Option value="zh-tw">中文（繁體）</Option>
                            <Option value="en-us">English</Option>
                        </Select>
                        <Checkbox v-model="cloudSetting.isSystemLang" @on-change="onMenuStatusChange">{{ $t('settings.langCheck')}}</Checkbox>
                    </span>
                </div>
                <div class="normal-settings-item">
                    <span class="item-title">{{ $t('settings.themeSetting')}}</span>
                    <span class="item-description">{{ $t('settings.themeTips')}}</span>
                    <span class="item-content">
                        <span :class="['color-item',cloudSetting.curTheme === 'dark' ?  'color-item-active' : '']" @click="onTips('dark')"></span>
                        <span :class="['color-item',cloudSetting.curTheme === 'light' ?  'color-item-active' : '']" @click="onTips('light')"></span>
                    </span>
                </div>
                <div class="normal-settings-item">
                    <span class="item-title">{{ $t('settings.menuSetting')}}</span>
                    <span class="item-description">{{ $t('settings.menuTips')}}</span>
                    <span class="item-content">
                        <RadioGroup v-model="cloudSetting.menuStatus" @on-change="onMenuStatusChange">
                            <Radio label="open">{{ $t('settings.menuOpen')}}</Radio>
                            <Radio label="close">{{ $t('settings.menuClose')}}</Radio>
                        </RadioGroup>
                    </span>
                </div>
				<div class="normal-settings-item">
				    <span class="item-title">{{ $t('settings.logoSetting')}}</span>
				    <span class="item-description">{{ $t('settings.logoTips')}}</span>
				    <span class="item-content">
				        <RadioGroup v-model="cloudSetting.logoStatus" @on-change="onLogoStatusChange">
				            <Radio label="open">{{ $t('settings.logoOpen')}}</Radio>
				            <Radio label="close">{{ $t('settings.logoHide')}}</Radio>
				        </RadioGroup>
				    </span>
				</div>
                <div class="normal-settings-item">
                    <!-- <Button @click="saveSetting">保存变更</Button> -->
                </div>
            </div>
            <SchoolMgmt v-if="activeTab === '1'" class="animated fadeIn"></SchoolMgmt>
            <!-- <OpenMgmt v-if="activeTab === '2'" class="animated fadeIn"></OpenMgmt> -->
            <OpenMgmt2 v-if="activeTab === '2'" class="animated fadeIn"></OpenMgmt2>
        </div>
    </div>
</template>

<script>
    //import "@/css/less-variable.less"
    import SchoolMgmt from './SchoolMgmt.vue'
    import OpenMgmt from './OpenMgmt.vue'
    import OpenMgmt2 from './OpenMgmt2.vue';
    export default {
        components: {
            SchoolMgmt,
            OpenMgmt,
            OpenMgmt2
        },
        data() {
            return {
                activeTab: '1',
                activeTheme: '0',
                menuStatus: 'open',
                curLang: 'zh-cn',
                isHomeworkLang: true,
                cloudSetting: {
                    curLang: localStorage.getItem('local'),
                    curTheme: 'dark',
                    isSystemLang: true,
                    menuStatus: 'open',
					logoStatus: 'open'
                }
            }
        },
        created() {
            if (localStorage.getItem('cloudSetting')) {
                this.cloudSetting = JSON.parse(localStorage.getItem('cloudSetting'))
            }
        },
        methods: {
			
			onSelectLang(val){
				localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
				this.$store.commit("setLanguage", val);
			},
			
			onMenuStatusChange(val){
				localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
			},
			
			onLogoStatusChange(val){
				localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
				this.$EventBus.$emit('onLogoStatusChange',val)
			},

            /* 一般设置与学校管理切换 */
            onTabChange(index) {
                this.activeTab = index
            },

            /* 主题切换 */
            onThemeChange(index) {
                this.cloudSetting.curTheme = index
                //this.$less.modifyVars({  // 调用 `less.modifyVars` 方法来改变变量值'
                //    '@border-color': '#000',
                //    '@header-bg': 'white',
                //})
                //    .then(() => {
                //        console.log('修改成功');
                //    });
                localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
                if (index == 'dark') {
                    let url =  '/theme/dark-theme.css'
                    var link = document.getElementById('theme') ? document.getElementById('theme') : document.createElement('link');
                    if (document.getElementById('theme')) {
                        link.href = url;
                    } else {
                        var head = document.getElementsByTagName('head')[0];
                        link.type = 'text/css';
                        link.rel = 'stylesheet';
                        link.id = 'theme';
                        link.href = url;
                        head.appendChild(link);
                    }
                } else {
                    let url = '/theme/light-theme.css'
                    var link = document.getElementById('theme') ? document.getElementById('theme') : document.createElement('link');
                    if (document.getElementById('theme')) {
                        link.href = url;
                    } else {
                        var head = document.getElementsByTagName('head')[0];
                        link.type = 'text/css';
                        link.rel = 'stylesheet';
                        link.id = 'theme';
                        link.href = url;
                        head.appendChild(link);
                    }
                }
            },
			
			onTips(){
				this.$Message.warning('换肤功能即将上线')
			},

            /* 保存设置 */
            saveSetting() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '设置保存成功，刷新后即可生效，是否前往？',
                    onOk: () => {
                        localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
                        location.reload()
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "./Index.less";
</style>

<style lang="less">
    .settings-container {
        .ivu-select-selection

    {
        background: transparent;
        border-color: #363738;
        color: #a6a6a6;
    }

    .ivu-checkbox-wrapper {
        margin-left: 40px;
        margin-top: 5px;
        color: #a6a6a6;
    }

    .ivu-checkbox {
        margin-right: 5px;
    }

    .ivu-radio-wrapper {
        margin-right: 20px;
        color: #a5a5a5;
    }

    .ivu-radio-inner {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background-color: #0f0f0f;
        border-color: #4d4d4d;
        border-width: 1px;
        margin-right: 5px;
        &::after

    {
        content: '';
        display: block;
        width: 10px;
        height: 16px;
        border-right: #ffffff solid 3px;
        border-bottom: #ffffff solid 3px;
        transform: rotate(35deg);
        position: absolute;
        top: -4px;
        left: 4px;
        border-radius: 0;
        background-color: transparent;
        border-color: #0094FF;
    }

    }

    .ivu-checkbox-inner {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background-color: #0f0f0f;
        border-color: #4d4d4d;
        border-width: 1px;
        margin-right: 5px;
    }

    .ivu-checkbox-checked .ivu-checkbox-inner {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background-color: #0f0f0f;
        border-color: #4d4d4d;
        border-width: 1px;
        margin-right: 5px;
        &::after

    {
        content: '';
        display: block;
        width: 10px;
        height: 16px;
        border-right: #ffffff solid 3px;
        border-bottom: #ffffff solid 3px;
        transform: rotate(35deg);
        position: absolute;
        top: -4px;
        left: 4px;
        border-radius: 0;
        background-color: transparent;
        border-color: #0094FF;
    }

    }
    }
</style>
