<!-- 前后切换组件 -->

<script setup lang="ts">
    const props = defineProps({
        // 是否显示
        show: {
            type: Boolean,
            default: true,
        },
        // 底部距离 rpx
        bottom: {
            type: Number,
            default: 0,
        },
    })

    const emits = defineEmits(['register', 'prev', 'next'])

    const height = computed(() => `calc(50% - 60rpx${data.bottom ? ` - ${data.bottom / 2}rpx` : ''})`)
    const data = reactive({
        show: props.show,
        bottom: props.bottom,
        prev: () => {},
        next: () => {},
    })

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

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

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

    function onPrev() {
        data.prev?.()
        emits('prev')
    }

    function onNext() {
        data.next?.()
        emits('next')
    }

    emits('register', {
        setProps,
        getProp,
        toggleShow,
        prev: onPrev,
        next: onNext,
    })
</script>

<template>
    <view class="wrap switch-control" v-show="data.show">
        <view class="flex-center prev" @tap="onPrev">
            <Icon class="icon" icon="ic-baseline-arrow-back-ios" size="50" color="white" />
        </view>
        <view class="flex-center next" @tap="onNext">
            <Icon class="icon" icon="ic-baseline-arrow-forward-ios" size="50" color="white" />
        </view>
    </view>
</template>

<style lang="scss" scoped>
    @use '../../common.scss' as *;

    .switch-control {
        > * {
            @include animate();

            width: 60rpx;
            height: 120rpx;
            background-color: rgba(0, 0, 0, 0.3);

            position: absolute;
            top: v-bind(height);
            z-index: 99;
        }

        .prev {
            left: 0;
            border-radius: 0 15rpx 15rpx 0;

            .icon {
                position: relative;
                left: 12rpx;
            }
        }

        .next {
            right: 0;
            border-radius: 15rpx 0 0 15rpx;
        }
    }
</style>
