<template>
  <div class="aos-search-op" @keydown.enter="searchClick" ref="aosSearchOp">
    <div class="base">
      <el-form ref="baseForm" v-show="showMoreSearch" :model="model" :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="auto">
          <template v-if="item.type === 'input' || '' || undefined">
            <el-input
              :title="model[item.prop]"
              :ref="item.prop + '-ref'"
              :style="{width: (item.attrs && item.attrs.width) || ''}"
              v-model.trim="model[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')"
              @input="formHandleEmit(item,'input')"
              @focus="formHandleEmit(item,'focus')"
              @clear="formHandleEmit(item,'clear')">
            </el-input>
          </template>
          <template v-if="item.type === 'number-range'">
            <aos-number-range
              :value="model[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){handleNumberRangeEmit(data, item, 'change')}"
              @blur="function(data){handleNumberRangeEmit(data, item, 'blur')}"
              @focus="function(data){handleNumberRangeEmit(data, item, 'focus')}">
            </aos-number-range>
          </template>
          <template v-if="item.type == 'select'">
            <el-select 
              v-model="model[item.prop]"
              :title="model[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[item.prop]"
              :title="model[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[item.prop]"
              :title="model[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'])"
              :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[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){handleRefEmit(data,item,'change',index)}"
              @visible-change="function(data){handleRefEmit(data,item,'visible-change',index)}"
              @clear="function(data){handleRefEmit(data,item,'clear',index)}"
              @blur="function(data){handleRefEmit(data,item,'blur',index)}"
              @focus="function(data){handleRefEmit(data,item,'focus',index)}"
              @remove-tag="function(data){handleRefEmit(data,item,'remove-tag',index)}">
            </aos-ref>
          </template>
          <template v-if="item.type == 'defdoc'">
            <aos-defdoc
              :ref="item.prop + '-ref'"
              :editable="true"
              :value="model[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"
              :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"
              :show-type="item.attrs && item.attrs.showType"
              :tag="item.attrs.tag || ''"
              @change="function(data){handleDefdocEmit(data,item,'change')}"
              @visible-change="function(data){handleDefdocEmit(data,item,'visible-change')}"
              @remove-tag="function(data){handleDefdocEmit(data,item,'remove-tag')}"
              @clear="function(data){handleDefdocEmit(data,item,'clear')}"
              @blur="function(data){handleDefdocEmit(data,item,'blur')}"
              @focus="function(data){handleDefdocEmit(data,item,'focus')}"
              >
            </aos-defdoc>
          </template>
          <template v-if="item.type == 'rule-defdoc'">
            <aos-rule-defdoc
              :ref="item.prop + '-ref'"
              :editable="true"
              :value="model[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){handleDefdocEmit(data,item,'change')}"
              @visible-change="function(data){handleDefdocEmit(data,item,'visible-change')}"
              @remove-tag="function(data){handleDefdocEmit(data,item,'remove-tag')}"
              @clear="function(data){handleDefdocEmit(data,item,'clear')}"
              @blur="function(data){handleDefdocEmit(data,item,'blur')}"
              @focus="function(data){handleDefdocEmit(data,item,'focus')}"
              >
            </aos-rule-defdoc>
          </template>
          <template v-if="item.type == 'city'">
            <aos-city
              :templateValue="model"
              :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){handleCityEmit(item,value,'change')}">
            </aos-city>
          </template>
          <template v-if="item.type == 'money'">
            <aos-money
              :ref="item.prop + '-ref'"
              :editable="true"
              v-model="model[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){handleMoneydocEmit(data,item,'change')}"
              @clear="function(data){handleMoneydocEmit(data,item,'clear')}"
              @blur="function(data){handleMoneydocEmit(data,item,'blur')}"
              @focus="function(data){handleMoneydocEmit(data,item,'focus')}"
              >
            </aos-money>
          </template>
          <template v-if="item.type == 'switch'">
            <el-switch
              :ref="item.prop + '-ref'"
              v-model="model[item.prop]"
              :title="model[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[item.prop]"
              :title="model[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>
      <div class="search-input__container" v-show="!inputType || inputType === 'input'">
        <el-input
          v-if="showInput"
          class="search-input"
          ref="aosSearch"
          :placeholder="placeholder" 
          v-model="model.content" 
          clearable
          autocomplete
          @clear="handleClear"
          @input="handleInput"
          @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>
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-button style="margin-left: 8px" @click="handleSearchReset">重置</el-button>
        <el-button style="margin-left: 8px" v-if="!showInput && showMoreSearch && copyTemplate.moreTemplate.length > 0" @click="handleMoreSearchClick">更多</el-button>
      </div>
      <div class="search-input__container" v-show="inputType === 'multiple'">
        <aos-multiple-input
          v-if="showInput"
          class="search-input"
          ref="aosSearchMultipleInput"
          v-model="model.content"
          :fetch-suggestions="fetchSuggestions"
          :placeholder="placeholder"
          highlight-first-item
          :trigger-on-focus="false"
          multiple
          @delete-tag="handleDeleteTag"
          @select="handleSelect"
          @input="handleInput"
          @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>
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-button style="margin-left: 8px" @click="handleSearchReset">重置</el-button>
        <el-button style="margin-left: 8px" v-if="!showInput && showMoreSearch && copyTemplate.moreTemplate.length > 0" @click="handleMoreSearchClick">更多</el-button>
      </div>
    </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" class="aos-search-more-form" :inline="true" label-width="auto">
            <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"
              label-width="auto">
              <template v-if="item.type === 'input' || '' || undefined">
                <el-input
                  :title="model[item.prop]"
                  :ref="item.prop + '-ref'"
                  :style="{width: (item.attrs && item.attrs.width) || ''}"
                  v-model.trim="model[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')"
                  @input="formHandleEmit(item,'input')"
                  @clear="formHandleEmit(item,'clear')">
                </el-input>
              </template>
              <template v-if="item.type === 'number-range'">
                <aos-number-range
                  :value="model[item.prop]"
                  :title="model[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){handleNumberRangeEmit(data, item, 'change')}"
                  @blur="function(data){handleNumberRangeEmit(data, item, 'blur')}"
                  @focus="function(data){handleNumberRangeEmit(data, item, 'focus')}">
                </aos-number-range>
              </template>
              <template v-if="item.type == 'select'">
                <el-select 
                  v-model="model[item.prop]"
                  :title="model[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[item.prop]"
                  :title="model[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[item.prop]"
                  :title="model[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'])"
                  :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[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){handleRefEmit(data,item,'change',index)}"
                  @visible-change="function(data){handleRefEmit(data,item,'visible-change',index)}"
                  @clear="function(data){handleRefEmit(data,item,'clear',index)}"
                  @blur="function(data){handleRefEmit(data,item,'blur',index)}"
                  @focus="function(data){handleRefEmit(data,item,'focus',index)}"
                  @remove-tag="function(data){handleRefEmit(data,item,'remove-tag',index)}"
                  >
                </aos-ref>
              </template>
              <template v-if="item.type == 'defdoc'">
                <aos-defdoc
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  :value="model[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"
                  :showType="item.attrs.showType"
                  :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"
                  :tag="item.attrs.tag || ''"
                  @change="function(data){handleDefdocEmit(data,item,'change')}"
                  @visible-change="function(data){handleDefdocEmit(data,item,'visible-change')}"
                  @remove-tag="function(data){handleDefdocEmit(data,item,'remove-tag')}"
                  @clear="function(data){handleDefdocEmit(data,item,'clear')}"
                  @blur="function(data){handleDefdocEmit(data,item,'blur')}"
                  @focus="function(data){handleDefdocEmit(data,item,'focus')}"
                  >
                </aos-defdoc>
              </template>
              <template v-if="item.type == 'rule-defdoc'">
                <aos-rule-defdoc
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  :value="model[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){handleDefdocEmit(data,item,'change')}"
                  @visible-change="function(data){handleDefdocEmit(data,item,'visible-change')}"
                  @remove-tag="function(data){handleDefdocEmit(data,item,'remove-tag')}"
                  @clear="function(data){handleDefdocEmit(data,item,'clear')}"
                  @blur="function(data){handleDefdocEmit(data,item,'blur')}"
                  @focus="function(data){handleDefdocEmit(data,item,'focus')}"
                  >
                </aos-rule-defdoc>
              </template>
              <template v-if="item.type == 'city'">
                <aos-city
                  :templateValue="model"
                  :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){handleCityEmit(item,value,'change')}">
                </aos-city>
              </template>
              <template v-if="item.type == 'money'">
                <aos-money
                  :ref="item.prop + '-ref'"
                  :editable="true"
                  v-model="model[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){handleMoneydocEmit(data,item,'change')}"
                  @clear="function(data){handleMoneydocEmit(data,item,'clear')}"
                  @blur="function(data){handleMoneydocEmit(data,item,'blur')}"
                  @focus="function(data){handleMoneydocEmit(data,item,'focus')}">
                </aos-money>
              </template>
              <template v-if="item.type == 'switch'">
                <el-switch
                  :ref="item.prop + '-ref'"
                  v-model="model[item.prop]"
                  :title="model[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[item.prop]"
                  :title="model[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';
