<template>
  <div class="aos-search" @keydown.enter="searchClick">
    <div class="base">
      <el-form ref="baseForm" v-show="showMoreSearch" :model="model.baseModel" :inline="true" class="aos-search-base-form">
        <el-form-item
          v-for="(item,index) in copyTemplate.baseTemplate"
          :key="item.prop"
          :prop="item.prop"
          :title="item.label"
          :label="item.label"
          class="aos-search-base-form-item"
          :class="{'aos-search-base-form-items': (item.type === 'time-picker' || item.type === 'date-picker')}"
          label-width="100px">
          <template v-if="item.type === 'input' || '' || undefined">
            <el-input
              :title="model.baseModel[item.prop]"
              :ref="item.prop + '-ref'"
              :style="{width: (item.attrs && item.attrs.width) || ''}"
              v-model.trim="model.baseModel[item.prop]"
              :minlength="(item.attrs && item.attrs.minlength) || 0"
              :maxlength="(item.attrs && item.attrs.maxlength) || 10000"
              :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              :size="(item.attrs && item.attrs.size) || 'small'"
              @blur="formHandleEmit(item,'blur')"
              @change="formHandleEmit(item,'change')"
              @focus="formHandleEmit(item,'focus')"
              @clear="formHandleEmit(item,'clear')">
            </el-input>
          </template>
          <template v-if="item.type === 'number-range'">
            <aos-number-range
              :value="model.baseModel[item.prop]"
              :ref="item.prop + '-ref'"
              :separators="(item.attrs && item.attrs.separators) || '-'"
              :startStep="(item.attrs && item.attrs.startStep) || 1"
              :endStep="(item.attrs && item.attrs.endStep) || 1"
              :startPlaceholder="(item.attrs && item.attrs.startPlaceholder) || '请在此输入起始值'"
              :endPlaceholder="(item.attrs && item.attrs.endPlaceholder) || '请在此输入结束值'"
              :startPrecision="(item.attrs && item.attrs.startPrecision) || 0"
              :endPrecision="(item.attrs && item.attrs.endPrecision) || 0"
              :startMin="(item.attrs && item.attrs.startMin) || -Infinity"
              :endMin="(item.attrs && item.attrs.endMin) || -Infinity"
              :startMax="(item.attrs && item.attrs.startMax) || Infinity"
              :endMax="(item.attrs && item.attrs.endMax) || Infinity"
              @change="function(data){handleBaseNumberRangeEmit(data, item, 'change')}"
              @blur="function(data){handleBaseNumberRangeEmit(data, item, 'blur')}"
              @focus="function(data){handleBaseNumberRangeEmit(data, item, 'focus')}">
            </aos-number-range>
          </template>
          <template v-if="item.type == 'select'">
            <el-select 
              v-model="model.baseModel[item.prop]"
              :title="model.baseModel[item.prop]"
              :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              :multiple="(item.attrs && item.attrs.multiple) || false"
              :size="(item.attrs && item.attrs.size) || 'small'"
              :collapse-tags="(item.attrs && item.attrs['collapse-tags']) || false"
              :multiple-limit="(item.attrs && item.attrs['multiple-limit']) || 0"
              :filterable="(item.attrs && item.attrs.filterable) || false"
              :allow-create="(item.attrs && item.attrs['allow-create']) || false"
              :filter-method="(item.attrs && item.attrs['filter-method']) || function(){}"
              :remote="(item.attrs && item.attrs.remote) || false"
              :remote-method="(item.attrs && item.attrs['remote-method']) || function(){}"
              :loading="(item.attrs && item.attrs.loading) || false"
              :no-match-text="(item.attrs && item.attrs['no-match-text']) || '无匹配数据'"
              :no-data-text="(item.attrs && item.attrs['no-data-text']) || '无数据'"
              :reserve-keyword="(item.attrs && item.attrs['reserve-keyword']) || false"
              :default-first-option="(item.attrs && item.attrs['default-first-option']) || false"
              :popper-append-to-body="(item.attrs && item.attrs['popper-append-to-body']) || true"
              @change="formHandleEmit(item,'change')"
              @visible-change="formHandleEmit(item,'visible-change')"
              @remove-tag="formHandleEmit(item,'remove-tag')"
              @clear="formHandleEmit(item,'clear')"
              @blur="formHandleEmit(item,'blur')"
              @focus="formHandleEmit(item,'focus')">
              <el-option
                v-for="item in item.option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.type == 'time-picker'">
            <el-time-picker
              :ref="item.prop + '-ref'"
              v-model="model.baseModel[item.prop]"
              :title="model.baseModel[item.prop]"
              :readonly="(item.attrs && item.attrs.readonly) || false"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :editable="(item.attrs && item.attrs.editable) || true"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              :size="(item.attrs && item.attrs.size) || 'small'"
              :placeholder="(item.attrs && item.attrs.placeholder) || '请选择时间'"
              :is-range="(item.attrs && item.attrs['is-range']) || false"
              :arrow-control="(item.attrs && item.attrs['arrow-control']) || false"
              :start-placeholder="(item.attrs && item.attrs['start-placeholder']) || '开始时间'"
              :end-placeholder="(item.attrs && item.attrs['end-placeholder']) || '结束时间'"
              :align="(item.attrs && item.attrs.align) || 'left'"
              :picker-options="(item.attrs && item.attrs['picker-options']) || {format: 'HH:mm:ss'}"
              :range-separator="(item.attrs && item.attrs['range-separator']) || '-'"
              :value-format="(item.attrs && item.attrs['value-format']) || 'HH:mm:ss'"
              :prefix-icon="(item.attrs && item.attrs['prefix-icon']) || 'el-icon-time'"
              :clear-icon="(item.attrs && item.attrs['clear-icon']) || 'el-icon-circle-close'"
              @change="formHandleEmit(item,'change')"
              @blur="formHandleEmit(item,'blur')"
              @focus="formHandleEmit(item,'focus')"
              >
            </el-time-picker>
          </template>
          <template v-if="item.type == 'date-picker'">
            <el-date-picker
              :ref="item.prop + '-ref'"
              v-model="model.baseModel[item.prop]"
              :title="model.baseModel[item.prop]"
              :readonly="(item.attrs && item.attrs.readonly) || false"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :editable="(item.attrs && item.attrs.editable) || true"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              :size="(item.attrs && item.attrs.size) || 'small'"
              :placeholder="(item.attrs && item.attrs.placeholder) || '请选择日期'"
              :start-placeholder="(item.attrs && item.attrs['start-placeholder']) ||'开始日期'"
              :end-placeholder="(item.attrs && item.attrs['end-placeholder']) || '结束日期'"
              :type="(item.attrs && item.attrs.type) || 'date'"
              :format="(item.attrs && item.attrs.format) || 'yyyy-MM-dd'"
              :align="(item.attrs && item.attrs.align) || 'left'"
              :range-separator="(item.attrs && item.attrs['range-separator']) || '-'"
              :picker-options="(item.attrs && item.attrs['picker-options']) || datPickerOptions"
              :value-format="(item.attrs && item.attrs['value-format']) || 'yyyy-MM-dd'"
              :unlink-panels="(item.attrs && item.attrs['unlink-panels']) || false"
              :validate-event="(item.attrs && item.attrs['validate-event']) || true"
              :prefix-icon="(item.attrs && item.attrs['prefix-icon']) || 'el-icon-date'"
              :clear-icon="(item.attrs && item.attrs['clear-icon']) || 'el-icon-circle-close'"
              @change="formHandleEmit(item,'change')"
              @blur="formHandleEmit(item,'blur')"
              @focus="formHandleEmit(item,'focus')"
              >
            </el-date-picker>
          </template>
          <template v-if="item.type == 'ref'">
            <aos-ref
              :ref="item.prop + '-ref'"
              :editable="true"
              :value="model.baseModel[item.prop] || ''"
              :refCode="item.attrs.refCode"
              :filters="item.attrs.filters"
              :field="item.attrs.field"
              :debounce="item.attrs.debounce || 300"
              :placeholder="item.attrs.placeholder || '请输入'"
              :showType="item.attrs.showType"
              :disabled="item.attrs.disabled || false"
              :firstDefault="item.attrs.firstDefault || false"
              :multiple="item.attrs.multiple || false"
              :collapseTags="item.attrs.collapseTags || false"
              :multipleLimit="item.attrs.multipleLimit || 0"
              :placement="item.attrs.placement || 'bottom-start'"
              @change="function(data){handleBaseRefEmit(data,item,'change',index)}"
              @visible-change="function(data){handleBaseRefEmit(data,item,'visible-change',index)}"
              @clear="function(data){handleBaseRefEmit(data,item,'clear',index)}"
              @blur="function(data){handleBaseRefEmit(data,item,'blur',index)}"
              @focus="function(data){handleBaseRefEmit(data,item,'focus',index)}"
              @remove-tag="function(data){handleBaseRefEmit(data,item,'remove-tag',index)}">
            </aos-ref>
          </template>
          <template v-if="item.type == 'defdoc'">
            <aos-defdoc
              :ref="item.prop + '-ref'"
              :editable="true"
              :value="model.baseModel[item.prop] || ''"
              :tag="item.attrs.tag || ''"
              :defCode="item.attrs.defCode"
              :multiple="item.attrs.multiple || false"
              :collapseTags="item.attrs.collapseTags || false"
              :multipleLimit="item.attrs.multipleLimit || 0"
              :debounce="item.attrs.debounce || 300"
              :firstDefault="item.attrs.firstDefault || false"
              :placeholder="item.attrs.placeholder || '请选择'"
              :disabled="item.attrs.disabled || false"
              :orm-code="item.attrs.ormCode"
              :no-def-code="item.attrs.noDefCode"
              :orm-name="item.attrs.ormName"
              :orm-status="item.attrs.ormStatus"
              :orm-data="item.attrs.ormData"
              :customerUrl="item.attrs.customerUrl"
              @change="function(data){handleBaseDefdocEmit(data,item,'change')}"
              @visible-change="function(data){handleBaseDefdocEmit(data,item,'visible-change')}"
              @remove-tag="function(data){handleBaseDefdocEmit(data,item,'remove-tag')}"
              @clear="function(data){handleBaseDefdocEmit(data,item,'clear')}"
              @blur="function(data){handleBaseDefdocEmit(data,item,'blur')}"
              @focus="function(data){handleBaseDefdocEmit(data,item,'focus')}"
              >
            </aos-defdoc>
          </template>
          <template v-if="item.type == 'rule-defdoc'">
            <aos-rule-defdoc
              :ref="item.prop + '-ref'"
              :editable="true"
              :value="model.baseModel[item.prop] || ''"
              :field="item.prop"
              :defCode="item.attrs.defCode"
              :multiple="item.attrs.multiple || false"
              :collapseTags="item.attrs.collapseTags || false"
              :multipleLimit="item.attrs.multipleLimit || 0"
              :debounce="item.attrs.debounce || 300"
              :firstDefault="item.attrs.firstDefault || false"
              :placeholder="item.attrs.placeholder || '请选择'"
              :disabled="item.attrs.disabled || false"
              @change="function(data){handleBaseDefdocEmit(data,item,'change')}"
              @visible-change="function(data){handleBaseDefdocEmit(data,item,'visible-change')}"
              @remove-tag="function(data){handleBaseDefdocEmit(data,item,'remove-tag')}"
              @clear="function(data){handleBaseDefdocEmit(data,item,'clear')}"
              @blur="function(data){handleBaseDefdocEmit(data,item,'blur')}"
              @focus="function(data){handleBaseDefdocEmit(data,item,'focus')}"
              >
            </aos-rule-defdoc>
          </template>
          <template v-if="item.type == 'city'">
            <aos-city
              :templateValue="model.baseModel"
              :edit="true"
              :province="item.province" 
              :city="item.city" 
              :county="item.county"
              :separator="(item.attrs && item.attrs.separator) || '/'"
              :placehold="(item.attrs && item.attrs.placeholder) || '请选择省/市/县'"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              @change="function(value){handleBaseCityEmit(item,value,'change')}">
            </aos-city>
          </template>
          <template v-if="item.type == 'money'">
            <aos-money
              :ref="item.prop + '-ref'"
              :editable="true"
              v-model="model.baseModel[item.prop]"
              :minlength="(item.attrs && item.attrs.minlength) || 0"
              :maxlength="(item.attrs && item.attrs.maxlength) || 10000"
              :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
              :clearable="(item.attrs && item.attrs.clearable) || true"
              :size="(item.attrs && item.attrs.size) || 'small'"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :debounce="(item.attrs && item.attrs.debounce) || 300"
              :suffixString="(item.attrs && item.attrs.suffixString) || ''"
              @change="function(data){handleBaseMoneydocEmit(data,item,'change')}"
              @clear="function(data){handleBaseMoneydocEmit(data,item,'clear')}"
              @blur="function(data){handleBaseMoneydocEmit(data,item,'blur')}"
              @focus="function(data){handleBaseMoneydocEmit(data,item,'focus')}"
              >
            </aos-money>
          </template>
          <template v-if="item.type == 'switch'">
            <el-switch
              :ref="item.prop + '-ref'"
              v-model="model.baseModel[item.prop]"
              :title="model.baseModel[item.prop]"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              :width="(item.attrs && item.attrs.width) || '40'"
              :active-text="(item.attrs && item.attrs['active-text']) || ''"
              :inactive-text="(item.attrs && item.attrs['inactive-text']) || ''"
              :active-value="(item.attrs && item.attrs['active-value']) || true"
              :inactive-value="(item.attrs && item.attrs['inactive-value']) || false"
              :active-color="(item.attrs && item.attrs['active-color']) || '#409EFF'"
              :inactive-color="(item.attrs && item.attrs['inactive-color']) || '#C0CCDA'"
              :name="(item.attrs && item.attrs.name) || item.prop"
              :validate-event	="(item.attrs && item.attrs['validate-event']) || true"
              @change="formHandleEmit(item,'change')"
              >
            </el-switch>
          </template>
          <template v-if="item.type == 'radio'">
            <el-radio-group
              :ref="item.prop + '-ref'"
              v-model="model.baseModel[item.prop]"
              :title="model.baseModel[item.prop]"
              :disabled="(item.attrs && item.attrs.disabled) || false"
              @change="formHandleEmit(item,'change')"
              >
              <el-radio v-for="option in item.option" :key="option.label" :label="option.label">{{option.label}}</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <!-- <el-form-item class="aos-search-content fr">
          <el-input
            v-if="!inputType || inputType === 'input'"
            ref="aosSearch"
            class="search-input"
            :placeholder="placeholder" 
            v-model="model.content" 
            clearable
            @clear="handleClear"
            @blur="handleBlur"
            @focus="handleFocus"
            @keyup.enter="handleChange"
            @change="handleChange">
            <i slot="suffix" class="el-icon-search aos-search-icon" @click="searchClick" @keyup.enter="searchClick"></i>
            <i slot="append" class="el-icon-arrow-down aos-search-more-button" v-if="copyTemplate.moreTemplate.length > 0 && showMoreSearchIcon" @click="handleMoreSearchClick">高级</i>
          </el-input>
          <aos-multiple-input
            class="search-input"
            ref="aosSearchMultipleInput"
            v-show="inputType === 'multiple'"
            v-model="model.content"
            :fetch-suggestions="fetchSuggestions"
            :placeholder="placeholder"
            multiple
            highlight-first-item
            :trigger-on-focus="false"
            @delete-tag="handleDeleteTag"
            @select="handleSelect"
            @change="handleChange">
            <i slot="suffix" class="el-icon-search aos-search-icon" @click="searchClick" @keyup.enter="searchClick"></i>
            <i slot="append" class="el-icon-arrow-down aos-search-more-button" v-if="copyTemplate.moreTemplate.length > 0 && showMoreSearchIcon" @click="handleMoreSearchClick">高级</i>
          </aos-multiple-input>
        </el-form-item> -->
      </el-form>
      <el-input
        v-show="!inputType || inputType === 'input'"
        class="search-input"
        ref="aosSearch"
        :placeholder="placeholder" 
        v-model="model.content" 
        clearable
        autocomplete
        @clear="handleClear"
        @blur="handleBlur"
        @focus="handleFocus"
        @keyup.enter="handleChange"
        @change="handleChange">
        <i slot="suffix" class="el-icon-search aos-search-icon" @click="searchClick" @keyup.enter="searchClick"></i>
        <i slot="append" class="el-icon-arrow-down aos-search-more-button" v-if="showMoreSearch && copyTemplate.moreTemplate.length > 0" @click="handleMoreSearchClick">高级</i>
      </el-input>
      <aos-multiple-input
        class="search-input"
        ref="aosSearchMultipleInput"
        v-show="inputType === 'multiple'"
        v-model="model.content"
        :fetch-suggestions="fetchSuggestions"
        :placeholder="placeholder"
        highlight-first-item
        :trigger-on-focus="false"
        multiple
        @delete-tag="handleDeleteTag"
        @select="handleSelect"
        @change="handleChange">
        <i slot="suffix" class="el-icon-search aos-search-icon" @click="searchClick" @keyup.enter="searchClick"></i>
        <i slot="append" class="el-icon-arrow-down aos-search-more-button" v-if="showMoreSearch && copyTemplate.moreTemplate.length > 0" @click="handleMoreSearchClick">高级</i>
      </aos-multiple-input>
    </div>
    <el-collapse-transition>
      <div class="aos-more-container" v-show="showMoreSearchMenu">
        <div ref="aosMoreSearch" class="aos-more-search">
          <el-form ref="moreForm" :model="model.moreModel" class="aos-search-more-form">
            <el-form-item
              v-for="(item,index) in copyTemplate.moreTemplate"
              :key="item.prop"
              :prop="item.prop"
              :title="item.label"
              :label="item.label"
              class="aos-search-more-form-item aos-search-form-item"
              label-width="100px">
              <template v-if="item.type === 'input' || '' || undefined">
                <el-input
                  :title="model.moreModel[item.prop]"
                  :ref="item.prop + '-ref'"
                  :style="{width: (item.attrs && item.attrs.width) || ''}"
                  v-model.trim="model.moreModel[item.prop]"
                  :minlength="(item.attrs && item.attrs.minlength) || 0"
                  :maxlength="(item.attrs && item.attrs.maxlength) || 10000"
                  :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  :size="(item.attrs && item.attrs.size) || 'small'"
                  @blur="formHandleEmit(item,'blur')"
                  @change="formHandleEmit(item,'change')"
                  @focus="formHandleEmit(item,'focus')"
                  @clear="formHandleEmit(item,'clear')">
                </el-input>
              </template>
              <template v-if="item.type === 'number-range'">
                <aos-number-range
                  :value="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :ref="item.prop + '-ref'"
                  :separators="(item.attrs && item.attrs.separators) || '-'"
                  :startStep="(item.attrs && item.attrs.startStep) || 1"
                  :endStep="(item.attrs && item.attrs.endStep) || 1"
                  :startPlaceholder="(item.attrs && item.attrs.startPlaceholder) || '请在此输入起始值'"
                  :endPlaceholder="(item.attrs && item.attrs.endPlaceholder) || '请在此输入结束值'"
                  :startPrecision="(item.attrs && item.attrs.startPrecision) || 0"
                  :endPrecision="(item.attrs && item.attrs.endPrecision) || 0"
                  :startMin="item.attrs && item.attrs.startMin"
                  :endMin="item.attrs && item.attrs.endMin"
                  :startMax="item.attrs && item.attrs.startMax"
                  :endMax="item.attrs && item.attrs.endMax"
                  @change="function(data){handleMoreNumberRangeEmit(data, item, 'change')}"
                  @blur="function(data){handleMoreNumberRangeEmit(data, item, 'blur')}"
                  @focus="function(data){handleMoreNumberRangeEmit(data, item, 'focus')}">
                </aos-number-range>
              </template>
              <template v-if="item.type == 'select'">
                <el-select 
                  v-model="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  :multiple="(item.attrs && item.attrs.multiple) || false"
                  :size="(item.attrs && item.attrs.size) || 'small'"
                  :collapse-tags="(item.attrs && item.attrs['collapse-tags']) || false"
                  :multiple-limit="(item.attrs && item.attrs['multiple-limit']) || 0"
                  :filterable="(item.attrs && item.attrs.filterable) || false"
                  :allow-create="(item.attrs && item.attrs['allow-create']) || false"
                  :filter-method="(item.attrs && item.attrs['filter-method']) || function(){}"
                  :remote="(item.attrs && item.attrs.remote) || false"
                  :remote-method="(item.attrs && item.attrs['remote-method']) || function(){}"
                  :loading="(item.attrs && item.attrs.loading) || false"
                  :no-match-text="(item.attrs && item.attrs['no-match-text']) || '无匹配数据'"
                  :no-data-text="(item.attrs && item.attrs['no-data-text']) || '无数据'"
                  :reserve-keyword="(item.attrs && item.attrs['reserve-keyword']) || false"
                  :default-first-option="(item.attrs && item.attrs['default-first-option']) || false"
                  :popper-append-to-body="(item.attrs && item.attrs['popper-append-to-body']) || true"
                  @change="formHandleEmit(item,'change')"
                  @visible-change="formHandleEmit(item,'visible-change')"
                  @remove-tag="formHandleEmit(item,'remove-tag')"
                  @clear="formHandleEmit(item,'clear')"
                  @blur="formHandleEmit(item,'blur')"
                  @focus="formHandleEmit(item,'focus')">
                  <el-option
                    v-for="item in item.option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </template>
              <template v-if="item.type == 'time-picker'">
                <el-time-picker
                  :ref="item.prop + '-ref'"
                  v-model="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :readonly="(item.attrs && item.attrs.readonly) || false"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :editable="(item.attrs && item.attrs.editable) || true"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  :size="(item.attrs && item.attrs.size) || 'small'"
                  :placeholder="(item.attrs && item.attrs.placeholder) || '请选择时间'"
                  :is-range="(item.attrs && item.attrs['is-range']) || false"
                  :arrow-control="(item.attrs && item.attrs['arrow-control']) || false"
                  :start-placeholder="(item.attrs && item.attrs['start-placeholder']) || '开始时间'"
                  :end-placeholder="(item.attrs && item.attrs['end-placeholder']) || '结束时间'"
                  :align="(item.attrs && item.attrs.align) || 'left'"
                  :picker-options="(item.attrs && item.attrs['picker-options']) || {format: 'HH:mm:ss'}"
                  :range-separator="(item.attrs && item.attrs['range-separator']) || '-'"
                  :value-format="(item.attrs && item.attrs['value-format']) || 'HH:mm:ss'"
                  :prefix-icon="(item.attrs && item.attrs['prefix-icon']) || 'el-icon-time'"
                  :clear-icon="(item.attrs && item.attrs['clear-icon']) || 'el-icon-circle-close'"
                  @change="formHandleEmit(item,'change')"
                  @blur="formHandleEmit(item,'blur')"
                  @focus="formHandleEmit(item,'focus')"
                  >
                </el-time-picker>
              </template>
              <template v-if="item.type == 'date-picker'">
                <el-date-picker
                  :ref="item.prop + '-ref'"
                  v-model="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :readonly="(item.attrs && item.attrs.readonly) || false"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :editable="(item.attrs && item.attrs.editable) || true"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  :size="(item.attrs && item.attrs.size) || 'small'"
                  :placeholder="(item.attrs && item.attrs.placeholder) || '请选择日期'"
                  :start-placeholder="(item.attrs && item.attrs['start-placeholder']) ||'开始日期'"
                  :end-placeholder="(item.attrs && item.attrs['end-placeholder']) || '结束日期'"
                  :type="(item.attrs && item.attrs.type) || 'date'"
                  :format="(item.attrs && item.attrs.format) || 'yyyy-MM-dd'"
                  :align="(item.attrs && item.attrs.align) || 'left'"
                  :range-separator="(item.attrs && item.attrs['range-separator']) || '-'"
                  :picker-options="(item.attrs && item.attrs['picker-options'])  || datPickerOptions"
                  :value-format="(item.attrs && item.attrs['value-format']) || 'yyyy-MM-dd'"
                  :unlink-panels="(item.attrs && item.attrs['unlink-panels']) || false"
                  :validate-event="(item.attrs && item.attrs['validate-event']) || true"
                  :prefix-icon="(item.attrs && item.attrs['prefix-icon']) || 'el-icon-date'"
                  :clear-icon="(item.attrs && item.attrs['clear-icon']) || 'el-icon-circle-close'"
                  @change="formHandleEmit(item,'change')"
                  @blur="formHandleEmit(item,'blur')"
                  @focus="formHandleEmit(item,'focus')"
                  >
                </el-date-picker>
              </template>
              <template v-if="item.type == 'ref'">
                <aos-ref
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  :value="model.moreModel[item.prop] || ''"
                  :refCode="item.attrs.refCode"
                  :filters="item.attrs.filters"
                  :field="item.attrs.field"
                  :debounce="item.attrs.debounce || 300"
                  :placeholder="item.attrs.placeholder || '请输入'"
                  :showType="item.attrs.showType"
                  :disabled="item.attrs.disabled || false"
                  :collapseTags="item.attrs.collapseTags || false"
                  :multipleLimit="item.attrs.multipleLimit || 0"
                  :firstDefault="item.attrs.firstDefault || false"
                  :multiple="item.attrs.multiple || false"
                  :placement="item.attrs.placement || 'bottom-start'"
                  @change="function(data){handleMoreRefEmit(data,item,'change',index)}"
                  @visible-change="function(data){handleMoreRefEmit(data,item,'visible-change',index)}"
                  @clear="function(data){handleMoreRefEmit(data,item,'clear',index)}"
                  @blur="function(data){handleMoreRefEmit(data,item,'blur',index)}"
                  @focus="function(data){handleMoreRefEmit(data,item,'focus',index)}"
                  @remove-tag="function(data){handleMoreRefEmit(data,item,'remove-tag',index)}"
                  >
                </aos-ref>
              </template>
              <template v-if="item.type == 'defdoc'">
                <aos-defdoc
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  :value="model.moreModel[item.prop] || ''"
                  :tag="item.attrs.tag || ''"
                  :defCode="item.attrs.defCode"
                  :multiple="item.attrs.multiple || false"
                  :debounce="item.attrs.debounce || 300"
                  :firstDefault="item.attrs.firstDefault || false"
                  :collapseTags="item.attrs.collapseTags || false"
                  :multipleLimit="item.attrs.multipleLimit || 0"
                  :placeholder="item.attrs.placeholder || '请选择'"
                  :disabled="item.attrs.disabled || false"
                  :showType="item.attrs.showType || 'button'"
                  :orm-code="item.attrs.ormCode"
                  :no-def-code="item.attrs.noDefCode"
                  :orm-name="item.attrs.ormName"
                  :orm-status="item.attrs.ormStatus"
                  :orm-data="item.attrs.ormData"
                  :customerUrl="item.attrs.customerUrl"
                  @change="function(data){handleMoreDefdocEmit(data,item,'change')}"
                  @visible-change="function(data){handleMoreDefdocEmit(data,item,'visible-change')}"
                  @remove-tag="function(data){handleMoreDefdocEmit(data,item,'remove-tag')}"
                  @clear="function(data){handleMoreDefdocEmit(data,item,'clear')}"
                  @blur="function(data){handleMoreDefdocEmit(data,item,'blur')}"
                  @focus="function(data){handleMoreDefdocEmit(data,item,'focus')}"
                  >
                </aos-defdoc>
              </template>
              <template v-if="item.type == 'rule-defdoc'">
                <aos-rule-defdoc
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  :value="model.moreModel[item.prop] || ''"
                  :field="item.prop"
                  :defCode="item.attrs.defCode"
                  :multiple="item.attrs.multiple || false"
                  :debounce="item.attrs.debounce || 300"
                  :firstDefault="item.attrs.firstDefault || false"
                  :collapseTags="item.attrs.collapseTags || false"
                  :multipleLimit="item.attrs.multipleLimit || 0"
                  :placeholder="item.attrs.placeholder || '请选择'"
                  :disabled="item.attrs.disabled || false"
                  @change="function(data){handleMoreDefdocEmit(data,item,'change')}"
                  @visible-change="function(data){handleMoreDefdocEmit(data,item,'visible-change')}"
                  @remove-tag="function(data){handleMoreDefdocEmit(data,item,'remove-tag')}"
                  @clear="function(data){handleMoreDefdocEmit(data,item,'clear')}"
                  @blur="function(data){handleMoreDefdocEmit(data,item,'blur')}"
                  @focus="function(data){handleMoreDefdocEmit(data,item,'focus')}"
                  >
                </aos-rule-defdoc>
              </template>
              <template v-if="item.type == 'city'">
                <aos-city
                  :templateValue="model.moreModel"
                  :edit="true"
                  :province="item.province" 
                  :city="item.city" 
                  :county="item.county"
                  :separator="(item.attrs && item.attrs.separator) || '/'"
                  :placehold="(item.attrs && item.attrs.placeholder) || '请选择省/市/县'"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  @change="function(value){handleMoreCityEmit(item,value,'change')}">
                </aos-city>
              </template>
              <template v-if="item.type == 'money'">
                <aos-money
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  v-model="model.moreModel[item.prop]"
                  :minlength="(item.attrs && item.attrs.minlength) || 0"
                  :maxlength="(item.attrs && item.attrs.maxlength) || 10000"
                  :placeholder="(item.attrs && item.attrs.placeholder) || '请在此输入'"
                  :clearable="(item.attrs && item.attrs.clearable) || true"
                  :size="(item.attrs && item.attrs.size) || 'small'"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :debounce="(item.attrs && item.attrs.debounce) || 300"
                  :suffixString="(item.attrs && item.attrs.suffixString) || ''"
                  @change="function(data){handleMoreMoneydocEmit(data,item,'change')}"
                  @clear="function(data){handleMoreMoneydocEmit(data,item,'clear')}"
                  @blur="function(data){handleMoreMoneydocEmit(data,item,'blur')}"
                  @focus="function(data){handleMoreMoneydocEmit(data,item,'focus')}">
                </aos-money>
              </template>
              <template v-if="item.type == 'switch'">
                <el-switch
                  :ref="item.prop + '-ref'"
                  v-model="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  :width="(item.attrs && item.attrs.width) || '40'"
                  :active-text="(item.attrs && item.attrs['active-text']) || ''"
                  :inactive-text="(item.attrs && item.attrs['inactive-text']) || ''"
                  :active-value="(item.attrs && item.attrs['active-value']) || true"
                  :inactive-value="(item.attrs && item.attrs['inactive-value']) || false"
                  :active-color="(item.attrs && item.attrs['active-color']) || '#409EFF'"
                  :inactive-color="(item.attrs && item.attrs['inactive-color']) || '#C0CCDA'"
                  :name="(item.attrs && item.attrs.name) || item.prop"
                  :validate-event	="(item.attrs && item.attrs['validate-event']) || true"
                  @change="formHandleEmit(item,'change')"
                  >
                </el-switch>
              </template>
              <template v-if="item.type == 'radio'">
                <el-radio-group
                  :ref="item.prop + '-ref'"
                  v-model="model.moreModel[item.prop]"
                  :title="model.moreModel[item.prop]"
                  :disabled="(item.attrs && item.attrs.disabled) || false"
                  @change="formHandleEmit(item,'change')"
                  >
                  <el-radio v-for="option in item.option" :key="option.label" :label="option.label">{{option.label}}</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item class="aos-search-more-form-button">
              <div class="button-group">
                <el-button @click="handleSearchReset">重置</el-button>
                <el-button style="margin-left: 8px;" type="primary" @click="searchClick">搜索</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
