<template>
    <div class="top-right-btn" :style="style">
        <el-row>
            <el-tooltip class="item" effect="dark" :content="showSearch ? $t('components.RightToolbar.390493-0') : $t('components.RightToolbar.390493-1')" placement="top" v-if="search">
                <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('components.RightToolbar.390493-2')" placement="top">
                <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('components.RightToolbar.390493-3')" placement="top" v-if="columns">
                <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
            </el-tooltip>
            <slot></slot>
        </el-row>
        <el-dialog :title="title" :visible.sync="open" append-to-body>
            <el-transfer :titles="[$t('components.RightToolbar.390493-4'), $t('components.RightToolbar.390493-5')]" v-model="value" :data="columns" @change="dataChange"></el-transfer>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'RightToolbar',
    data() {
        return {
            refreshInterval: null,  // 用于存储定时器 ID

            // 显隐数据
            value: [],
            // 弹出层标题
            title: this.$t('components.RightToolbar.390493-6'),
            // 是否显示弹出层
            open: false,
        };
    },
    props: {
        showSearch: {
            type: Boolean,
            default: true,
        },
        columns: {
            type: Array,
        },
        search: {
            type: Boolean,
            default: true,
        },
        gutter: {
            type: Number,
            default: 10,
        },
    },
    computed: {
        style() {
            const ret = {};
            if (this.gutter) {
                ret.marginRight = `${this.gutter / 2}px`;
            }
            return ret;
        },
    },
    created() {
        // 显隐列初始默认隐藏列
        for (let item in this.columns) {
            if (this.columns[item].visible === false) {
                this.value.push(parseInt(item));
            }
        }
    },
    mounted() {
    // 每 5 秒执行一次 refresh
    this.refreshInterval = setInterval(() => {
      this.refresh();
    }, 60000); 
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
    methods: {
        // 搜索
        toggleSearch() {
            this.$emit('update:showSearch', !this.showSearch);
        },
        // 刷新
        refresh() {
            this.$emit('queryTable');
        },
        // 右侧列表元素变化
        dataChange(data) {
            for (let item in this.columns) {
                const key = this.columns[item].key;
                this.columns[item].visible = !data.includes(key);
            }
        },
        // 打开显隐列dialog
        showColumn() {
            this.open = true;
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
    border-radius: 50%;
    padding: 12px;
    display: block;
    margin-left: 0px;
}

::v-deep .el-transfer__button:first-child {
    margin-bottom: 10px;
}
</style>