import { addResizeListener,removeResizeListener } from 'aos-element/src/utils/resize-event.js'
import debounce from 'throttle-debounce/debounce';
import throttle from 'throttle-debounce/throttle';
import { cloneDeep } from 'lodash';
export default {
  name: 'aos-search-op',
  components: {
    ElCollapseTransition
  },

  props: {
    // 是否显示模糊搜索输入框
    showInput: {
      type: Boolean,
      default: true
    },
    // 搜索框中可以多选，并且以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: Array,
      default: function() {
        return [];
      }
    },
    data: {
      type: Object,
      default: function() {
        return {
          content: '',
        };
      }
    },
    // 是否在搜索前清空输入内容
    clearContentBeforeSearch: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    copyTemplate: {
      get: function () {
        if (this.template.length > 0) {
          this.showMoreSearch = true
        }
        const template = {
          baseTemplate: [],
          moreTemplate: []
        };
        const templateLength = this.template.length;
        if (this.template && this.template instanceof Array && templateLength > 0) {
          this.template.forEach((item) => {
            if (!this.model[item.prop] && this.model[item.prop] !== 0 && this.model[item.prop] !== false) {
              if (item.type === 'select' && item.attrs.multiple) {
                this.$set(this.model, item.prop, []);
              } else {
                this.$set(this.model, item.prop, '');
              }
            }
          });
        if (this.baseTemplateLength) {
          if (templateLength <= this.baseTemplateLength) {
            template.baseTemplate = cloneDeep(this.template)
          } else if (templateLength > this.baseTemplateLength) {
            template.baseTemplate = this.template.slice(0, this.baseTemplateLength);
            template.moreTemplate = this.template.slice(this.baseTemplateLength);
          }
        }
        }
        return template;
      },
      set: function (val) {
        return val
      }
    }
  },
  activated () {
     this.isKeepAlive = false
  },
  deactivated () {
    this.isKeepAlive = true
  },
  watch: {
    data: {
      handler: function(val) {
        this.model = cloneDeep(val);
      },
      deep: true,
      immediate: true
    },
    baseTemplateLength(val, oldVal) {
      if (val && val !== oldVal) {
        if(this.copyTemplate.length <= val) {
          this.copyTemplate.baseTemplate = cloneDeep(this.template)
        }
        if (this.copyTemplate.length > val) {
          this.copyTemplate.baseTemplate = this.template.slice(0, val)
          this.copyTemplate.moreTemplate = this.template.slice(val)
        }
      }
    }
  },
  data() {
    return {
      model: {
        content: ''
      },
      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: [],
      showMoreSearch: false,
      baseTemplateLength: 3,
      isKeepAlive: false
    };
  },
  created () {
    this.currentMultipleValue = cloneDeep(this.multipleValue)
    this.copyMultipleValue = cloneDeep(this.multipleValue)
    this.throttleResizeFormItem = throttle(300, this.resizeFormItem)
    this.debounceChange = debounce(800, this.change)
    this.debounceInputChange = debounce(1000, this.inputChangeEmit)
  },
  mounted() {
    addResizeListener(this.$el, this.throttleResizeFormItem);
  },
  beforeDestroy(){
    if (this.$el) {
      removeResizeListener(this.$el, this.throttleResizeFormItem);
    }
  },
  methods: {
    inputChangeEmit(event) {
      this.$emit('change', cloneDeep(this.model), event)
    },
    resizeFormItem () {
      if (this.isKeepAlive) return
      const width = this.$refs.aosSearchOp.offsetWidth;
      // console.log('=aosSearchOp width==', width, (width - 410) / 310)
      let baseTemplateLength = Math.floor((width - 410) / 310)
      // if(width <= 869){
      //   baseTemplateLength = 1
      // } else if(width > 869 && width <= 1168){
      //  baseTemplateLength = 2
      // } else if(width > 1168 && width <=1600){
      //   baseTemplateLength = 3
      // } else if(width > 1600){
      //   baseTemplateLength = 4
      // }
      this.baseTemplateLength = baseTemplateLength
    },
    resetMultipleValue () {
      this.copyMultipleValue = cloneDeep(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.debounceChange()
      this.resetMultipleValue()
      this.$refs.aosSearchMultipleInput.closeSuggestions()
    },
    handleSearchReset() {
      let modelKeys;
      if (this.model && Object.keys(this.model).length > 0) {
        modelKeys = Object.keys(this.model);
        modelKeys.forEach(item => {
          this.model[item] = '';
        });
      }
      if (this.inputType === 'multiple') {
        this.$refs.aosSearchMultipleInput.clearAllTags()
      }
      this.model.content = ''
      this.$emit('reset', this.model,this.selectMultipleValue.slice())
      this.debounceChange()
    },
    handleClear() {
      this.$emit('clear', this.model);
    },
    handleBlur(event) {
      this.$emit('blur', event, this.model);
    },
    handleInput(event) {
      this.$emit('input', cloneDeep(this.model), event)
      this.debounceInputChange(event)
    },
    handleFocus(event) {
      this.$emit('focus', event, this.model);
    },
    handleChange(event) {
      this.$emit('change',this.model, event);
    },
    handleSelect (data, multipleData) {
      this.model.content = ''
      this.$emit('select', data, multipleData)
      this.selectMultipleValue = cloneDeep(multipleData)
      this.resetMultipleValue()
    },
    handleDeleteTag (tag, multipleData) {
      this.$emit('delete-tag', tag, multipleData)
      this.selectMultipleValue = cloneDeep(multipleData)
    },
    handleMoreSearchClick(){
      this.showMoreSearchMenu = !this.showMoreSearchMenu;
      this.$nextTick(() => {
        this.containerHeight = this.$refs.aosMoreSearch.offsetHeight + 'px';
      });
    },
    formHandleEmit(item, type) {
      if (type === 'input') {
        this.debounceInputChange()
      }
      if (type === 'change') {
        this.debounceChange()
      }
      if (item.methods && item.methods[type]) {
        this.$emit(
          'search-' + item.prop + '-' + item.methods[type],
          cloneDeep(this.model),
          item.prop
        );
      } else {
      }
    },
    change() {
      this.$emit('change',cloneDeep(this.model))
    },
    getModel () {
      return cloneDeep(this.model)
    },
    /**
     * 字典事件
     */
    handleDefdocEmit(data, item, type) {
      if (type === 'change') {
        this.model[item.prop] = data;
        this.debounceChange()
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], cloneDeep(this.model), item.prop, data);
      }
    },
    handleNumberRangeEmit(data, item, type) {
      if (type === 'change') {
        this.model[item.prop] = data;
        this.debounceChange()
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], cloneDeep(this.model), item.prop, data);
      }
    },
    // money事件
    handleMoneydocEmit(data, item, type) {
      if (type === 'change' || type === 'blur') {
        this.model[item.prop] = data;
      }
      if (type === 'change') {
        this.debounceChange()
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], cloneDeep(this.model), item.prop, data);
      }
    },
    /**
     * 参照选择之后触发
     * refData: 获取到的参照的数据
     * item: 当前组件数据
     * type: 当前方法
     * 返回事件:
     */
    handleRefEmit(data, item, type) {
      if (type === 'change') {
        this.model[item.prop] = data;
        this.debounceChange()
      }
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], cloneDeep(this.model), item.prop, data);
      }
    },
    handleCityEmit(item, value, type) {
      if (item.methods && item.methods[type]) {
        this.$emit('search-' + item.prop + '-' + item.methods[type], value, cloneDeep(this.model));
      }
    },
    /**
     * @description: 设置基本表单表单对应项的属性值
     * @param {type} prop prop属性, attes 属性, value 属性值, type 是否是列item为列,默认为attrs属性值
     * @return:
     */
    setFormItemProp(prop, attrs, value, type) {
      let length = this.copyTemplate.length;
      for (let i = 0;i < length;i++) {
        if (this.copyTemplate[i].prop === prop) {
          if (!type || type === 'attrs') {
            if (!this.copyTemplate[i].attrs) {
              this.$set(this.copyTemplate[i], 'attrs', {});
            }
            this.$set(this.copyTemplate[i].attrs, attrs, value);
          } else if (type === 'item') {
            this.$set(this.copyTemplate[i], attrs, value);
          } else if (type === 'attrsItem') {
            let key = value.key;
            let values = value.value;
            let attrsItem = value.attrsItem;
            this.$set(this.copyTemplate[i].attrs[attrsItem], key, values);
          }
          break;
        }
      }
    },
  }
};
</script>

