<template>
    <view>
        <view class="fb-form-button-placeholder" :style="{ marginTop: `${placeholderMarginTop}px` }"></view>
        <view class="fb-form-button-bar">
            <FBAction v-for="(action, index) in displayInfo.displayActions" :key="index" :actionInfo="action">
                <view class="fb-form-button">{{ action.actionName }}</view>
            </FBAction>
            <view v-if="displayInfo.moreActions?.length" class="fb-form-button-more" @click="showMoreAction">
                <uv-icon name="list" color="#1456F0" size="22"></uv-icon>
            </view>
        </view>

        <uv-action-sheet v-if="displayInfo.moreActions?.length" ref="moreActionRef" @select="doMoreAction"
            :actions="displayInfo.moreActions" cancelText="取消" />
    </view>
</template>

<script setup lang="ts">
import { ref, computed, defineProps } from 'vue';
import type { ActionInfo } from '../../types/basic';
import FBAction from './fb-action.vue';

const moreButtonThreshold = 2

type Props = {
    actions?: ActionInfo[]
    marginTop?: number
}
const { actions, marginTop } = defineProps<Props>()

const placeholderMarginTop = ref(marginTop === undefined ? 0 : marginTop)
const moreActionRef = ref(null)

const displayInfo = computed(() => {
    const displayActions = actions?.slice(0, moreButtonThreshold) || []
    const moreActions = actions?.slice(moreButtonThreshold)?.map(action => ({ name: action.actionName, action })) || []

    return { displayActions, moreActions }
})

const showMoreAction = () => {
    moreActionRef.value?.open();
}

const doMoreAction = (e) => {
    console.log(e)
}
</script>

<style lang="less" scoped>
.fb-form-button-placeholder {
    height: 78px;
}

.fb-form-button-bar {
    display: flex;
    flex-direction: row-reverse;
    column-gap: 20px;
    position: fixed;
    padding-inline: 20px;
    margin-bottom: 40px;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;

    .fb-form-button {
        border-radius: 99px;
        padding: 10px 20px;
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        background-color: #1456F0;
        color: #fff;
    }

    .fb-form-button-more {
        border-radius: 99px;
        background-color: #fff;
        border: 1px solid #1456F0;
        // border 也占 1px
        padding: 7px;
        align-self: center;
    }
}
</style>
