<template>
  <div>
    <el-popover ref="popover" v-model="visible" v-bind="bindProps()" @show="handlerShow" @hide="handlerHide">
      <!-- content -->
      <template v-slot:default>
        <div class="el-popover-title">
          <span>{{ content }}</span>
          <i class="el-icon-close" title="关闭"></i>
        </div>
        <el-input ref="textarea" :disabled="disabled" :style="{ height: height + 'px' }" v-model="inputContent"
                  type="textarea" :size="size"
                  @blur="popBlur" @input="handleInputChange"/>
      </template>

      <!-- reference -->
      <el-input slot="reference" :disabled="disabled" v-model="inputContent" :placeholder="placeholder" :size="size"
                @change="handleInputChange">
        <i slot="suffix" class="el-input__icon el-icon-full-screen" @click.stop="pop"></i>
      </el-input>
    </el-popover>

  </div>
</template>

<script>
import props, { PopverProps } from './Props'

/**
 * 支持放大输入的输入框
 *
 * - 示例
 *
 * ```vue
 * <ed-input-pop ref="elsInputPop" :title="title" :value="value" @change="handlerChange">
 * </ed-input-pop>
 * ```
 *
 * [](./EdInputPopProps.md ':include')
 *
 * [](./EdInputPopverProps.md ':include')
 */
export default {
  name: "EdInputPop",
  props: props,
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      visible: false,
      inputContent: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function () {
        if (this.value && this.value.length > 0) {
          this.inputContent = this.value;
        }
      }
    },
  },
  methods: {
    /**
     * 绑定属性
     * @private
     * @returns {any}
     */
    bindProps() {
      let props = Object.assign({}, this.$attrs, this.$props)
      Object.keys(PopverProps).map(key => {
        if (!Object.prototype.hasOwnProperty.call(props, key)) {
          delete props[key]
        }
      })
      return props
    },
    /**
     * 输入框内容改变时触发
     * @param event
     */
    handleInputChange(event) {
      /**
       * 调用父组件的change事件
       */
      this.$emit('change', event)
    },
    /**
     * 弹出放大的输入界面
     */
    pop() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.textarea.focus()
      })
    },
    /**
     * 关闭放大的输入界面
     */
    popBlur() {
      this.visible = false
    },

    /**
     * @name handlerShow
     * @description 弹出框显示时触发
     */
    handlerShow(){
      this.$emit('show')
    },

    /**
     * @name handlerHide
     * @description 隐藏时触发
     */
    handlerHide(){
      this.$emit('hide')
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/index";

::v-deep {

  .el-textarea__inner {
    width: 100%;
    padding: 0;
    height: 100%;
  }
}

.el-popover-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
</style>
