<template>
  <div :class="['search-nav',{'search-nav-bg':!isPadding}]" @click="handleSearchclick" v-cloak>
      <span v-if="hasBack" class="search-back m-sys-backward" @click="handleBack"></span>
      <span
        ref="searchText"
        :class="[{'search-text-animation':focusClass && !hasBack && isPadding}, {'search-text-has-back': hasBack}, 'search-btn-center']"
        @click="handleSearchText"
      >
        <span :class="['iconfont', searchicon]" ref='searchIcon'></span>
        <span ref="placeholder" class="placeholder">{{searchInputContent}}</span>
      </span>
      <div ref="animation" :class="[{'search-input-animation':focusClass&&!hasBack && isPadding}, {'search-input-has-back': hasBack},'search-content', {'search-input-bg': !isPadding}]">
        <input
          type='text'
          v-model='inputValue'
          ref='searchInput'
          @input="handleChange"
          @focus='handleFocus'
          @blur='handleBlur'
          @keydown='onkeydown'
          v-if="isPadding"
        />
        <i class='iconfont sys-icon-guanbi-nomal' ref='cancelInput' @click='handleClear' v-if="isPadding"/>
      </div>
      <span
      :class="['search-button-cancel',{'search-btn-cancle-has-back': hasBack},{'search-btn-cancel-animation':focusClass&&!hasBack && isPadding}]"
      @click='handleCancel'
      ref="searchCancel" >
        {{ cancelText }}
    </span>
  </div>
</template>

<script>
  export default {
    name: 'search-nav',
    props:{
      'cancel-text': {
        default: "取消"
      },
      'placeholder': {
        default: "搜索"
      },
      'change': {
        type: Function,
        default: ()=>{}
      },
      'focus': {
        type: Function,
        default: ()=>{}
      },
      'blur': {
        type: Function,
        default: ()=>{}
      },
      'cancel': {
        type: Function,
        default: ()=>{}
      },
      'has-back':{
        type:Boolean,//是否显示返回按钮，两种形式展示
        default: false
      },
      'searchicon':{
        type: String,
        default: 'upaas-icon-search'
      },
      'is-padding':{
        type:Boolean,//是否显示整体的背景颜色
        default: true
      },
      'autofocus':{
        type: Boolean,//是否默认获取焦点
        default: false
      },
      'search-input-content':{
        type: String,
        default: '搜索'
      },
    },
    data(){
      return {
        inputValue: '',
        focusClass: false
      }
    },
    watch: {
      inputValue:function(value){
        if(value){
          this.$refs.cancelInput ? this.$refs.cancelInput.style.display = 'inline-block' :'';
        }else{
          this.$refs.cancelInput.style ? this.$refs.cancelInput.style.display = 'none' : '';
        }
      }
    },
    mounted () {
      var self = this;
      self.$refs.cancelInput ? self.$refs.cancelInput.style.display = 'none' : '';
      if(self.autofocus){
        setTimeout(function(){
          self.handleFocus();
        },0)
      }
    },
    methods: {
      //点击整个搜索框事件
      handleSearchclick(){
        this.$emit('handle-search-click');
      },
      //点击清空搜索字段
      handleClear(){
        this.inputValue = '';
        this.$emit('clear-input');
        this.$refs.placeholder.style.visibility = 'visible';
      },
      handleChange(evt){
        var self = this;
        self.change(evt,self.inputValue);
        self.$refs.placeholder.style.visibility = 'hidden';
        //if(self.inputValue){
           //self.$refs.placeholder.style.visibility = 'hidden';
        //}else{
           //self.$refs.placeholder.style.visibility = 'visible';
        //}
      },
      onkeydown(){
        var self = this;
        self.$refs.placeholder.style.visibility = 'hidden';
      },
      handleBlur(){
        this.$refs.searchIcon.style.cssText = "";
        // if(this.hasBack){
        //   this.$refs.placeholder.style.visibility = 'visible';
        // }
        this.blur();
      },
      handleFocus(){
        this.focusClass = true;
        this.focus();
        if(!this.inputValue){
           this.$refs.placeholder.style.visibility = 'visible';
        }
        this.$refs.searchInput && this.$refs.searchInput.focus();
      },
      handleCancel(){
        this.inputValue = '';
        this.$refs.searchInput && this.$refs.searchInput.blur();
        this.cancel();
      },
      handleSearchText(){
        this.handleFocus();
      },
      handleBack(){
        this.$emit('handle-back');
        this.inputValue = '';
        this.$refs.placeholder.style.visibility = 'visible';
      },
      setFocus(){
        this.$refs.searchInput && this.$refs.searchInput.focus();
      }
    }
  }
