<!--
 * @Author: your name
 * @Date: 2021-04-26 12:55:21
 * @LastEditTime: 2021-05-25 16:41:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mt-bus-fe\src\views\material-manage\report\components\search-bar.vue
-->
<template>
  <div class="container">
    <span class="label-name">{{ $t('module.materialManager.report.Keyword') }}</span>
    <el-input
      v-model="key"
      :placeholder="$t('module.materialManager.report.placeholderkeywords')"
      :clearable="true"
      :style="{
        width: inputWidth + 'px',
        maxWidth: '100%',
        marginRight: '16px'
      }"
    />
    <el-button type="primary" icon="el-icon-search" @click="handleSearch()">
      {{ "btn.search" | i18nFilter }}
    </el-button>
  </div>
</template>
<script>
export default {
  props: {
    showTime: {
      type: Boolean,
      default: false
    },
    lableName: {
      type: String,
      default: '关键字'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    inputWidth: {
      type: Number,
      default: 180
    }
  },
  data() {
    return {
      key: '',
      dts: ['', '']
    }
  },
  methods: {
    handleSearch() {
      const param = {
        key: this.key
      }
      this.$emit('on-search', param)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 4px 40px;
  background-color: #eee;
  .label-name {
    margin-right: 8px;
    font-size: 14px;
  }
}
</style>
