<template>
    <div class="flex-row-between-center h-[50px] p-16px border-b-solid-light2">
        <span>组织架构</span>
        <el-space>
            <span
                v-for="btn in organizationBtns"
                :key="btn.key"
                :title="btn.title"
                @click="btn.event"
                class="w-[20px] h-[20px] bg-[#F3F6F9] flex-row-center-center rounded-[2px] cursor-pointer"
            >
                <icon :name="btn.icon" :size="16" color="999" />
            </span>
        </el-space>
    </div>
</template>

<script setup lang="ts">
import { ORGANIZATION_INJECTION_KEY } from '@/config/symbol'

const emit = defineEmits(['handleOrganization'])

const parent = inject(ORGANIZATION_INJECTION_KEY)
const handleAddOrganzation = () => {
    emit('handleOrganization', 'add')
}

const handleRefreshOrganization = () => {
    parent?.fetchOrganizationList()
}
const organizationBtns = shallowRef([
    { key: 'add', title: '添加组织', icon: 'el-icon-Plus', event: handleAddOrganzation },
    { key: 'refresh', title: '刷新', icon: 'el-icon-RefreshRight', event: handleRefreshOrganization }
])
</script>

<style scoped lang="scss">
:deep(.el-space) {
    .el-space__item {
        &:last-child {
            margin-right: 0 !important;
        }
    }
}
</style>
