<template>
    <div class="dash-unit2 col-lg-3 col-md-6" style="margin-top: 15px; margin-bottom: 15px">
        <div class="panel panel-primary">
            <div class="panel-heading" :style="getBackgroundColor">
                <div class="row">
                    <div class="col-xs-3">
                        <i :class="icon" :style="getIconColor"></i>
                    </div>
                    <div class="col-xs-9 text-right" :style="getFontColor">
                        <div class="info">
                            <label class="ui-outputlabel ui-widget">{{ quantity }}</label>
                        </div>
                        <div class="info">
                            {{ description }}
                        </div>
                    </div>
                </div>
            </div>
            <router-link :to="navigator">
                <div class="panel-footer" :style="getLinkColor">
                    <span class="pull-left">{{ $t('label.accessPage') }}</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DashUnity2",
        props: {
            icon: { type: String, required: true },
            quantity: { required: true },
            description: { type: String, required : true },
            navigator: { type: String, required: true },
            backgroundColor: { type: String, default: 'gray' },
            fontColor: { type: String, default: 'white' },
            linkColor: { type: String, default: 'gray' },
            iconColor: { type: String, default: 'white' }
        },
        computed: {
            getBackgroundColor() {
                return 'background-color: ' + this.backgroundColor
            },
            getFontColor() {
                return 'color: ' + this.fontColor
            },
            getIconColor() {
                return 'color: ' + this.iconColor
            },
            getLinkColor() {
                return 'color: ' + this.linkColor
            },
        }
    }
</script>

<style scoped lang="scss">
    .dash-unit2 .panel {
        font-size: 14px;
        /* width: 760px; */
        margin: 0 auto;
        text-align: left;
    }

    //.dash-unit2 .panel-primary > .panel-heading {
    //    color: #fff;
        /*background-color: #428bca;*/
        /*border-color: #428bca;*/
    //}

    .dash-unit2 .panel-heading {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .dash-unit2 .panel-footer {
        padding: 10px 15px;
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .dash-unit2 .col-xs-3 {
        width: 25%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .dash-unit2 .col-xs-9 {
        width: 75%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .text-right {
        text-align: right;
    }

    .info {
        font-size: 1.5rem;
    }

</style>
