<script lang="ts">
    import { defineComponent } from 'vue'
    import { BasicTitle } from '/@/components/Basic'
    import { ArrowLeftOutlined } from '@ant-design/icons-vue'

    import { useDesign } from '/@/hooks/web/useDesign'

    import { propTypes } from '/@/utils/propTypes'

    export default defineComponent({
        name: 'BasicDrawerHeader',
        components: { BasicTitle, ArrowLeftOutlined },
        props: {
            isDetail: propTypes.bool,
            showDetailBack: propTypes.bool,
            title: propTypes.string,
        },
        emits: ['close'],
        setup(_, { emit }) {
            const { prefixCls } = useDesign('basic-drawer-header')

            function handleClose() {
                emit('close')
            }

            return { prefixCls, handleClose }
        },
    })
</script>

<template>
    <BasicTitle v-if="!isDetail" :class="prefixCls">
        <slot name="title"></slot>
        {{ !$slots.title ? title : '' }}
    </BasicTitle>

    <div :class="[prefixCls, `${prefixCls}--detail`]" v-else>
        <span :class="`${prefixCls}__twrap`">
            <span @click="handleClose" v-if="showDetailBack">
                <ArrowLeftOutlined :class="`${prefixCls}__back`" />
            </span>
            <span v-if="title">{{ title }}</span>
        </span>

        <span :class="`${prefixCls}__toolbar`">
            <slot name="titleToolbar"></slot>
        </span>
    </div>
</template>

<style lang="less">
    @prefix-cls: ~'@{namespace}-basic-drawer-header';
    @footer-height: 60px;
    .@{prefix-cls} {
        display: flex;
        height: 100%;
        align-items: center;

        &__back {
            padding: 0 12px;
            cursor: pointer;

            &:hover {
                color: @primary-color;
            }
        }

        &__twrap {
            flex: 1;
        }

        &__toolbar {
            padding-right: 50px;
        }
    }
</style>
