<template>
  <!-- 大标题 小标题 文字  -->
  <div
    v-if="permission != 'n'"
    class="ht-text"
    :style="[
      textStyle,
      {
        '--smallTitleLineHeight': fontSize,
        '--smallTitlePosition':
          textAlign == 'left'
            ? 'flex-start'
            : textAlign == 'right'
            ? 'flex-end'
            : 'center',
      },
    ]"
    :class="[isMobile && ctrlType === 'small-title' ? 'smallTitleBg' : '']"
  >
    <slot name="tip"></slot>
    <span
      :class="[
        isMobile && ctrlType === 'small-title' ? 'small-title-line' : '',
      ]"
    >
      {{ doDecode(textValue) }}
    </span>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import { decode, isBase64 } from '@/util/base64'
  export default {
    name: 'HtText',
    mixins: [permission, mobileMode],
    props: {
      textValue: String,
      color: {
        type: String,
        default: '#666',
      },
      fontSize: {
        type: String,
        default: '12px',
      },
      fontWeight: {
        type: String,
        default: '400',
      },
      paddingTop: String,
      paddingBottom: String,
      paddingLeft: String,
      paddingRight: String,
      textAlign: {
        type: String,
        default: 'center',
        validator: (val) => {
          return ['left', 'center', 'right'].indexOf(val) > -1
        },
      },
      ctrlType: String,
    },
    computed: {
      textStyle() {
        return {
          color: this.color,
          fontSize: this.fontSize,
          textAlign: this.textAlign,
          fontWeight: this.fontWeight,
          paddingTop: this.paddingTop,
          paddingBottom: this.paddingBottom,
          paddingLeft: this.paddingLeft,
          paddingRight: this.paddingRight,
        }
      },
    },
    methods: {
      doDecode(value) {
        return isBase64(value) ? decode(value) : value
      },
    },
  }
</script>
<style lang="scss" scoped>
  .smallTitleBg {
    background: #f6f6f6;
  }
  .small-title-line {
    display: flex;
    align-items: center;
    justify-content: var(--smallTitlePosition);
  }
  .small-title-line::before {
    content: '';
    background-color: #409eff;
    width: 3px;
    height: var(--smallTitleLineHeight);
    margin-right: 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
</style>
