<template>
    <div class="component-title" :style="{'background':data.bgColor,'text-align':showMethod}">
        <span class="main-title">{{data.title}}</span>
        <span class="second-title" v-if="data.showMethod!=1">| {{data.subTitle}}</span>
        <p class="second-title" v-else>{{data.subTitle}}</p>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            data: ''
        },
        data() {
            return {
                isbackground: false
            };
        },
        computed: {
            showMethod(){
                if (this.data.showMethod == 3) {
                    return 'left';
                } else if (this.data.showMethod == 1) {
                    return 'center';
                } else if (this.data.showMethod == 2) {
                    return 'right';
                }
            }
        }
    };
</script>