<template>
  <div class="header-search">
    <div class="btn-group">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">
        添加
      </el-button>
      <el-button
        icon="el-icon-delete"
        :disabled="deldisabled"
        @click="handleDel"
      >
        删除
      </el-button>
    </div>

    <div class="search-input">
      <el-input
        v-model="searchKey"
        clearable
        :placeholder="searchTips"
        @focus="handleFocus"
        @blur="handleBlur"
        @keyup.enter.native="searchByKey"
      ></el-input>
      <i
        ref="icon"
        class="iconfont icon-flow-center-search"
        @click="searchByKey"
      ></i>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'HeaderSearch',
    props: {
      searchTips: {
        type: String,
        default: '请输入关键词进行检索',
      },
      deldisabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        searchKey: '',
      }
    },
    computed: {
      ...mapGetters({
        themeColor: 'settings/themeColor',
      }),
    },
    methods: {
      handleAdd() {
        this.$emit('handle-add')
      },
      handleDel() {
        this.$emit('handle-del')
      },
      searchByKey() {
        this.$emit('search-by-key', this.searchKey)
      },
      handleFocus() {
        this.$refs.icon.style.color = this.themeColor
      },
      handleBlur() {
        this.$refs.icon.style.color = '#c0c4cc'
      },
    },
  }
</script>

<style lang="scss" scoped>
  .header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px;
    ::v-deep .el-input {
      width: 268px;
      .el-input__inner {
        padding-right: 60px;
      }
      .el-input__suffix {
        right: 30px;
      }
    }
    .search-input {
      position: relative;
      .iconfont {
        font-size: 14px;
        width: 30px;
        height: 32px;
        line-height: 32px;
        position: absolute;
        top: 0px;
        right: 0px;
        color: #c0c4cc;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
