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

<script setup lang="ts">
    import { deepMerge } from '@/utils'

    const props = defineProps({
        // 是否显示
        show: {
            type: Boolean,
            default: true,
        },
        // 是否展开
        expand: {
            type: Boolean,
            default: false,
        },
        // 展开按钮标题
        expandTitle: {
            type: String,
        },
        // 是否有展开按钮
        showExpandButton: {
            type: Boolean,
            default: true,
        },
        // 是否有展开按钮下边框
        showExpandBorder: {
            type: Boolean,
            default: false,
        },
        // 高度
        height: {
            type: Number,
            default: 0,
        },
        // 最高高度
        maxHeight: {
            type: Number,
            default: 0,
        },
        // 是否 Y 轴可滚动
        scrollY: {
            type: Boolean,
            default: false,
        },
    })

    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,
        expandTitle: props.expandTitle,
        showExpandButton: props.showExpandButton,
        showExpandBorder: props.showExpandBorder,
        height: props.height,
        maxHeight: props.maxHeight,
        scrollY: props.scrollY,
    })

    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>) {
        deepMerge(data, value)
    }

    function getProp(key: keyof typeof props) {
        return data[key]
    }

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

<template>
    <view class="wrap bottom-bar" :class="{ expand: data.expand }" v-show="data.show">
        <view
            class="action flex-center"
            :class="{ border: data.showExpandBorder }"
            v-show="data.showExpandButton"
            @tap="toggleExpand()"
        >
            <text class="text" v-if="data.expandTitle">{{ data.expandTitle }}</text>
            <Icon icon="solar-double-alt-arrow-up-line-duotone" size="42" color="#999" class="icon" />
        </view>

        <!-- 自定义内容 -->
        <scroll-view class="content flex-center" :scroll-y="data.scrollY">
            <slot></slot>
        </scroll-view>

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

<style lang="scss" scoped>
    @import '../../common.scss';

    .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 12rpx;
        padding: 10px 12px;
        // width: calc(100% - 60rpx);
        width: 100%;
        height: v-bind(iHeight);
        max-height: v-bind(iMaxHeight);
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
        box-sizing: border-box;

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

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

        .action {
            width: 100%;
            position: relative;
            // top: -15rpx;
            font-size: 24rpx;
            color: #999;
            padding-bottom: 10rpx;

            &.border {
                border-bottom: 2rpx solid #f6f6f6;
            }

            .text {
                margin-right: 0.5em;
            }

            .icon {
                @include animate();

                transform: rotateX(0);
                transform-style: preserve-3d;
            }
        }

        .content {
            box-sizing: border-box;
            width: 100%;
            // height: calc(100% - 60rpx - 20rpx);
            height: 100%;
            overflow: hidden;
            position: relative;
        }
    }
</style>
