<template>
  <div class="Si-title">
    <div class="Si-left">
      <span class="Si-title__text">{{ title }}</span>
      <sub v-if="subTitle.length" class="Si-title__sub">{{ subTitle }}</sub>
    </div>
    <div v-if="rightText.length" class="Si-sub" @click.stop="rightClick">
      <span class="Si-sub__text">{{ rightText }}</span>
      <cr-icon type="arrow" size="14px" color="#999999" />
    </div>
  </div>
</template>

<script>
const RIGHT_CLICK = 'right-click';
export default {
  props: {
    title: {
      required: true,
      type: String
    },
    subTitle: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    }
  },
  methods: {
    rightClick() {
      this.$emit(RIGHT_CLICK);
    }
  }
};
</script>

<style lang="less" scoped>
.Si {
  &-title,
  &-title__text {
    .text-size(16);
    font-weight: bold;
    color: @black;
    letter-spacing: 0;
  }
  &-title {
    display: flex;
    justify-content: space-between;
    &__sub {
      .text-size(12);
      font-weight: bold;
      margin-left: 5px;
    }
  }

  &-sub {
    .text-size(12);
    color: @gray-4;
    display: flex;
    align-items: center;
  }
}
</style>
