<template>
  <div class="QuickQuery">
    <el-input clearable v-model="searchKey" @keyup.enter.native="quickSearch" :title="placeholder" :placeholder="placeholder">
      <span slot="append" @click="quickSearch">搜索</span>
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'QuickQuery',
  props: {
    placeholder: {
      type: String,
      default: ''
    },

    items: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      searchKey: ''
    }
  },
  methods: {
    // 单个搜索
    quickSearch() {
      const data = {
        searchData: this.searchKey
      }
      this.$emit('quickSearch', data)
    },
    quickReset() {
      this.searchKey = ''
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .red {
    color: #ff0f0f !important;
  }

  .SortButton {
    font-size: 12px;
    color: $tc1;
    background: $bc2;
    margin-top: 20px;
    .btn {
      display: flex;
      padding: 10px;
      cursor: pointer;
    }
    .selected {
      border: 1px solid $bc4;
      border-right: 1px solid #ff0f0f !important;
    }
    .name {
      display: inline;
      padding-right: 5px;
    }
    .icons {
      display: flex;
      flex-direction: column;
      padding: 0 5px;
      i {
        display: inline-block;
        height: 6px;
        width: 8px;
        color: #999;
      }
    }
  }
</style>
