<template>
  <div class="e-title"
    :titleType="titleType"
    >
    <div class="e-title__wrap">
      <em v-if="title">{{ title }}</em>
      <span class="e-title__l" v-if="leftHref"><a :href="leftHref">{{ leftText }}</a></span>
      <span class="e-title__l" v-else>{{ leftText }}</span>
      <span class="e-title__r" v-if="rightHref"><a :href="rightHref">{{ rightText }}</a></span>
      <span class="e-title__r" v-else>{{ rightText }}</span>
      <slot name="extra"></slot>
    </div>
    <p class="e-title__decs" v-if="titleDecs">{{ titleDecs }}</p>
    <slot></slot>
  </div>
</template>
<script>
  export default{
    name:'emmm-title',
    props:{
      title:{
        type:String,
        default:null
      },
      leftText:{
        type:String,
        default:null
      },
      leftHref:{
        type:String,
        default:null
      },
      rightText:{
        type:String,
        default:null
      },
      rightHref:{
        type:String,
        default:null
      },
      titleType:{
        type:String,
        default:"h1"
      },
      titleDecs:{
        type:String,
        default:null
      }
    }
  }
</script>
<style lang="postcss" scoped>
  @import './title.css';
</style>
