<template>
    <el-dropdown class="header-popper">
        <span class="el-dropdown-link">
            <svg slot="reference" class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-guojihua"></use>
            </svg>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
                v-if="$i18n.locale != 'zh-CN'"
                @click="handleSetLanguage('zh-CN')"
                >简体中文</el-dropdown-item
            >
            <el-dropdown-item
                v-if="$i18n.locale != 'zh-TW'"
                @click="handleSetLanguage('zh-TW')"
                >繁體中文</el-dropdown-item
            >
            <el-dropdown-item
                v-if="$i18n.locale != 'en-US'"
                @click="handleSetLanguage('en-US')"
                >English</el-dropdown-item
            >
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
export default {
    name: 'lang-select',
    computed: {
        language() {
            return localStorage.getItem('lang') || 'zh-CN'
        },
    },
    methods: {
        handleSetLanguage(lang) {
            this.$i18n.locale = lang
            this.$validator.locale = lang

            // 日期控件格式化
            if ('zh-CN' == lang) {
                // moment.locale('zh-cn');
            } else {
                // moment.locale('en');
            }

            localStorage.setItem('lang', lang)
            this.$message({
                message: 'success',
                type: 'success',
            })
        },
    },
    filters: {
        langValue: (val) => {
            let resultVal = val
            if ('zh-CN' == val) {
                resultVal = '简体中文'
            }
            if ('zh-TW' == val) {
                resultVal = '繁體中文'
            }
            if ('en-US' == val) {
                resultVal = 'English'
            }
            return resultVal
        },
    },
}
</script>

<style scoped>
.icon {
    font-size: 18px!important;
    fill: #e1e4ec;
	vertical-align:middle;
    cursor: pointer;
}
.icon:hover {
    fill: #fff;
}
</style>