<template>
    <view class="score" :class="type">
        <text class="tag">{{ getTag }}</text>
        <text class="count">
            <slot>{{ count }}</slot>
        </text>
    </view>
</template>

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

const ps = defineProps({
    //success,warning
    type: {
        type: String,
        default: 'success'
    },
    count: {
        type: [String, Number],
        default: -1
    }
})
const getTag = computed(() => {
    if (ps.type == 'success') {
        return '加分'
    } else {
        return '扣分'
    }
})
</script>
<style lang="scss" scoped>
.score {
    border-radius: 6rpx;
    color: #fff;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    .tag {
        width: 58rpx;
        border-radius: 6rpx;
        text-align: center;
        padding: 2px 0;
    }
    .count {
        min-width: 58rpx;
        text-align: center;
    }
    &.success {
        background: #e8ffea;
        .tag {
            background: $mocp-success-6;
        }
        .count {
            color: $mocp-success-6;
        }
    }
    &.warning {
        background: #ffece8;
        .tag {
            background: $mocp-danger-6;
        }
        .count {
            color: $mocp-danger-6;
        }
    }
}
</style>
