<template>
    <div>
        <el-select style="width:120px" size="small"
            v-model="themeType"
            :placeholder="
                $t('message.lifter.pleaseSelect')
            " @change="changeTheme"
            >
            <el-option
            v-for="(item, index) in themeArr"
            :key="index"
            :label="'主题：'+item.name"
            :value="item.type"
            >
            </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    data(){
        return{
            themeArr:[
                {name:'白色',type:'white'},
                {name:'深色',type:'grey'}
            ],
            themeType:'white'
        }
    },
    mounted(){
        this.themeType = this.$store.state.themeType
    },
    methods:{
        changeTheme(){
            console.log(this.themeType)
            document.getElementsByTagName('html')[0].className = 'theme-'+this.themeType;
            
            this.$store.commit('setThemeType', this.themeType)
            if(this.themeType=='white'){
                this.$store.commit('setChartOptions', {labelColor:'rgba(38, 45, 72, 0.8)'})
            }else{
                this.$store.commit('setChartOptions', {labelColor:'rgba(255, 255, 255, 0.8)'})
            }
        },
    }
}
</script>