<!--
 * @Author: PoJun
 * @Date: 2023-11-29 11:10:00
 * @LastEditors: PoJun
 * @LastEditTime: 2023-11-29 12:02:02
 * @Message: 悬浮菜单, 各种参数有需要再扩展, 先能用就行
-->
<template>
    <view>
        <view class="kirin-float-menu">
            <view class="kirin-float-menu-content" :class="show ? 'open' : ''">
                <view class="kirin-float-menu-switch">
                    <uv-icon name="plus" color="#FFF" @click="btnClick('plus')"></uv-icon>
                </view>
                <view class="kirin-float-menu-switch">
                    <uv-icon name="trash" color="#FFF" @click="btnClick('trash')"></uv-icon>
                </view>
            </view>
            <view class="kirin-float-menu-switch" :class="show ? 'open' : ''">
                <uv-icon name="grid" color="#FFF" @click="change"></uv-icon>
            </view>
        </view>
        <uv-overlay :show="show" @click="show = false" :opacity="0.4"></uv-overlay>
    </view>
</template>

<script>
/**
 * 悬浮菜单,
 * @description 本组件用于页面存在多按钮且按钮组没有合适位置,如列表页的各种操作按钮
 * @property {String | Number}  zIndex 		层级   （btnClick默认 9 ）
 *
 * @example <kirin-float-menu></kirin-float-menu>
 */
export default {
    props: {
        list: {
            type: Array,
            default: function () {
                return [];
            },
        },
        rules: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            show: false,
        };
    },
    methods: {
        change() {
            this.show = !this.show;
        },
        btnClick(type) {
            this.show = false;
            this.$emit("btnClick", type);
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/uni_modules/uv-ui-tools/libs/css/components.scss";
.kirin-float-menu {
    @include flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    position: fixed;
    bottom: 150px;
    right: 20px;
    z-index: 10071;
    &-switch {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $uv-primary;
        transition: all 0.35s;
        z-index: 9;
        &.open {
            transform: rotateZ(45deg);
        }
    }
    &-content {
        @include flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transform: translateX(60%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s;
        .kirin-float-menu-switch {
            margin-right: 10px;
            z-index: 8;
        }
        &.open {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
    }
    &-btns {
        @include flex;
        align-items: center;
        justify-content: center;
        height: 40px;

        &-item {
            background-color: $uv-primary;
        }
    }
}
</style>
