text: /**
   * @file 搜索框组件
   * @author jingxiangzheng(jingxiangzheng@baidu.com)
   */
  /* globals Component, swan */
  import {systemInfo} from '../../common/utils/index';
  
  Component({
      externalClasses: [
          'search-bar-class',
          'search-bar-content-class',
          'search-icon-class',
          'search-input-class',
          'search-text-class'
      ],
      properties: {
          /**
           * 搜索框主题样式：
           * default为搜索框灰色填充主题
           * border为搜索框描边主题
           * white为搜索框白色填充主题
           * transparent为搜索框透明主题
           */
          theme: {
              type: String,
              value: ''
          },
          placeholder: {
              type: String,
              value: '搜索关键词'
          },
          placeholderClass: {
              type: String,
              value: ''
          },
          placeholderStyle: {
              type: String,
              value: ''
          },
          // 搜索icon的颜色
          searchIconColor: {
              type: String,
              value: '#999'
          },
          // 键盘右下角按钮文字
          confirmType: {
              type: String,
              value: 'search'
          },
          // 搜索框内容
          value: {
              type: String,
              value: ''
          },
          // 聚焦，调起输入键盘
          focus: {
              type: Boolean,
              value: false,
              observer(n) {
                  n && this.setFocus();
              }
          },
          // 最外层容器的样式，但theme权重大于该样式
          containerStyle: {
              type: Object,
              value: {
                  background: '#f4f5f6',
                  opacity: 1
              }
          },
          // 内层搜索容器的样式
          contentStyle: {
              type: Object,
              value: {
                  width: 688.41,
                  minWidth: 218
              }
          },
          // 配置预置词，优先级高于placeholder
          presetWord: {
              type: String,
              value: '',
              observer(n) {
                  this.setData('placeholder', n);
              }
          }
      },
  
      data: {
          platform: systemInfo.platform,
          searchKeyWord: ''
      },
  
      observers: {
          'value,presetWord'(value, presetWord) {
              this.setData({
                  searchKeyWord: value || presetWord
              });
          }
      },
      methods: {
  
          /**
           * 聚焦处理
           *
           * @param {Event} e 事件对象
           * @param {Object} e.detail 获取value值
           */
          focusHdl({detail}) {
              this.setFocus();
              this.triggerEvent('focus', detail);
          },
  
          /**
           * focus为true时，对应的状态
           */
          setFocus() {
              this.setData({
                  showSearchBtn: true,
                  showClear: !!this.data.value,
                  clearPreventBlur: false,
                  searchPreventBlur: false
              });
          },
          /**
           * 点击清除icon出现的交互
           */
          setClear() {
              this.triggerFocusHdl();
              this.setData({
                  value: '',
                  showSearchBtn: true,
                  focus: true,
                  showClear: false,
                  clearPreventBlur: true
              });
          },
  
          /**
           * 失焦处理
           *
           * @param {Event} e 事件对象
           * @param {Object} e.detail 获取value值
           */
          blurHdl({detail}) {
              const {
                  clearPreventBlur,
                  searchPreventBlur,
                  value,
                  presetWord
              } = this.data;
              // 阻止因点击删除icon、search按钮，触发的失焦
              if (clearPreventBlur || searchPreventBlur) {
                  this.setData({
                      searchPreventBlur: false,
                      clearPreventBlur: false,
                      focus: false
                  });
                  return;
              }
              const showSearchBtn = !!value || presetWord;
              this.setData({
                  showSearchBtn,
                  showClear: false,
                  focus: false
              });
              this.triggerEvent('blur', detail);
          },
  
          /**
           * 触发输入
           *
           * @param {Event} e 事件对象
           * @param {Object} e.detail 获取value值
           */
          inputHdl({detail}) {
              this.setData({
                  showClear: !!detail.value,
                  showSearchBtn: true
              });
              this.triggerEvent('input', detail);
          },
  
          /**
           * 当icon和搜索按钮隐藏的时候，希望点击该区域依旧能触发focus
           *
           */
          triggerFocusHdl() {
              const {
                  showClear,
                  showSearchBtn
              } = this.data;
              if (!(showClear || showSearchBtn)) {
                  this.setData('focus', true);
              }
          },
  
          /**
           * 点击清除按钮
           */
          clearHdl() {
              this.setClear();
              this.triggerEvent('clear', {value: ''});
          },
  
          /**
           * 触发搜索
           */
          searchHdl() {
              const searchKeyWord = this.data.searchKeyWord;
  
              this.setData({
                  searchPreventBlur: true
              });
  
              this.triggerFocusHdl();
              this.setData({
                  searchKeyWord,
                  showSearchBtn: !searchKeyWord,
                  showClear: false
              });
  
              this.triggerEvent('search', {value: this.data.searchKeyWord});
  
          }
      }
  });
  