text: import { use } from '../utils';
  import Field from '../field';
  
  const [sfc, bem, t] = use('search');
  
  export default sfc({
    inheritAttrs: false,
  
    props: {
      value: String,
      label: String,
      showAction: Boolean,
      shape: {
        type: String,
        default: 'square'
      },
      background: {
        type: String,
        default: '#ffffff'
      }
    },
  
    computed: {
      listeners() {
        return {
          ...this.$listeners,
          input: this.onInput,
          keypress: this.onKeypress
        };
      }
    },
  
    methods: {
      onInput(value) {
        this.$emit('input', value);
      },
  
      onKeypress(event) {
        // press enter
        if (event.keyCode === 13) {
          event.preventDefault();
          this.$emit('search', this.value);
        }
        this.$emit('keypress', event);
      },
  
      onBack() {
        this.$emit('input', '');
        this.$emit('cancel');
      },
  
      renderLabel() {
        return this.slots('label')
          ? this.slots('label')
          : this.label && (<div class={bem('label')}>{this.label}</div>);
      }
    },
  
    render(h) {
      const { showAction } = this;
  
      const props = {
        attrs: this.$attrs,
        on: this.listeners
      };
  
      const scopedSlots = {};
      if (this.slots('left-icon')) {
        scopedSlots['left-icon'] = () => this.slots('left-icon');
      }
  
      return (
        <div class={bem({ 'show-action': showAction })} style={{ background: this.background }}>
          <div class={bem('content', [this.shape])}>
            {this.renderLabel()}
            <Field
              clearable
              type="search"
              value={this.value}
              border={false}
              leftIcon="search"
              scopedSlots={scopedSlots}
              {...props}
            >
            </Field>
          </div>
          {showAction && (
            <div class={bem('action')}>
              {this.slots('action') || <div onClick={this.onBack}>{t('cancel')}</div>}
            </div>
          )}
        </div>
      );
    }
  });
  