<template>
  <view class="cv-textarea-wrap" :class="{ 'cv-textarea__border': border }">
    <view class="cv-textarea__box">
      <textarea
        class="cv-textarea__content"
        v-model="localVal"
        :maxlength="maxlength"
        :placeholder="placeholder"
        placeholder-class="cv-textarea__placeholder"
        @input="funcOnInput"
        auto-height
        border
      />
    </view>

    <view class="cv-textarea__maxlength" v-if="maxlength >= 1">
      <text>{{ tempLength }}</text>
      /
      <text>{{ maxlength }}</text>
    </view>
  </view>
</template>

<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvTextArea',
  emits: ['input', 'update:modelValue'],
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    modelValue: {
      type: [Number, String],
      default: ''
    },
    placeholder: {
      type: [String],
      default: '请输入文本'
    },
    maxlength: {
      type: [Number, String],
      default: -1
    },
    clearable: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      localVal: '',
      tempLength: 0
    };
  },
  watch: {
    value(newVal) {
      this.localVal = newVal;
      this.tempLength = this.localVal.length;
    },
    modelValue(newVal) {
      this.localVal = newVal;
      this.tempLength = this.localVal.length;
    }
  },
  created() {
    this.localVal = this.doValueGet();
  },
  methods: {
    doValueGet() {
      if (this.value === '') return this.modelValue;
      if (this.modelValue === '') return this.value;
      return this.value;
    },
    funcOnInput(e) {
      this.tempLength = this.localVal.length;
      this.$emit('input', this.localVal);
      this.$emit('update:modelValue', this.localVal);
    },
    /* 监听自己清除按钮点击事件 */
    onEmpty() {
      this.localVal = '';
      this.funcOnInput();
    }
  }
};
</script>

<style>
.cv-textarea-wrap {
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 7px;
  align-items: stretch;
  align-content: flex-start;
  margin-top: 5px;
  margin-bottom: 5px;
}
.cv-textarea__box {
  flex: 1;
  font-size: 15px;
  color: #606266;
  width: 100%;
}
.cv-textarea__content {
  min-height: 65px;
  line-height: 1.5em;
  font-size: 15px;
  width: auto;
}
.cv-textarea__border {
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  padding-left: 10px;
}

.cv-textarea__maxlength {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  text-align: right;
  position: absolute;
  right: 5px;
  bottom: 2px;
  font-size: 12px;
  color: #909193;
  background-color: #fff;
  padding: 1px 4px;
}
.cv-textarea__placeholder {
  font-size: 14px;
}
</style>
