<template>
  <view class="ml-text" :class="[className || '', status ? `ss-${status}` : '', {'is-underline': underline}]" @tap="tapEvent">
    <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-text-left-icon">
      <ml-icon :className="prefixIcon"></ml-icon>
    </view>
    <view class="ml-text-content">
      <slot>{{ contentText }}</slot>
    </view>
    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-text-right-icon">
      <ml-icon :className="suffixIcon"></ml-icon>
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  name: 'MlText',
  options: {
    styleIsolation: 'shared'
  },
  props: {
    status: String,
    content: String,
    max: [Number, String],
    prefixIcon: String,
    suffixIcon: String,
    underline: Boolean,
    url: String,
    redirect: Boolean,
    className: String
  },
  computed: {
    contentText () {
      const str = String(this.content || '')
      if (this.max) {
        const maxNum = XEUtils.toNumber(this.max)
        if (maxNum < str.length) {
          return `${str.slice(0, maxNum)}...`
        }
      }
      return str
    }
  },
  methods: {
    tapEvent (evnt) {
      if (this.url) {
        if (this.redirect) {
          uni.redirectTo({
            url: this.url
          })
        } else {
          uni.navigateTo({
            url: this.url
          })
        }
      }
      this.$emit('tap', { $event: evnt })
      this.$emit('click', { $event: evnt })
    }
  }
}
</script>

<style lang="scss">
.ml-text {
  display: inline-flex;
  padding: 0 4rpx;
  &.is-underline {
    text-decoration: underline;
    // #ifdef H5
    cursor: pointer;
    // #endif
  }
  &.ss-primary {
    color: $ml-theme-primary-color;
  }
  &.ss-success {
    color: $ml-theme-success-color;
  }
  &.ss-info {
    color: #909399;
  }
  &.ss-warning {
    color: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: $ml-theme-error-color;
  }
  &.ss-gray {
    color: $ml-gray-color;
  }
  &.ss-blue {
    color: $ml-blue-color;
  }
  &.ss-green {
    color: $ml-green-color;
  }
  &.ss-pink {
    color: $ml-pink-color;
  }
  &.ss-red {
    color: $ml-red-color;
  }
  &.ss-orange {
    color: $ml-orange-color;
  }
  &.ss-purple {
    color: $ml-purple-color;
  }
  &.white {
    color: $ml-white-color;
  }
  .ml-text-left-icon,
  .ml-text-right-icon,
  .ml-text-content {
    display: inline;
  }
}
</style>
