<template>
    <div class="SectionTitle WM-Width-100">
        <h4 class="TitleFa WM-Align-R" v-text="TitleFa"></h4>
        <div class="TitleEn WM-Flex">
            <span :class="Color" v-text="TitleEn"></span>
            <div class="Line">
                <div class="inner" :class="Color"></div>
            </div>
        </div>
    </div>
<!-- .SectionTitle
    h4.TitleFa(v-text="TitleFa")
    div.TitleEn.d-flex
        span(v-text="TitleEn" :class="Color")
        .Line
            .inner(:class="Color") -->
</template>

<script>
export default {
    props: {
        TitleFa: { default: "عنوان بخش" },
        TitleEn: { default: "Part Title" },
        ThemeColor: { default: "Red" }
    },
    data: function ()  {
        return {
            Color: 'WM-BG-' + this.ThemeColor,
        }
    },
    //
    // data() {
    //     return {
    //         Color,
    //     }
    // },
    // created : function ( ) {
    //     this.Color = 'WM-BG-' + this.ThemeColor;
    // }

};
</script>
