<script lang="tsx">
import { defineComponent } from 'vue'
import { useSkyConfiger } from '../../../hooks/hook-configer'
import { stop } from '../../../utils/common'
import logo from '../../../assets/images/logo.png'

export default defineComponent({
    name: 'SkyHeader',
    emits: ['trigger'],
    props: {
        trigger: { type: Boolean, default: false }
    },
    setup(props, { emit, slots }) {
        const { IsMobile, stateOption } = useSkyConfiger()

        async function onTrigger(evt: MouseEvent) {
            return stop(evt, () => {
                return emit('trigger', stateOption.value)
            })
        }

        return () => (
            <div class="skyline-header">
                <div class={{ 'skyline-subject': true, 'skyline-trigger': props.trigger, 'is-mobile': IsMobile.value }}>
                    <div class="skyline-collapsed" onClick={onTrigger}>
                        <el-icon size={20}>
                            <local-skyline-menu />
                        </el-icon>
                    </div>
                    <el-image src={logo} class="skyline-logo"></el-image>
                </div>
                {slots.default && slots.default(stateOption.value)}
            </div>
        )
    }
})
</script>

<style lang="scss" scoped>
.skyline-header {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    column-gap: 15px;
}

.skyline-subject {
    --el-sky-subject-padding-left: 0px;
    --el-sky-subject-collapsed-left: -30px;
    position: relative;
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    user-select: none;
    padding-left: var(--el-sky-subject-padding-left);
    transition: padding-left 0.3s;
    &.skyline-trigger.is-mobile {
        --el-sky-subject-padding-left: 34px;
        --el-sky-subject-collapsed-left: 0px;
    }
    .skyline-logo {
        width: 180px;
        display: block;
    }
    .skyline-collapsed {
        position: absolute;
        left: var(--el-sky-subject-collapsed-left);
        transition: left 0.3s;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}
</style>
