<script lang="tsx">
import { defineComponent, PropType } from 'vue'
import { stop } from '../../../utils/common'
import * as env from '../../../types/instance.resolver'

export default defineComponent({
    name: 'SkyBookmarkItem',
    emits: ['selecter', 'close'],
    props: {
        node: { type: Object as PropType<env.BookmarkOption>, required: true },
        defaultActive: { type: String }
    },
    setup(props, { emit }) {
        return () => (
            <el-button
                size="small"
                bg
                text={props.node.path !== props.defaultActive}
                type={props.node.path === props.defaultActive ? 'primary' : undefined}
                onClick={(evt: MouseEvent) => stop(evt, () => emit('selecter', props.node))}
            >
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <span>{props.node.meta.title}</span>
                    {(props.node.close ?? true) && (
                        <el-icon size={14} onClick={(evt: MouseEvent) => stop(evt, () => emit('close', props.node))}>
                            <local-skyline-close />
                        </el-icon>
                    )}
                </div>
            </el-button>
        )
    }
})
</script>
