<!--
	作者：yangzhijie1488@163.com
	时间：2017-12-07
	描述：查询组件
-->
<template>
  <div class="m-container">
    <div class="input-group">
      <input v-model="searchText" type="text" class="form-control" :placeholder="placeholderText" @keyup.enter="search" />
      <span class="input-group-btn">
        <button style="width:100%;" type="button" class="btn btn-blue search-button" @click="search()">
          查询
        </button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  // props: ['placeholderText'],
  props: {
    placeholderText: {
      type: String,
      default: null,
    },
  },

  emits: ['valueChanged','search'],
		
  data: function(){
    return {
      'searchText': undefined,
    };
  },
		
  watch: {
    'searchText' : function(curVal, oldVal){
      this.$emit('valueChanged', curVal);
    },
  },
		
  methods: {
    /**
			 * 查询
			 */
    search: function(){
      this.$emit('search', this.searchText);
    },
			
    /**
			 * 获取查询的文字
			 */
    getSearchText: function(){
      return this.searchText;
    },
			
    /**
			 * 设置查询的文字
			 * @param {Object} value
			 */
    setSearchText: function(value){
      this.searchText = value;
    },
  },
};
</script>

<style scoped>
	button{
		background-color: #007aff;
		color: white;
	}
</style>