<template>
    <div class="card">
        <div class="card-top" :style="{ backgroundImage: `url(${require('../assets/shuju_img_top.png')})` }">
            <div class="left" :class="{ small: title.length > 15 }">
                <img :src="require(`../assets/${icon}.png`)" alt="" />
                <span>{{ title }}</span>
            </div>
            <div class="right">
                <slot name="top-right"></slot>
            </div>
        </div>
        <div class="card-center" :style="{ backgroundImage: `url(${require('../assets/shuju_img_center.png')})` }">
            <slot></slot>
        </div>
        <div
            class="card-bottom"
            :style="{ backgroundImage: `url(${require('../assets/shuju_img_bottom.png')})` }"
        ></div>
    </div>
</template>

<script>
export default {
    name: 'Card',
    props: {
        icon: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: '',
        },
    },
};
</script>

<style lang="less" scoped>
.card {
    height: 100%;
    .flex-col();
    .card-top {
        background-size: 100% 100%;
        height: 49px;
        box-sizing: border-box;
        .flex();
        padding: 5px 15px 0;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .card-center {
        flex-grow: 1;
        background-size: 100% 100%;
        padding: 0;
        box-sizing: border-box;
        .flex-col();
    }

    .card-bottom {
        background-size: 100% 100%;
        height: 31px;
        flex-shrink: 0;
    }
}

.left {
    .flex();
    img {
        width: 24px;
        height: 24px;
    }

    span {
        font-size: 18px;
        font-weight: bold;
        color: #3cbef2;
        margin-left: 8px;
    }

    &.small {
        span {
            font-size: 16px;
        }
    }
}
</style>
