<template>
  <div class="header-search">
    <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
    <a-auto-complete
      ref="input"
      :getPopupContainer="e => {return e.parentNode || document.body}"
      :dataSource="dataSource"
      :class="['search-input', searchMode ? 'enter' : 'leave']"
      placeholder="站内搜索"
      @blur="leaveSearchMode"
    >
    </a-auto-complete>
  </div>
</template>

<script>
export default {
  name: 'HeaderSearch', // 组件名称 头部搜索
  data () {
    return {
      dataSource: ['选项一', '选项二'], // 数据源
      searchMode: false // 搜索模式
    }
  },
  methods: {
    enterSearchMode () { // 进入搜索模式
      this.searchMode = true // 设置搜索模式为true
      this.$emit('active', true) // 触发active事件
      setTimeout(() => this.$refs.input.focus(), 300) // 延迟300毫秒
    },
    leaveSearchMode () { // 离开搜索模式
      this.searchMode = false // 设置搜索模式为false
      setTimeout(() => this.$emit('active', false), 300) // 延迟300毫秒
    }
  }
}
</script>

<style lang="less">
  .header-search{
    .search-icon{
      font-size: 16px;
      cursor: pointer;
    }
    .search-input{
      border: 0;
      border-bottom: 1px solid @border-color-split;
      transition: width 0.3s ease-in-out;
      input{
        border: 0;
        box-shadow: 0 0 0 0;
      }
      &.leave{
        width: 0px;
        input{
          display: none;
        }
      }
      &.enter{
        width: 200px;
        input:focus{
          box-shadow: 0 0 0 0;
        }
      }
    }
  }
</style>
