<template>
    <div class="container" :style="{backgroundImage: `url(${bg})`, color: props.type === 2 ? 'black': 'white'}">
        <div class="top">{{ props.title }}</div>
        <div class="bottom">
            <div class="left">{{ props.value }}</div>
            <div class="right">{{ props.unit }}</div>
        </div>
    </div>    
</template>

<script setup>
import {ref, defineProps} from 'vue';

const props = defineProps({
    type: {
        type: Number,
        default: 1
    },
    title: {
        type: String,
        default: '标题'
    },
    value: {
        type: Number,
        default: 0
    },
    unit: {
        type: String,
        default: ''
    }
});

const bg = ref('assets/imgs/card/bg10.png');
if(props.type === 2) {
    bg.value = 'assets/imgs/card/bg11.png';
}
</script>

<style lang="stylus" scoped>
.container
    display flex
    flex-direction column
    justify-content space-between
    width 140px
    height 45px
    padding 5px 20px
    background-repeat no-repeat
    background-size 100% 100%
    color #FFFFFF
    font-weight bold
    .top
        font-size 14px
        font-weight bold
    .bottom
        display flex
        justify-content space-between
        align-items center
        height 30px
        .left
            font-size 18px
        .right
            font-size 12px
</style>