<template>
  <view v-if="isFromReadonly" class="ml-textarea is-readonly" :class="[className || '', {'is-right': align === 'right'}]">
    <view class="ml-textarea-readonly-content">{{ inpVal }}</view>
  </view>
  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-textarea not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
    <view class="ml-textarea-simulate" :style="{color: fontColor, height: `${rows * 30}rpx`}">
      <text v-if="inpVal">{{ inpVal }}</text>
      <text v-else class="ml-textarea-placeholder">{{ translate(placeholder) }}</text>
    </view>
    <view v-if="showWordLimit && !disabled" class="ml-textarea-word-count">
      <view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
    </view>
  </view>
  <view v-else class="ml-textarea" :class="[className || '', {'is-border': border, 'is-disabled': disabled}]">
    <view>
      <textarea
        class="ml-textarea-inp"
        v-model="inpVal"
        :rows="rows"
        :maxlength="maxLength"
        :placeholder="translate(placeholder)"
        :disabled="disabled"
        :show-count="false"
        @input="inputEvent"
        @focus="focusEvent"
        @blur="blurEvent"
        :style="{color: fontColor, height: `${rows * 30}rpx`}" />
      <view v-if="showWordLimit && !disabled" class="ml-textarea-word-count">
        <view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import MaliUtils from '../../../utils'
import MaliI18n from '../../../i18n/i18n'
import XEUtils from 'xe-utils'

export default {
  name: 'MlTextarea',
  options: {
    virtualHost: true
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    border: Boolean,
    disabled: Boolean,
    rows: {
      type: [Number, String],
      default: 3
    },
    maxLength: {
      type: Number,
      default: 200
    },
    placeholder: {
      type: String,
      default: 'ml.base.pleaseInput'
    },
    showWordLimit: {
      type: Boolean,
      default: true
    },
    editable: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    showVoice: Boolean,
    fontColor: String,
    className: String
  },
  inject: {
    form: {
      from: 'mlForm',
      default: null
    }
  },
  data () {
    return {
      platformEnv: MaliUtils.getPlatformEnv(),
      inpVal: ''
    }
  },
  computed: {
    isFromReadonly () {
      if (this.readonly) {
        return true
      }
      return this.form ? this.form.readonly : false
    }
  },
  watch: {
    value (val) {
      this.inpVal = XEUtils.toValueString(val)
    }
  },
  created () {
    this.inpVal = XEUtils.toValueString(this.value)
  },
  methods: {
    translate: MaliI18n.t,
    inputEvent () {
      let value = this.inpVal
      if (this.maxLength && value && value.length > this.maxLength) {
        value = value.slice(0, this.maxLength)
      }
      this.$emit('input', value)
      this.$emit('change', { value })
    },
    focusEvent () {
      this.$emit('focus', { value: this.inpVal })
    },
    blurEvent () {
      this.$emit('blur', { value: this.inpVal })
    }
  }
}
</script>

<style lang="scss">
.ml-textarea {
  display: block;
  width: 100%;
  padding: 0 10rpx;
  background: #fff;
  .ml-textarea-placeholder {
    color: $ml-input-color-placeholder;;
  }
  .ml-textarea-simulate {
    background: #ffffff;
    white-space: pre-wrap;
    overflow: auto;
  }
  &.is-border {
    border: 1px solid #e5e5e5;
    border-radius: $ml-border-radius;
  }
  .ml-textarea-readonly-content {
    padding: 0;
  }
  .ml-textarea-content {
    width: 100%;
    overflow: auto;
    word-break: break-all;
  }
  .ml-textarea-inp {
    outline: 0;
    border: 0;
  }
  .ml-textarea-inp,
  .ml-textarea-simulate {
    padding: 0;
    height: 280rpx;
    width: 100%;
    font-size: $ml-base-font-size;
  }
  .ml-textarea-word-count {
    padding-top: 10rpx;
    display: flex;
  }
  .ml-textarea-word-numbers {
    flex-grow: 1;
    color: #999999;
    text-align: right;
    font-size: $ml-describe-font-size;
  }
}
</style>
