<template>
    <div class="size-select">
        <el-dropdown @command="handleSetSize">
            <div class="title-wrap">
                <svg-icon icon-class="font_size" />
                <span class="size">{{ getSizeName() }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
                    {{ item.label }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sizeOptions: [
                { label: this.$t('components.sizeSelect.736906-1'), value: 'default' },
                { label: this.$t('components.sizeSelect.736906-2'), value: 'medium' },
                { label: this.$t('components.sizeSelect.736906-3'), value: 'small' },
                { label: this.$t('components.sizeSelect.736906-4'), value: 'mini' },
            ],
        };
    },
    computed: {
        size() {
            return this.$store.getters.size;
        },
    },
    methods: {
        handleSetSize(size) {
            this.$ELEMENT.size = size;
            this.$store.dispatch('app/setSize', size);
            this.refreshView();
            this.$message({
                message: this.$t('components.sizeSelect.736906-5'),
                type: 'success',
            });
        },
        refreshView() {
            this.$store.dispatch('tagsView/delAllCachedViews', this.$route);
            const { fullPath } = this.$route;
            this.$nextTick(() => {
                this.$router.replace({
                    path: '/redirect' + fullPath,
                });
            });
        },
        // 获取size名称
        getSizeName() {
            const obj = this.sizeOptions.find((item) => item.value === this.size) || {};
            return obj.label;
        },
    },
};
</script>

<style lang="scss" scoped>
.size-select {
    .title-wrap {
        font-size: 14px;

        .size {
            margin-left: 6px;
        }
    }
}
</style>
