<template>
    <div class="dv-card" :style="styles" :class="themeClasses">
        <div class="dv-card-before"></div>
        <div class="dv-card-after"></div>
        <div class="dv-card-loading-wrap" v-if="loading">
            <dv-loading></dv-loading>
        </div>
        <div class="dv-card-header">
            <span class="dv-card-header-icon">
              <slot name="icon">
                <img src="../../../../public/static/images/card/section-right.png">
              </slot>
            </span>
            <div class="dv-card-header-title">
                {{title}}
                <span v-if="subTitle" class="dv-card-header-title-sub">{{subTitle}}</span>
            </div>
            <div class="dv-card-header-actions"><slot name="actions"></slot></div>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import ThemeComponent from "../../../mixins/ThemeComponent";
    import CommonContainer from "../../../mixins/CommonContainer";

    export default {
        name: 'DvCard',
        mixins: [ThemeComponent, CommonContainer],
        props: {
            loading: {
                type: Boolean,
                default: false
            },
            width: {
                type: [Number, String]
            },
            height: {
                type: [Number, String]
            },
            title: {
                type: String
            },
            subTitle: {
                type: String
            }
        },
        computed: {
            styles () {
                const styles = {};
                if (this.width) {
                    styles.width = `${this.width}px`;
                }
                if (this.height) {
                    styles.height = `${this.height}px`;
                }
                return styles;
            }
        }
    };
</script>
