<template>
  <div class="search_input el-input el-input--small">
    <input
      v-model="value"
      type="text"
      placeholder="请输入搜索内容"
      class="el-input__inner"
    />
    <i class="el-icon-search" title="搜索" />
  </div>
</template>

<script>
export default {
  data: () => ({ value: '' }),

  watch: {
    '$attrs.value': {
      immediate: true,
      handler (v) {
        this.value = v
      }
    },

    value (v) {
      this.$emit('input', v)
    }
  }
}
</script>

<style lang="scss">
.search_input {
  .el-input__inner {
    padding-right: 51px;
  }

  .el-icon-search {
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    font-size: 18px;
    background-color: $--color-primary;
    cursor: pointer;
  }
}
</style>
