<template>
    <a-tabs type="editable-card" :active-key="active" :hide-add="true">
        <a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
            <a-icon
                theme="filled"
                @click="onLockClick"
                class="header-lock"
                :type="fixedTabs ? 'lock' : 'unlock'"
            />
        </a-tooltip>
        <a-tab-pane v-for="page in pageList" :key="page.fullPath">
            <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
                <a-icon
                    @click="onRefresh(page)"
                    :class="['icon-sync', { hide: page.fullPath !== active && !page.loading }]"
                    :type="page.loading ? 'loading' : 'sync'"
                />
                <div class="tw-inline-block tw-select-none tw-h-full" @click="onTabClick(page.fullPath)">
                    {{ pageName(page) }}
                </div>
                <a-icon
                    v-if="!page.unclose"
                    @click="onClose(page.fullPath)"
                    class="icon-close"
                    type="close"
                />
            </div>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import layoutTabHeaderI18n from './i18n';
import { getUserInfo } from '@/utils';

export default {
    name: 'LayoutTabsHeader',
    i18n: layoutTabHeaderI18n,
    props: {
        pageList: Array,
        active: String,
        fixed: Boolean,
    },
    data() {
        return {
            affixed: false,
            menuList: [],
        };
    },
    inject: ['adminLayout'],

    created() {
        this.affixed = this.fixedTabs;
        const { menuList } = getUserInfo();
        this.menuList = menuList.filter(i => i.menuType === 'MENU');
    },

    computed: {
        ...mapState('settingModule', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
        lockTitle() {
            return this.$t(this.fixedTabs ? 'unlock' : 'lock');
        },
    },

    methods: {
        ...mapMutations('settingModule', ['setFixedTabs']),
        onLockClick() {
            this.setFixedTabs(!this.fixedTabs);
            if (this.fixedTabs) {
                setTimeout(() => {
                    this.affixed = true;
                }, 200);
            } else {
                this.affixed = false;
            }
        },
        onTabClick(key) {
            if (this.active !== key) {
                this.$emit('change', key);
            }
        },
        onClose(key) {
            this.$emit('close', key);
        },
        onRefresh(page) {
            this.$emit('refresh', page.fullPath, page);
        },
        onContextmenu(pageKey, e) {
            this.$emit('contextmenu', pageKey, e);
        },
        pageName(page) {
            const pagePath = page.fullPath.split('?')[0];
            return this.menuList.find(m => m.menuUrl === pagePath)?.menuName;
        },
    },
};
</script>

<style scoped lang="less">
.tab {
    margin: 0 -16px;
    padding: 0 16px;
    font-size: 14px;
    user-select: none;
    transition: all 0.2s;

    .icon-close {
        font-size: 12px;
        margin-left: 6px;
        margin-right: -4px !important;
        color: @text-color-second;
        &:hover {
            color: @text-color;
        }
    }
    .icon-sync {
        margin-left: -4px;
        color: @primary-4;
        transition: all 0.3s ease-in-out;
        &:hover {
            color: @primary-color;
        }
        font-size: 14px;
        &.hide {
            font-size: 0;
        }
    }
}
</style>
