<!-- 底部 Bar 组件 -->

<script setup lang="ts">
    const props = defineProps({
        // 是否显示
        show: {
            type: Boolean,
            default: true,
        },
        // 是否展开
        expand: {
            type: Boolean,
            default: false,
        },
        // 是否有展开按钮
        showExpandButton: {
            type: Boolean,
            default: true,
        },
        // 高度
        height: {
            type: Number,
            default: 0,
        },
        // 最高高度
        maxHeight: {
            type: Number,
            default: 0,
        },
    })

    const emits = defineEmits(['register'])

    const iHeight = computed(() => `${data.height}rpx`)
    const iMaxHeight = computed(() => `${data.maxHeight}rpx`)

    const data = reactive({
        show: props.show,
        expand: props.expand,
        showExpandButton: props.showExpandButton,
        height: props.height,
        maxHeight: props.maxHeight,
    })

    function toggleShow(show?: boolean) {
        data.show = show ?? !data.show
    }

    function toggleExpand(expand?: boolean) {
        if (data.showExpandButton) {
            data.expand = expand ?? !data.expand
        }
    }

    function setProps(value: Partial<typeof props>) {
        Object.assign(data, value)
    }

    emits('register', {
        setProps,
        toggleShow,
        toggleExpand,
        // TODO: 此处高度还需考虑底部安全区
        height: computed(() => (data.show ? `${(data.expand ? data.maxHeight : data.height) + 60}rpx` : '1rpx')),
    })
</script>

<template>
    <view class="wrap bottom-bar" :class="{ expand: data.expand }" v-show="data.show">
        <view class="action" @tap="toggleExpand()" v-show="data.showExpandButton">
            <Icon icon="solar-double-alt-arrow-up-line-duotone" size="60" class="icon" />
        </view>

        <!-- 自定义内容 -->
        <view class="content">
            <slot></slot>
        </view>

        <!-- 底部安全区 -->
        <fui-safe-area />
    </view>
</template>

<style lang="scss" scoped>
    @mixin animate() {
        transition: all 0.35s;
    }

    .wrap {
        @include animate();

        position: absolute;
        left: 30rpx;
        bottom: 30rpx;
        z-index: 99;
        background-color: white;
    }

    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 30rpx;
        width: calc(100% - 60rpx);
        height: v-bind(iHeight);
        max-height: v-bind(iMaxHeight);
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);

        &.expand {
            height: v-bind(iMaxHeight);

            .icon {
                transform: rotateX(180deg) !important;
            }
        }

        .action {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                @include animate();

                position: relative;
                top: -20rpx;
                transform: rotateX(0);
                transform-style: preserve-3d;
            }
        }

        .content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: calc(100% - 60rpx - 20rpx);
            overflow: hidden;
            position: relative;
        }
    }
</style>
