<template lang="pug">
    <a class="WM-Block WM-Border WM-Align-C WM-Border-LightGray WM-QuickLink" :class="HoverClass">
        <div class="WM-Font-36" v-if="Counter>0"> {{ Counter }} </div>
        <div class="WM-Font-24"> {{ TitleFa }} </div>
        <h4 class="WM-SubText WM-Font-16" :class="h4Class"> {{ TitleEn }} </h4>
    </a>
</template>

<script>
export default {
    props: {
        Counter:     { default: 0 },
        TitleFa:     { default: "دسترسی سریع" },
        TitleEn:     { default: "Quick Link" },
        ThemeColor:  { default: "Red" }
    },
    data: function ()  {
        return {
            HoverClass: 'WM-Hover-' + this.ThemeColor,
            h4Class: 'WM-BG-' + this.ThemeColor,
        }
    },

    // data() {
    //     return {
    //         Color,HoverClass
    //     }
    // },
    //
    // created : function ( ) {
    //     this.Color = 'WM-BG-' + this.ThemeColor;
    //     this.HoverClass = 'WM-Hover-' + this.ThemeColor;
    // }
};
</script>
