<template>
  <view
    class="k-textarea"
    :class="textareaClass"
    :style="{ minHeight: height + 'px' }"
  >
    <textarea
      class="k-textarea__field"
      :autoHeight="autoHeight"
      :placeholder="placeholder"
      :value="innerValue"
      :disabled="unEdit"
      :maxlength="maxlength"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @linechange="onLinechange"
      @confirm="onConfirm"
    >
    </textarea>
    <text class="k-textarea__count" v-if="count && maxlength !== -1"
      >{{ (innerValue && innerValue.length) || 0 }}/{{ maxlength }}</text
    >
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'k-text-area',
  props: {
    value: {
      type: String,
      default: '',
    },
    // 是否只读
    readonly: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 边框类型，surround-四周边框，bottom-底部边框
    border: {
      type: String,
      default: 'surround',
    },
    // 输入框为空时占位符
    placeholder: {
      type: String || Number,
      default: '请输入文本',
    },
    // 是否显示统计字数
    count: {
      type: Boolean,
      default: false,
    },
    // 最大输入长度，设置为 -1 的时候不限制最大长度
    maxlength: {
      type: [String, Number],
      default: 140,
    },
    //高度
    height: {
      type: Number,
      default: 125,
    },
    //是否自动增加高度
    autoHeight: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerValue: '',
      // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
      firstChange: true,
      // value绑定值的变化是由内部还是外部引起的
      changeFromInner: false,
    };
  },
  computed: {
    unEdit() {
      if (this.disabled == true || this.readonly == true) {
        return true;
      } else {
        return false;
      }
    },
    // 组件的类名
    textareaClass() {
      let classes: string[] = [],
        { border, disabled } = this;
      border === 'surround' && (classes = classes.concat(['k-border']));
      border === 'bottom' && (classes = classes.concat(['k-border-bottom']));
      disabled && classes.push('k-textarea--disabled');
      return classes.join(' ');
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        this.innerValue = newVal;
        /* #ifdef H5 */
        // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
        if (this.firstChange === false && this.changeFromInner === false) {
          this.valueChange();
        }
        /* #endif */
        this.firstChange = false;
        // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
        this.changeFromInner = false;
      },
    },
  },
  methods: {
    onFocus(e: any) {
      this.$emit('focus', e);
    },
    onBlur(e: any) {
      this.$emit('blur', e);
    },
    onLinechange(e: any) {
      this.$emit('linechange', e);
    },
    onConfirm(e: any) {
      this.$emit('confirm', e);
    },
    onInput(e: any) {
      let { value = '' } = e.detail || {};
      this.$nextTick(() => {
        this.innerValue = value;
        this.valueChange();
      });
    },
    valueChange() {
      const value = this.innerValue;
      this.$nextTick(() => {
        this.$emit('input', value);
        // 标识value值的变化是由内部引起的
        this.changeFromInner = true;
        this.$emit('change', value);
      });
    },
  },
});
</script>
<style lang="scss" scoped>
.k-border {
  border-width: 20px 15px;
  border-color: #fff;
  border-style: solid;
  border-radius: 0rpx;
}

.k-border-bottom {
  border-bottom-width: 0.5px;
  border-color: #fff;
  border-bottom-style: solid;
}

.k-textarea {
  background-color: #f4f7ff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  flex: 1;
  padding: 9px;
  padding-bottom: 22px;
  font-size: 16px;
  color: #333;

  &--disabled {
    color: #999;
  }

  &__field {
    width: 100%;
  }

  &__count {
    position: absolute;
    right: 8px;
    bottom: 5px;
    font-size: 15px;
    color: #999;
  }
}
</style>
