<template>
    <!-- <v-flex :class="TileSize" > -->
        <div class="WM-ImageTile Shadowed" :class="TileClass">
            <div class="CoverBG WM-Block WM-Align-C Relative" :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+TileHeight+';'">
                <div class="Content">
                    <div class="Info">
                        <div class="TitleFa"> {{ TitleFa }} </div>
                        <div class="TitleEn"> {{ TitleEn }} </div>
                    </div>
                    <img class="Image" :src="$_getPath('images/Global/Tiles/'+ImageURL)" :height="ImageHeight"/>
                </div>
                <div v-if="Quantity != ''" class="WM-Absolute En" :class="'WM-Font-'+QuantitySize" :style="'color:'+QuantityColor" style="line-height: 90px; left:0px; bottom:-8px; opacity:0.3">
                    {{ Quantity }}
                </div>
            </div>
        </div>
    <!-- </v-flex> -->
</template>

<script>
export default {
    props: {
        // Tile:TileData,
        TileClass: { default: "lg6 xs12" },
        TileHeight: { default: "230px" },
        // --------------------------------------------
        TitleFa: { default: " عنوان بخش " },
        TitleEn: { default: " Section Title " },
        // --------------------------------------------
        GradientDirection: { default: "to right" },
        GradientBegin: { default: "eeeeee" },
        GradientEnd: { default: "dadada" },
        // --------------------------------------------
        ImageURL: { default: "Alireza" },
        ImageHeight: { default: "180px" },
        // --------------------------------------------
        Quantity: { default: "" },
        QuantitySize: { default: "100" },
        QuantityColor: { default: "#000" },
    },
    computed: {
        TileData: function() {
            // Tile.Tile.Size = checkValue(Tile.Tile.Size,"lg6 xs12");
        }
    },
    methods: {
        checkValue(value, defaultValue) {
            return (value == undefined || value == null) ? value : defaultValue;
        }
    },
    data: function () {
        return {
            TagType: ( this.RouteType == 'Route' ) ? 'router-link' : 'a',
            RouteAddress: ( this.RouteType == 'Route' ) ? this.Route : false,
            URLAddress: ( this.RouteType == 'URL' ) ? this.URL : false,
        }
    }
};
</script>

<style scoped lang="scss">
    .WM-ImageTile {
        width:100%;
    }
    .WM-ImageTile.Shadowed {
        box-shadow: 0 10px 30px 0 rgba(0,0,0,.5);
        border-radius:5px;
    }
    .WM-ImageTile .TitleFa {
        font-size:30px;
        color: #000;
    }
    .WM-ImageTile .TitleEn {
        font-size:14px;
        color: #000;
        letter-spacing:15px;
        text-transform:uppercase;
    }

    .WM-ImageTile.Padd10{
        padding:10px;
    }
    .WM-ImageTile.Padd20{
        padding:20px;
    }
    .Content {
        padding-top:10px;
    }
    .Inline .TitleFa {
        margin-right:15px;
    }
    .Inline .Content {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-top:0px;
    }
    .Inline .Content .Info {
        text-align:right;
    }

</style>
