<template>
	<div class="top-right-btn" :style="style">
		<el-row :gutter="0">
			<!-- 搜索框控制 -->
			<el-tooltip
				class="item"
				effect="dark"
				:content="showSearch ? $t('queryTree.hideSearch') : $t('queryTree.displayTheSearch')"
				placement="top"
				v-if="search"
			>
				<el-button circle icon="Search" @click="toggleSearch()" />
			</el-tooltip>

			<!-- 导出 -->
			<el-tooltip class="item" effect="dark" :content="$t('common.exportBtn')" placement="top" v-if="isExport()">
				<el-button circle icon="Download" @click="handleExport()" />
			</el-tooltip>

			<!-- 刷新功能 -->
			<el-tooltip class="item" effect="dark" :content="$t('queryTree.refresh')" placement="top">
				<el-button circle icon="Refresh" @click="handleRefresh()" />
			</el-tooltip>

      <!-- 插槽 -->
      <slot></slot>
    </el-row>
	</div>
</template>

<script setup name="right-toolbar">
import { auth } from '/@/utils/authFunction';

/**
 * 通过 defineProps 函数定义组件 props
 */
const props = defineProps({
	/**
	 * 是否显示搜索框
	 */
	showSearch: {
		type: Boolean,
		default: true,
	},
	/**
	 * 是否导出
	 */
	export: {
		type: [String, Boolean],
		default: null,
	},
	/**
	 * 是否显示搜索框
	 */
	search: {
		type: Boolean,
		default: true,
	},
	/**
	 * 列表项之间的间距
	 */
	gutter: {
		type: Number,
		default: 10,
	},
});

const emits = defineEmits(['update:showSearch', 'queryTable', 'exportExcel']);

const style = computed(() => {
	const ret = {};
	// 如果props中有传入gutter属性，则计算出marginRight
	if (props.gutter) {
		ret.marginRight = `${props.gutter / 2}px`;
	}
	return ret; // 返回计算后的样式对象
});

// 搜索
const toggleSearch = () => {
	emits('update:showSearch', !props.showSearch);
};

// 刷新
const handleRefresh = () => {
	emits('queryTable');
};

// 导出excel
const handleExport = () => {
	emits('exportExcel');
};

// 是否导出
const isExport = () => {
	if (props.export === true) {
		return true;
	}

	// 字符串鉴权
	return props.export && auth(props.export);
};
</script>

<style lang="scss" scoped>
.top-right-btn {
	display: flex;
	align-items: center;
	
	:deep(.el-row) {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	:deep(.el-button) {
		margin-left: 0;
	}
	
	:deep(.el-tooltip) {
		margin-left: 0;
	}
}

:deep(.el-transfer__button) {
	border-radius: 50%;
	display: block;
	margin-left: 0px;
}

:deep(.el-transfer__button:first-child) {
	margin-bottom: 10px;
}

.my-el-transfer {
	text-align: center;
}
</style>
