<template>
  <div :class="'ipub-textarea ' + ipubClass">
    <textarea :class="['ipub-textarea__textarea data-hj-allow']"
              :value="value"
              @input="handleInput"
              :placeholder="placeholder"
              @focus="handleFocus"
              @blur="handleBlur"
              :disabled="disabled"
              :cols="autoSize.cols"
              :rows="autoSize.rows"></textarea>
  </div>
</template>

<script>
export default {
  name: 'IpubTextarea',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Please input'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autoSize: {
      type: Object,
      default () {
        return { cols: '', rows: '3' }
      }
    }
  },
  data () {
    return {
      isFocus: false,
    }
  },
  computed: {
    ipubClass () {
      let newClass = ''
      if (this.isFocus) {
        newClass += 'ipub-textarea--focus '
      }
      if (this.disabled) {
        newClass += 'ipub-textarea--disable '
      }
      return newClass
    }
  },
  methods: {
    handleInput ($event) {
      // 通过input标签的原生事件input将值emit出去，以达到值得改变实现双向绑定
      this.$emit('input', $event.target.value)
      this.val = $event.target.value
    },
    handleFocus (e) {
      this.isFocus = true
      this.$emit('focus', e)
    },
    handleBlur (e) {
      this.isFocus = false
      this.$emit('blur', e)
    },
  }
}
</script>

<style lang="scss" scoped>
.ipub-textarea {
  display: inline-block;
  font-family: $p_family;
  background: #fff;
  border-radius: 4px;
  border: 1px solid $border_color;
  transition: 0.3s all;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 0;
  .ipub-textarea__textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: $main_color;
    border: none;
    outline: none;
    line-height: 20px;
    padding: 12px;
    font-size: 14px;
  }
  &.ipub-textarea--disable {
    background: $disable_color;
  }
  &.ipub-textarea--focus {
    border: 1px solid $link_color;
  }
  .ipub-textarea__textarea::placeholder {
    color: $default_color;
  }
}
</style>
