<template>
  <div class="QdmSearch" :class="inline ? 'inline' : ''">
    <el-input
    	:class="col"
    	:placeholder="placeholder"
    	v-model="inputValue"
    	class="input-with-select"
    	@keyup.enter.native="keyupEnter"
    	@change="inputChange">
      <template v-slot:append>
        <el-button @click="inputChange">{{ name }}</el-button>
      </template>
	  </el-input>
  </div>
</template>
<script>
export default {
  name: "QdmSearch",
  props: {
    name: {
      type: String,
      default: ''
    },
    value: {
      type: [ Number, String ],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    inline: {
      type: Boolean,
      default: false
    },
    col: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  methods: {
    inputChange() {
      this.$emit('inputReturn', this.inputValue)
    },
    keyupEnter() {
    	this.$emit('keyupEnterReturn')
    }
  }
}
</script>
<style lang="less">
.inline {
  float: left;
}
.QdmSearch {
  margin-right: 10px;
  margin-bottom: 8px;
  height: 30px;
  .el-input {
  	border-radius: 4px;
  	&.large {
		  width: 370px;
		}
		&.small {
		  width: 218px;
		}
		&.mini {
		  width: 160px;
		}
		.el-input__inner {
			height: 30px;
      line-height: 30px;
		}
  }
  .el-button {
  	padding: 12px 16px;
  	>span {
  		color: #333;
  	}
  }
}
</style>