<!--
@ 作者: 秦东
@ 时间: 2024-05-13 14:36:07
@ 备注: App表单头部控制
-->
<script lang='ts' setup>
const props = withDefaults(
	defineProps<{
      showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
      hideKey?: string[] // 设置了showKey时，hideKey无效
	  customerformid?: number | string,
    }>(),
	{
		showKey: () => {
			return []
		},
		hideKey: () => {
			return []
		}
    }
)
const emits = defineEmits<{(e: 'click', value: string): void}>(); 
const btnList = computed(() => {
	const list = [
		{ icon: 'del',iconFont:"", label: '清空', key: 1 },
		{ icon: 'eye',iconFont:"", label: '预览', key: 2 },
		{ icon: 'json',iconFont:"", label: '生成脚本预览', key: 3 },
		// { icon: 'vue', label: '导出vue文件', key: 4 },
		{ icon: 'save',iconFont:"fa-save", label: '保存', key: 5 },
		{ icon: 'branch',iconFont:"fa-code-fork", label: '另存为新版', key: 4 },
		// { icon: 'close',iconFont:"fa-close", label: '关闭', key: 6 }
    ]
	if (props.showKey?.length) {
		// 按照指定的key显示
		return list.filter((item: any) => {
			return props.showKey.includes(item.key)
		})
    } else if (props.hideKey?.length) {
		// 按照指定的key隐藏
		return list.filter((item: any) => {
				return !props.hideKey.includes(item.key)
		})
    } else {
      	return list // 否则显示全部
    }
})
const btnClick = (type: string) => {
	emits('click', type)
}
</script>
<template>
	<div class="main-head-tools">
		<div>{{props.customerformid}}</div>
		<div>
			<span v-for="item in btnList">
				<el-button
					link
					v-if="(item.icon != 'branch') || (item.icon == 'branch' && (props.customerformid !=''))"
					@click="btnClick(item.icon)"
					:key="item.icon"
					:type="item.key==6?'danger':item.key==5?'success':item.key==4?'warning':'primary'"
				>
					<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }}
				</el-button>
			</span>
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.main-head-tools{
	line-height: 26px;
    border-bottom: 2px solid #e4e7ed;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
</style>
