<!--
  @description: input组件二次封装
  @author: 肖文龙
-->
<template>
  <div class="inline">
    <el-input
      :value="value"
      v-bind="$attrs"
      :maxlength="inputLenData[gxMaxlength]"
      :show-word-limit="showWordLimit"
      :placeholder="placeholder || inputPlaceholderData[gxPlaceholder]"
      :class="showWordLimit?'show-word-limit-padding': ''"
      v-on="$listeners"
      @input="onInput"
    >
      <el-button v-if="typeMore.type==='more'" slot="append" icon="iconfont icon-sshaixuan" @click="onOpen" />
    </el-input>
    <moreSearchDialog :more-search-dialog-data="moreSearchDialogData" v-on="$listeners" />
  </div>
</template>

<script>
// 输入框长度限制
import { inputLenData, inputPlaceholderData } from './GXinputLenMixin'
// 多值查询弹框
import moreSearchDialog from './moreSearch-dialog'
export default {
  name: 'GXinput',
  components: {
    moreSearchDialog
  },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    // input校验长度类型
    gxMaxlength: {
      type: String,
      default: ''
    },
    // input占位符提示文字
    gxPlaceholder: {
      type: String,
      default: ''
    },
    // 展示字数统计
    showWordLimit: {
      type: Boolean,
      default: true
    },
    // 多值查询
    typeMore: {
      type: Object,
      default: function() {
        return {
          type: 'one', // more多值查询 one默认
          attr: '' // 多值查询必穿属性
        }
      }
    }
  },
  data() {
    return {
      inputLenData: inputLenData, // input最大长度
      inputPlaceholderData: inputPlaceholderData, // input Placeholder提示
      // 多值查询弹框数据
      moreSearchDialogData: {
        dialogVisible: false,
        attr: '' // 多值查询必穿属性
      }
    }
  },
  watch: {
    gxPlaceholder(val) {
    }
  },
  methods: {
    onInput(value) {
      this.$emit('input', value)
    },
    onOpen() {
      this.moreSearchDialogData.attr = this.typeMore.attr
      this.moreSearchDialogData.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.inline{
  display: inline-block;
  width: 100%;
}
</style>