</script>
<style>
  .search-nav{
    padding: 10px;
    color: #9DA1A3;
    background:#f3f4f5;

  }
  .search-nav-bg{
    color: #fff;
    background: transparent;
    padding: 10px 20px;
    .iconfont:before{
      color: #fff;
    }
  }
  .search-content{
    flex:auto;
    background: #fff;
    border-radius: 14px;
    font-size:14px;
    color:#9da1a3;
    line-height: 28px;
    height: 28px;
    text-align:left;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    position: relative;
  }
  .search-input-bg{
    background: rgba(225,225,225,0.5);
    color: #fff;
  }
  .search-back{
    width: 24px;
    height: 28px;
    line-height: 28px !important;
    font-size: 24px;
    position:absolute;
    left: -20px;
    animation:hasbackMove 300ms infinite;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    animation-delay:0;
  }
  .search-text-has-back .iconfont{
    font-size: 14px;
  }
  .search-content .sys-icon-guanbi-nomal{
    position: absolute;
    right: 6px;
    top: 7px;
    z-index: 5;
  }
  .search-content input{
    flex:auto;
    margin-right: 15px;
    outline: none;
    height: 28px;
    z-index: 2;
    background: transparent;
    border: 0;
    line-height: 16px;;
    font-size: 16px;
    position: absolute;
    left: 40px;
    top: 0;
  }
  .search-button-cancel{
    font-size:16px;
    color:#1695f0;
    line-height:20px;
    text-align:center;
    flex: 0 0 48px;
    position: absolute;
    top: 13px;
    right: -38px;
    display: inline-block;
    width: inherit;
  }

  @keyframes cancelmove
  {
    from {right: -38px;}
    to {right: 12px;}
  }
  @keyframes textmove
  {
    from {
      //font-size: 16px;
    }
    to {
      //font-size: 14px;
      width: 85px;
    }
  }
  @keyframes inputmove
  {
    from {margin-right: 0px;padding: 10px; margin-left: 0;}
    to {margin-right: 60px;padding: 10px; margin-left: 0;}
  }
  @keyframes hasbackMove {
    from {
      left: -20px;
    }
    to {
      left: 12px;
    }
  }
  @keyframes hasbackInputMove{
    from {
      margin-left: 0;
    }
    to {
      margin-left: 36px;
    }
  }
  .search-btn-center{
    position: absolute;
    width: 100%;
    text-align: center;
    height: 28px;
    line-height: 28px;
    padding-right: 40px;
    font-size: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-btn-center .upaas-icon-search{
    display:inline;
  }
  .search-text{
    font-size:14px;
    color:#9da1a3;
    letter-spacing:-0.34px;
    line-height:20px;
    text-align:center;
  }
  .search-input-has-back{
    margin-right:52px;
    animation:hasbackInputMove 300ms infinite;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    animation-delay:0;
  }
  .search-btn-center .iconfont{
    font-size: 14px;
    position: absolute;
    left: 16px;
  }
  .search-text-has-back{
    width: 200px;
    animation:hasbackInputMove 300ms infinite;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    animation-delay:0;
  }
  .search-btn-cancle-has-back{
    right: 12px;
  }
  .search-text-animation{
    width: 123px;
  }
  .search-btn-cancel-animation{
    animation:cancelmove 280ms infinite;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    animation-delay:0;
  }
  .search-input-animation{
    animation:inputmove 280ms infinite;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
    animation-delay:0;

  }
  .placeholder{
    font-size: 15px;
    position: absolute;
    left: 40px;
    margin-left: 0;
  }
</style>
