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

<script setup lang="ts">
    const props = defineProps({
        // 是否显示
        show: {
            type: Boolean,
            default: true,
        },
    })

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

    const data = reactive({
        show: props.show,
        // 往前
        prev: () => {},
        // 往后
        next: () => {},
    })

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

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

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

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

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

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

<style lang="scss" scoped>
    .switch-control {
        > * {
            width: 70rpx;
            height: 120rpx;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;

            position: absolute;
            top: calc(50% - 100rpx);
            z-index: 99;
        }

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

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

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