import ElCollapseTransition from 'aos-element/src/transitions/collapse-transition';
export default {
  name: 'aos-search',
  components: {
    ElCollapseTransition
  },

  props: {
    // 搜索框中可以多选，并且以tag的形式存在
    inputType: {
      type: String,
      default: 'input',
      validator: function (value) {
        return ['input', 'multiple'].indexOf(value) > -1
      }
    },
    // 多选的可加提示前缀
    multipleValue: {
      type: Array,
      default: function () {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    template: {
      type: Object,
      default: function() {
        return {
          baseTemplate: [],
          moreTemplate: []
        };
      }
    },
    showMoreSearch: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function() {
        return {
          baseModel: {},
          content: '',
          moreModel: {}
        };
      }
    },
    // 是否在搜索前清空输入内容
    clearContentBeforeSearch: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    copyTemplate() {
      if (this.template && this.template.baseTemplate && this.template.baseTemplate instanceof Array && this.template.baseTemplate.length > 0) {
        this.template.baseTemplate.forEach((item) => {
          if (!this.model.baseModel[item.prop] || this.model.baseModel[item.prop] === 0 || this.model.baseModel[item.prop] == false) {
            if (item.type === 'select' && item.attrs.multiple) {
              this.$set(this.model.baseModel, item.prop, []);
            } else {
              this.$set(this.model.baseModel, item.prop, '');
            }
          }
        });
      }
      // if(this.template && this.template.moreTemplate && this.template.moreTemplate instanceof Array && this.template.moreTemplate.length > 0){
      //   this.template.moreTemplate.forEach((item) => {
      //     if(item.type === 'select' && item.attrs.multiple){
      //       this.$set(this.model.moreModel,item.prop,[]);
      //     } else {
      //       this.$set(this.model.moreModel,item.prop,'');
      //     }
      //   });
      //   this.currentMoreModel = JSON.parse(JSON.stringify(this.model.moreModel));
      // }
      if (this.template && this.template.moreTemplate && this.template.moreTemplate instanceof Array && this.template.moreTemplate.length > 0) {
        this.showMoreSearchIcon = true;
        this.template.moreTemplate.forEach((item) => {
           if (!this.model.moreModel[item.prop] || this.model.moreModel[item.prop] === 0 || this.model.moreModel[item.prop] == false) {
             if (item.type === 'select' && item.attrs.multiple) {
               this.$set(this.model.moreModel, item.prop, []);
             } else {
               this.$set(this.model.moreModel, item.prop, '');
             }
           }
        });
      }
      return this.template;
    }
  },
  watch: {
    data: {
      handler: function(val, oldVal) {
        this.model = this.$_.cloneDeep(val);
        if (!this.model.hasOwnProperty('baseModel')) {
          this.$set(this.model, 'baseModel', {});
        }
        if (!this.model.hasOwnProperty('content')) {
          this.$set(this.model, 'content', '');
        }
        if (!this.model.hasOwnProperty('moreModel')) {
          this.$set(this.model, 'moreModel', {});
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      model: {
        baseModel: {},
        content: '',
        moreModel: {}
      },
      currentMoreModel: {},
      showMoreSearchMenu: false,
      containerHeight: '0px',
      showMoreSearchIcon: false,
      datPickerOptions: {
        shortcuts: [
          {
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近三天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      currentMultipleValue: [],
      copyMultipleValue: [],
      selectMultipleValue: []
    };
  },
  created () {
    this.currentMultipleValue = JSON.parse(JSON.stringify(this.multipleValue))
    this.copyMultipleValue = JSON.parse(JSON.stringify(this.multipleValue))
  },
  methods: {
    resetMultipleValue () {
      this.copyMultipleValue = JSON.parse(JSON.stringify(this.currentMultipleValue))
    },
    fetchSuggestions (query, cb) {
      if (this.inputType === 'multiple' && this.copyMultipleValue && Array.isArray(this.copyMultipleValue) && this.copyMultipleValue.length > 0) {
        this.copyMultipleValue.forEach(item => {
          if (item.value.indexOf(':') > -1) {
            item.value = item.value + query
          } else {
            item.value = item.value + ':' + query
          }
          if (!item.query) {
            this.$set(item, 'query', '')
          }
          item.query = query
        })
      }
      cb(this.copyMultipleValue)
      this.resetMultipleValue()
    },
    searchClick() {
      if (this.inputType === 'multiple' && this.clearContentBeforeSearch) {
        this.model.content = ''
      }
      this.$emit('searchClick',this.model.content,this.model,this.selectMultipleValue.slice());
      this.resetMultipleValue()
      this.$refs.aosSearchMultipleInput.closeSuggestions()
    },
    handleSearchReset() {
      let baseModelKeys, moreModelKeys;
      if (this.model.baseModel && Object.keys(this.model.baseModel).length > 0) {
        baseModelKeys = Object.keys(this.model.baseModel);
        baseModelKeys.forEach(item => {
          this.model.baseModel[item] = '';
        });
      }
      if (this.model.moreModel && Object.keys(this.model.moreModel).length > 0) {
        moreModelKeys = Object.keys(this.model.moreModel);
        moreModelKeys.forEach(item => {
          this.model.moreModel[item] = '';
        });
      }
      if (this.inputType === 'multiple') {
        this.$refs.aosSearchMultipleInput.clearAllTags()
      }
      this.model.content = ''
      this.$emit('reset', this.model,this.selectMultipleValue.slice())
    },
    handleClear() {
      this.$emit('clear', this.model);
    },
    handleBlur(event) {
      this.$emit('blur', event, this.model);
    },
    handleFocus(event) {
      this.$emit('focus', event, this.model);
    },
    handleChange(event) {
      this.$emit('change', event, this.model);
    },
    handleSelect (data, multipleData) {
      this.model.content = ''
      this.$emit('select', data, multipleData)
      this.selectMultipleValue = JSON.parse(JSON.stringify(multipleData))
      this.resetMultipleValue()
    },
    handleDeleteTag (tag, multipleData) {
      this.$emit('delete-tag', tag, multipleData)
      this.selectMultipleValue = JSON.parse(JSON.stringify(multipleData))
    },
    handleMoreSearchClick(){
      this.showMoreSearchMenu = !this.showMoreSearchMenu;
      this.$nextTick(() => {
        this.containerHeight = this.$refs.aosMoreSearch.offsetHeight + 'px';
      });
    },
    formHandleEmit(item, type) {
      if (item.methods && item.methods[type]) {
        this.$emit(
          'search-' + item.prop + '-' + item.methods[type],
          JSON.parse(JSON.stringify(this.model)),
          item.prop
        );
      } else {
      }
    },
    /**
     * 参照选择之后触发
     * refData: 获取到的参照的数据
     * item: 当前组件数据
     * type: 当前方法
     * 返回事件:
     */
    handleBaseRefEmit(data, item, type) {
      if (type === 'change') {
        this.model.baseModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    getModel () {
      return this.$_.cloneDeep(this.model)
    },
    /**
     * 字典事件
     */
    handleBaseDefdocEmit(data, item, type) {
      if (type === 'change') {
        this.model.baseModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    handleBaseNumberRangeEmit(data, item, type) {
      if (type === 'change') {
        this.model.baseModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    handleMoreNumberRangeEmit(data, item, type) {
      if (type === 'change') {
        this.model.moreModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    // money事件
    handleBaseMoneydocEmit(data, item, type) {
      if (type === 'change' || type === 'blur') {
        this.model.baseModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    handleBaseCityEmit(item, value, type) {
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], value, JSON.parse(JSON.stringify(this.model)));
      }
    },
    /**
     * 参照选择之后触发
     * refData: 获取到的参照的数据
     * item: 当前组件数据
     * type: 当前方法
     * 返回事件:
     */
    handleMoreRefEmit(data, item, type) {
      if (type === 'change') {
        this.model.moreModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    /**
     * 字典事件
     */
    handleMoreDefdocEmit(data, item, type) {
      if (type === 'change') {
        this.model.moreModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    // money事件
    handleMoreMoneydocEmit(data, item, type) {
      if (type === 'change' || type === 'blur') {
        this.model.moreModel[item.prop] = data;
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], JSON.parse(JSON.stringify(this.model)), item.prop, data);
      }
    },
    handleMoreCityEmit(item, value, type) {
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], value, JSON.parse(JSON.stringify(this.model)));
      }
    },
    /**
     * @description: 设置基本表单表单对应项的属性值
     * @param {type} prop prop属性, attes 属性, value 属性值, type 是否是列item为列,默认为attrs属性值
     * @return:
     */
    setBaseFormItemProp(prop, attrs, value, type) {
      let length = this.copyTemplate.baseTemplate.length;
      for (let i = 0;i < length;i++) {
        if (this.copyTemplate.baseTemplate[i].prop === prop) {
          if (!type || type === 'attrs') {
            if (!this.copyTemplate.baseTemplate[i].attrs) {
              this.$set(this.copyTemplate.baseTemplate[i], 'attrs', {});
            }
            this.$set(this.copyTemplate.baseTemplate[i].attrs, attrs, value);
          } else if (type === 'item') {
            this.$set(this.copyTemplate.baseTemplate[i], attrs, value);
          } else if (type === 'attrsItem') {
            let key = value.key;
            let values = value.value;
            let attrsItem = value.attrsItem;
            this.$set(this.copyTemplate.baseTemplate[i].attrs[attrsItem], key, values);
          }
          break;
        }
      }
    },
    /**
     * @description: 设置基本表单表单对应项的属性值
     * @param {type} prop prop属性, attes 属性, value 属性值, type 是否是列item为列,默认为attrs属性值
     * @return:
     */
    setMoreFormItemProp(prop, attrs, value, type) {
      let length = this.copyTemplate.moreTemplate.length;
      for (let i = 0;i < length;i++) {
        if (this.copyTemplate.moreTemplate[i].prop === prop) {
          if (!type || type === 'attrs') {
            if (!this.copyTemplate.moreTemplate[i].attrs) {
              this.$set(this.copyTemplate.moreTemplate[i], 'attrs', {});
            }
            this.$set(this.copyTemplate.moreTemplate[i].attrs, attrs, value);
          } else if (type === 'item') {
            this.$set(this.copyTemplate.moreTemplate[i], attrs, value);
          } else if (type === 'attrsItem') {
            let key = value.key;
            let values = value.value;
            let attrsItem = value.attrsItem;
            this.$set(this.copyTemplate.moreTemplate[i].attrs[attrsItem], key, values);
          }
          break;
        }
      }
    }
  }
};
</script>

