<template>
  <div class="rt-attr">
    <div v-if="hasIcon" class="rt-attr__icon">
      <slot name="icon">
        <rt-icon :name="icon" color="#53A4FC" :size="iconSize"></rt-icon>
      </slot>
    </div>
    <div v-if="hasLabel" :class="labelClass">
      <slot name="label">
        <span>{{ label }}</span>
      </slot>
    </div>
    <div :class="textClass">
      <slot>
        <span>{{ text }}</span>
      </slot>
    </div>
    <a class="rt-attr-tel" v-if="hasTel" href="javascript:;" @click="dial(tel)">
      <rt-icon name="rt-sfa-cellphone" color="#53A4FC" size="14" class="rt-attr__icon"></rt-icon>
      <span>{{ tel | phonenumber }}</span>
    </a>
  </div>
</template>
<script>
import dial from '../../mixins/dial';
const TYPELIST = ['primary', 'sub', 'danger', 'success', 'number', 'default', 'white'];
const SIZELIST = ['small', 'middle', 'large', 'default'];
export default {
  name: 'rtAttr',
  mixins: [dial],
  props: {
    text: [String, Number],
    label: String,
    tel: String,
    type: {
      validator(value) {
        return rt.oneOf(value, TYPELIST);
      },
      default: 'default'
    },
    size: {
      validator(value) {
        return rt.oneOf(value, SIZELIST);
      },
      default: 'default'
    },
    labelType: {
      validator(value) {
        return rt.oneOf(value, TYPELIST) || !value;
      },
      default: ''
    },
    labelSize: {
      validator(value) {
        return rt.oneOf(value, SIZELIST) || !value;
      },
      default: ''
    },
    textType: {
      validator(value) {
        return rt.oneOf(value, TYPELIST) || !value;
      },
      default: ''
    },
    textSize: {
      validator(value) {
        return rt.oneOf(value, SIZELIST) || !value;
      },
      default: ''
    },
    icon: String,
    iconSize: {
      type: [String, Number],
      default: 14
    },
    ellipsis: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    hasTel() {
      return this.tel;
    },
    hasIcon() {
      let { icon } = this;
      return icon || this.$slots.icon;
    },
    hasLabel() {
      let { label } = this;
      return label || this.$slots.label;
    },
    labelClass() {
      let { labelType, labelSize, type, size } = this;

      return ['rt-attr__label', `rt-attr__label--${labelType || type}`, `rt-attr__label--${labelSize || size}`];
    },
    textClass() {
      let { textType, textSize, type, size } = this;
      return [
        'rt-attr__text',
        `rt-attr__text--${textType || type}`,
        {
          [`rt-attr__text--${textSize || (size === 'default' ? '' : size)}`]: textSize || size !== 'default',
          'is-ellipsis': this.ellipsis
        }
      ];
    }
  },
  filters: {
    phonenumber: function(value) {
      let start = value.slice(0, 3);
      let end = value.slice(-4);
      return `${start}****${end}`;
    }
  }
};
</script>
<style lang="less">
.rt-attr {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  color: #555;
  font-size: 13px;
  line-height: 20px;
  a.rt-attr-tel {
    display: inline-flex;
    align-items: center;
    line-height: 20px;
    color: #888;
    font-size: 12px;
  }
  color: #888;
  font-size: 13px;
  .rt-attr__icon {
    margin-right: 5px;
    line-height: 1;
    margin-top: 3px;
  }
  .rt-attr__label {
    margin-right: 4px;
    white-space: nowrap;
  }
  .rt-attr__text {
    word-break: break-all;
    &.is-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .rt-attr__label--sub,
  .rt-attr__text--sub {
    font-size: 12px;
  }
  .rt-attr__label--danger,
  .rt-attr__text--danger {
    color: red;
  }
  .rt-attr__label--number,
  .rt-attr__text--number {
    color: #ffa424;
  }
  .rt-attr__label--success,
  .rt-attr__text--success {
    color: #53a4fc;
  }
  .rt-attr__label--small,
  .rt-attr__text--small {
    font-size: 12px;
  }
  .rt-attr__label--middle,
  .rt-attr__text--middle {
    font-size: 15px;
  }
  .rt-attr__label--large,
  .rt-attr__text--large {
    font-size: 20px;
  }
  .rt-attr__text--primary {
    color: #222222;
  }
  .rt-attr__text--white {
    color: #cccccc;
  }
}
</style>
