<template>
    <div class="top-right-btn" :style="style">
        <slot></slot>
        <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 class="custom-button" size="mini" icon="el-icon-search" @click="toggleSearch()" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('components.RightToolbar.390493-2')" placement="top">
            <el-button class="custom-button" size="mini" 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 class="custom-button" size="mini" icon="el-icon-setting" @click="showColumn()" />
        </el-tooltip>
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <div class="isShow-dialog">
                <el-transfer :titles="[$t('components.RightToolbar.390493-4'), $t('components.RightToolbar.390493-5')]" v-model="value" :data="columns" @change="dataChange"></el-transfer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'RightToolbar',
    data() {
        return {
            // 显隐数据
            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));
            }
        }
    },
    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>
.top-right-btn {
    display: flex; /* 让按钮在同一行显示 */
    align-items: center; /* 垂直居中对齐 */

    .custom-button {
        width: 32.5px;
        height: 32.5px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        display: flex; /* 使用 flexbox */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
}

.isShow-dialog {
    display: flex;
    flex-direction: row;
    justify-content: center;

    ::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;
    }

    ::v-deep .el-button + .el-button {
        margin-left: 0px;
    }
}
</style>
