<template>
  <view :style="rootStyle" :class="className" class="cu-bar foot input">
    <input
      @focus="inputFocus"
      @blur="inputBlur"
      @input="input"
      @confirm="sendClick"
      :value="value"
      :adjust-position="false"
      :enableNative="false"
      :focus="false"
      :placeholder="placeholder"
      :disabled="inputDisabled"
      :confirm-hold="confirmHold"
      cursor-spacing="10"
      class="solid-bottom"
      confirm-type="send"
      type="text"
    />
    <slot name="action">
      <button @click="sendClick" :disabled="buttonDisabled" class="cu-btn bg-green shadow">发送</button>
    </slot>
  </view>
</template>

<script>
export default {
  name: 'l-chat-input',

  props: {
    value: {},
    placeholder: {},
    inputDisabled: {},
    buttonDisabled: {},
    confirmHold: {}
  },

  data() {
    return { inputBottom: 0 }
  },

  methods: {
    input(e) {
      this.$emit('input', e.detail.value)
      this.$emit('change', e.detail.value)
    },

    inputFocus(e) {
      if (e && e.detail && e.detail.height) {
        this.inputBottom = e.detail.height
      }
      this.$emit('focus')
    },

    inputBlur(e) {
      this.inputBottom = 0
      this.$emit('blur')
    },

    sendClick(e) {
      this.$emit('sendMsg', this.value)
    }
  },

  computed: {
    rootStyle() {
      return this.getStyle({ bottom: this.inputBottom + 'px' })
      // return this.getStyle({ bottom: '0px' })
    }
  }
}
</script>
