<!-- 自动生成搜索表单 -->
<template>
  <a-form layout="horizontal" class="ant-advanced-search-form">
    <a-row>
      <template v-for="(f, i) in list">
        <template v-if="f.filter.type == SearchType.RANGE  && (!collapsed || i < 3)">
          <a-col :span="6" :key="f.dataIndex">
            <a-form-item v-bind="formItemLayout" :label="f.title">
              <a-range-picker
                :showTime="f.filter.showTime"
                v-model="query[f.dataIndex]"
                :allowClear="true"
                style="width: 100%"
                @change="(value) => rangeChange(f, value)"
              />
            </a-form-item>
          </a-col>
        </template>

        <template v-if="f.filter.type == SearchType.DATE  && (!collapsed || i < 3)">
          <a-col :span="6" :key="f.dataIndex">
            <a-form-item v-bind="formItemLayout" :label="f.title">
              <a-date-picker
                v-model="query[f.dataIndex]"
                :allowClear="true"
                style="width: 100%"
                @change="(value) => dateChange(f, value)"
              />
            </a-form-item>
          </a-col>
        </template>

        <template v-if="f.filter.type == SearchType.STRING && (!collapsed || i < 3)">
          <a-col :span="6" :key="f.dataIndex">
            <a-form-item v-bind="formItemLayout" :label="f.title">
              <a-input
                v-model="query[f.dataIndex]"
                @change="(e) => strChange(f, e)"
                @pressEnter="reload"
              />
            </a-form-item>
          </a-col>
        </template>

        <template v-if="f.filter.type == SearchType.ENUM && (!collapsed || i < 3)">
          <a-col :span="6" :key="f.dataIndex">
            <a-form-item v-bind="formItemLayout" :label="f.title">
              <a-select
                v-model="query[f.dataIndex]"
                :allowClear="true"
                @change="(value) => selectionChange(f, value)"
                :options="options[f.enum]"
                :mode="f.filter.multiple ? 'multiple' : 'default'"
                show-search
                :filter-option="filterOption"
              />
            </a-form-item>
          </a-col>
        </template>

      </template>
      <a-col :span="6" style="float: right">
        <a-space style="margin-top:4px; float:right;margin-bottom: 15px">
          <a-button @click="onReset">重&nbsp;置</a-button>
          <a-button type="primary" @click="onSearch">查&nbsp;询</a-button>
          <a-button v-if="list.length > 3" type="link" @click="collapse">
            {{collapsed? '展开': '收起'}}
            <a-icon type="up" v-if="!collapsed" />
            <a-icon type="down" v-show="collapsed" />
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import _ from 'lodash'

const defaultDateFormat = 'YYYY-MM-DD'

export default {
  name: 'commonSearchForm',
  props: {
    query: Object,
    list: Array,
    options: Object,
    reload: Function,
    onSearch: Function,
    onReset: Function,
    onCollapse: Function,
  },
  model: {
    prop: 'query',
    event: 'queryChange',
  },
  data() {
    return {
      SearchType,
      collapsed: true,
      gap: 0,
      formItemLayout: {
        labelCol: {
          sm: { span: 8 },
        },
        wrapperCol: {
          sm: { span: 16 },
        },
      },
    }
  },

  methods: {
    rangeChange(column, values) {
      const be = {}
      if (values.length) {
        be[column.dataIndex + 'Begin'] = values[0].format(column.filter.format || defaultDateFormat)
        be[column.dataIndex + 'End'] = values[1].format(column.filter.format || defaultDateFormat)
      } else {
        be[column.dataIndex + 'Begin'] = ''
        be[column.dataIndex + 'End'] = ''
      }
      this.$emit('queryChange', _.merge(this.query, be))
      this.$nextTick(() => {
        this.reload && this.reload()
      })
    },

    dateChange(c, val) {
      const dt = {}
      if (val) {
        dt[c.dataIndex] = val.format(c.filter.format || defaultDateFormat)
      } else {
        dt[c.dataIndex] = ''
      }
      this.$emit('queryChange', _.merge(this.query, dt))
      this.$nextTick(() => {
        this.reload && this.reload()
      })
    },

    strChange(c, { target: { value } }) {
      this.$emit('queryChange', _.merge(this.query, { [c.dataIndex]: value }))
    },

    selectionChange(c, val) {
      this.$emit('queryChange', _.merge(this.query, { [c.dataIndex]: val }))
      this.$nextTick(() => {
        this.reload && this.reload()
      })
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 展开
    collapse() {
      this.onCollapse(this.collapsed? this.gap: 0)
      this.collapsed = !this.collapsed
    }

  },

  mounted() {
    // 初始化一些必要数据
    // this.list.forEach();
    // 计算修改量
    const count = Math.ceil((this.list.length - 3) / 4)
    if(count <= 0) {
      this.gap = 0
    } else {
      this.gap = count * 55
    }
  },
}

/**
 * @typedef {Object} SearchType
 * @property {String} RANGE
 * @property {String} DATE
 * @property {String} STRING
 * @property {String} ENUM
 */

/**
 * @type SearchType
 */
const SearchType = {
  RANGE: 'range', // 时间范围
  DATE: 'date', // 日期
  STRING: 'str', // 字符串
  ENUM: 'enum', // 下拉选择
}
export { SearchType }
</script>
