<!-- 全局 - 快捷入口 -->
<template>
    <uni-popup
        ref="popupRef"
        type="top"
        borderRadius="0 0 20px 20px"
        backgroundColor="#F0F0F0"
        @close="closeMenuTools"
        @maskClick="closeMenuTools"
    >
        <pb-status-bar />
        <view class="tools-wrap ss-m-x-30 ss-m-b-16">
            <view class="title ss-m-b-34 ss-p-t-20">快捷菜单</view>
            <view class="container-list ss-flex ss-flex-wrap">
                <view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
                    <view class="ss-flex-col ss-col-center">
                        <button
                            class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
                            @tap="onClick(item)"
                        >
                            <image v-if="show" :src="peach.$url.static(item.icon, 'local')" class="list-icon" />
                        </button>
                        <view class="list-title ss-m-t-20">{{ item.title }}</view>
                    </view>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import peach from '@/peach'
import { closeMenuTools } from '@/peach/hooks/useModal'

const popupRef = ref()
const show = computed(() => peach.$store('modal').menu)

watch(show, (newVal) => {
    if (newVal) {
        popupRef.value.open()
    } else {
        popupRef.value.close()
    }
})

function onClick(item) {
    closeMenuTools()
    if (item.url) peach.$router.redirect(item.url)
}

const list = [
    {
        url: '/pages/user/point/share',
        icon: '/static/dispensecent.png',
        title: '分发积分',
    },
    {
        url: '/pages/user/point/buy',
        icon: '/static/buycent.png',
        title: '购买积分',
    },
    {
        url: '/pages/user/wallet/withdraw',
        icon: '/static/withdraw.png',
        title: '余额提现',
    },
]
</script>

<style lang="scss" scoped>
.tools-wrap {
    // background: #F0F0F0;
    // box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
    // opacity: 0.98;
    // border-radius: 0 0 20rpx 20rpx;

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
    }

    .list-item {
        width: calc(25vw - 20rpx);

        .list-image {
            width: 104rpx;
            height: 104rpx;
            border-radius: 52rpx;
            background: var(--ui-BG);

            .list-icon {
                width: 54rpx;
                height: 54rpx;
            }
        }

        .list-title {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
        }
    }
}

.uni-popup {
    top: 0 !important;
}

:deep(.button-hover) {
    background: #fafafa !important;
}
</style>
