<template>
  <div class="m-search-row" :style="searchStyle">
    <div :class="[ isFocus ? 'focus-box' : '', type === 'map' ? 'search-map': 'input-box' ]">
      <div :class="[ 'pre-icon', placeholderAlign === 'center' ? 'icon-center' : '' ]">
        <h-icon type="fangdajing"/>
        <span class="placeholder" v-if="!inputValue">{{ placeholder}}</span>
      </div>
      <input
        v-model="inputValue"
        ref="searchinput"
        class="input" 
        @focus="handleFocus"
        @blur="handleBlur"
        @input="handleInput"
        @keypress="handleKeyPress"
        @keydown="handleKeyDown"
        @keyup="handleKeyUp"
        @keypress.enter="handleEnter"
      />
    </div>
    <div :class="[ 'input-suffix', type === 'map' ? 'input-suffix-map': '' ]" v-if="type === 'btn' || ( type === 'map' && isFocus )" @click="handleClick">
      <button class="suffix-btn">{{btnText}}</button>
    </div>
    <div v-if="type==='car'" class="suffix-car" @click="handleClick">
      <img class="shopcard" src="http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_9309f8a3-b399-405a-866c-7c36c1d550271551323120309.png"/>
      <h-info v-if="cartCount" :info="cartCount"/>
    </div>
  </div>
</template>

<script>
  import hIcon from '../icon/index';
  import hInfo from '../info/index';

  export default {
    name: "h-search",
    components: {
      hIcon,
      hInfo
    },
    props: {
      searchStyle:{
        type:Object,
        default:function () {
          return {}
        }
      },
      icon:{
        type:String,
        default:'fangdajing'
      },
      placeholder: {
        type:String,
        default:'搜索商品'
      },
      placeholderAlign: {
        type:String,
        default:''
      },
      btnText: {
        type:String,
        default:'搜索'
      },
      type: {
        type:String,
        default:'line'
      },
      value: String,
      cartCount: [String,Number],
      exerciseLeft: { // 是否有获取焦点，placeholder 左移的效果，暂未实现
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        isFocus: false,
        inputValue: this.value
      }
    },
    watch: {
      inputValue( newV ) {
        this.$emit( 'update:value', newV );
        this.$emit('change', newV);
      },
      value(newV) {
        this.inputValue = newV;
      }
    },
    methods: {
      handleFocus( e ) {
        this.isFocus = true;
        this.$emit( 'focus', e );
      },
      handleBlur(e) {
        if ( !this.inputValue ) {
          this.isFocus = false;
        }
        this.$emit( 'blur', e );
      },
      handleInput( e ) {
        this.$emit('input', e.target.value);
      },
      handleKeyPress( e ) {
        this.$emit('keypress', e);
      },
      handleKeyDown( e ) {
        this.$emit('keydown', e);
      },
      handleKeyUp( e ) {
        this.$emit('keyup', e);
      },
      handleEnter( e ) {
        this.$emit('enter', e);
      },
      handleClick(e) {
        this.$refs.searchinput.blur();
        this.$emit('click', e);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
