<template>
  <div class="search-group">
    <el-row :gutter="20" type="flex" :justify="justify" class="search-group-row">
      <slot />
      <el-col :span="span" :offset="offset">
        <div class="keyword-box">
          <el-input
            :placeholder="placeholder ? placeholder : '请输入关键字'"
            class="keyword-ipt"
            :value="value"
            @input="updataValue"
            @keyup.enter.native="onEnter"
          >
            <div slot="suffix" class="suffix cursor-pointer" @click="onEnter">
              <i class="el-icon-search icon-search" />
            </div>
          </el-input>
<!--          <el-button v-if="showReset" plain type="primary" class="search-btn" @click="onReset">{{ '重置' }}</el-button>-->
<!--          <el-button type="primary" class="search-btn" @click="onEnter">{{ '确定'}}</el-button>-->
        </div>
      </el-col>
      <slot name="last" />
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    justify: {
      default: 'start'
    },
    span: {
      type: Number,
      default: 8
    },
    offset: {
      type: Number,
      default: 0
    },
    showReset: {
      type: Boolean,
      default: true
    },
    value: String,
    placeholder: String
  },
  methods: {
    updataValue(val) {
      this.$emit('input', val)
    },
    onEnter() {
      this.$emit('search')
    },
    onReset() {
      this.$emit('reset')
      const itemList = this.$children[0].$children
      itemList.forEach(item => {
        if (Object.hasOwnProperty.call(item, 'resetValue') &&
          Object.prototype.toString.call(item.resetValue) === '[object Function]') {
          item.resetValue()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.search-group {
  .keyword-box {
    display: flex;
    align-items: center;
  }
  .search-btn {
    //  width: 100%;
    margin-left: 20px;
  }
  .suffix {
    position: relative;
    top: 8px;
  }
  .icon-search {
    font-size: 18px;
    cursor: pointer;
    color: #42b983;
  }
  .el-input__suffix {
    padding-right: 5px;
  }
  .keyword-ipt {
    flex: 1;
    border-radius: 10px;
  }
  .search-group-row {
    flex-wrap: wrap;
  }
}
</style>
