<template>
  <!-- 该组件用于带图标的只读标签和内容,类似rt-text-readonly -->
  <div class="rt-icon-text-readonly-box">
    <rt-icon
      :name="iconname"
      :size="iconsize"
      v-show="iconname!=''"
      class="rt-icon-text-readonly-label"
    ></rt-icon>
    <span v-if="label!=''" :style="labelstyle" class="rt-icon-text-readonly-label">{{ label }}</span>
    <span :style="styles">
      <span :style="textstyle" class="textclassstyle">{{ text }}</span>
    </span>
  </div>
</template>
<script>
export default {
  name: 'RtIconTextReadonly',
  props: {
    text: {
      type: [String, Number]
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    textsize: {
      type: String || Number,
      default: '13'
    },
    textcolor: {
      type: String,
      default: '#222222'
    },
    label: {
      type: String,
      default: ''
    },
    labelsize: {
      type: String || Number,
      default: '13'
    },
    labelcolor: {
      type: String,
      default: '#888888'
    },
    iconname: {
      type: String,
      default: ''
    },
    iconsize: {
      type: String || Number,
      default: '14'
    }
  },
  computed: {
    hasLabel() {
      return !!this.label;
    },
    styles() {
      return this.label
        ? {
            textAlign: this.textAlign
          }
        : {
            textAlign: this.textAlign,
            width: '100%'
          };
    },
    labelstyle() {
      return { fontSize: `${this.labelsize}` + 'px', color: this.labelcolor };
    },
    textstyle() {
      return { fontSize: `${this.textsize}` + 'px', color: this.textcolor };
    }
  }
};
</script>
<style lang="less" scoped>
.rt-icon-text-readonly-box {
  display: flex;
  align-items: center;
}
.rt-icon-text-readonly-label {
  padding-right: 5px;
}
.textclassstyle {
  display: flex;
  word-wrap: break-word;
}
</style>
