<template>
    <!-- 语言 -->
    <div class="name-box font12">
        <el-dropdown trigger="click" class="triangle-box" @command="handleCommand" :max-height="300">
            <div>
                {{ name }}
                <el-icon class="triangle">
                    <i-ep-arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(it, index) in language" :key="index" :command="it.id" :value="it.name">
                        {{ !it.disable ? it.name : "" }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
const language = ref([
    { name: "中文", id: 1 },
    { name: "English", id: 2 }
]);
const name = ref("中文");
userStore.setLanguageValue(1);
//组织改变;
const handleCommand = (val: number | null) => {
    const names = {
        1: "中文",
        2: "English"
    };
    name.value = names[val];
    userStore.setLanguageValue(val);
};
</script>

<style scoped lang="scss">
.name-box {
    position: relative;
    display: flex;
    align-items: center;
    color: #303133;
    cursor: pointer;
    ::v-deep(.el-dropdown) {
        color: #303133;
    }
}
.name-box::before {
    position: absolute;
    top: 50%;
    display: block;
    height: 20px;
    content: "";
    border-left: 1px solid #e4e7ed;
    transform: translateY(-50%);
}
.triangle-box {
    margin: 0 10px;
}
.triangle {
    margin-left: 3px;
    transition: transform 0.3s ease; /* 添加动画过渡效果 */
}
.triangle-box:hover .triangle {
    transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
}
</style>
