<template>
    <view class="menu-item" v-if="type == 'minus'">
        <image :src="getUrl" />
        <text class="mocp-color-text-5">{{ data.name }}</text>
        <view class="circle minus">-</view>
    </view>
    <view class="menu-item" v-else-if="type == 'plus'">
        <image :src="getUrl" />
        <text class="mocp-color-text-5">{{ data.name }}</text>
        <view class="circle plus">+</view>
    </view>
    <view class="menu-item" v-else>
        <image :src="getUrl" />
        <text class="mocp-color-text-5">{{ data.name }}</text>
        <view class="count" v-if="getCount > 0">{{ getCount }}</view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    data: {
        type: Object,
        default: function () {
            return {}
        }
    },
    type: {
        type: String,
        default: 'default'
    },
    showCount: {
        type: Boolean,
        default: true
    }
})
const getUrl = computed(() => {
    return '/static/mocp/image/panel/' + ps.data.icon + '.png'
})
const getCount = computed(() => {
    if (ps.showCount) {
        return ps.data.count || 0
    } else {
        return 0
    }
})
</script>
<style lang="scss" scoped>
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10rpx;
    position: relative;
    font-size: 30rpx;
    image {
        width: 64rpx;
        height: 64rpx;
    }
    text {
        margin-top: 16rpx;
        font-size: 30rpx;
        line-height: 40rpx;
    }
    .circle {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        &.minus {
            background: #c8c8c8;
        }
        &.plus {
            background: $mocp-primary-6;
        }
    }
    .count {
        color: #fff;
        height: 32rpx;
        line-height: 32rpx;
        padding: 0 8rpx;
        background: $mocp-danger-6;
        position: absolute;
        top: 0;
        right: 40rpx;
        border-radius: 40rpx;
        font-size: 22rpx;
    }
}
</style>
