<template>
  <van-form :input-align="inputAlign" :label-width="10" class="ibps-search-form">
    <van-collapse
      v-model="activeNames"
    >
      <template v-for="(item,i) in forms">
        <van-cell
          v-if="item.fieldType!=='checker'"
          :key="item.prop+i"
          :title="item.label"
          :border="false"
          class="ibps-search-field__label"
        />
        <!-- IbpsChecker -->
        <!-- <ibps-checker
          v-else-if="item.fieldType==='checker'"
          :key="i"
          v-model="params[item.modelValue]"
          :name="item.prop"
          :value-key="item.valueKey"
          :options="item.options"
          :cols="item.cols"
          :option-align="item.optionAlign||'center'"
          checker
          label=""
        /> -->

        <van-collapse-item v-else-if="item.fieldType==='checker'" :key="item.prop+i" :title="item.label" :name="item.modelValue+i">
          <ibps-checker
            :key="i"
            v-model="params[item.modelValue]"
            :name="item.prop"
            :value-key="item.valueKey"
            :options="item.options"
            :cols="item.cols"
            :option-align="item.optionAlign||'center'"
            :input-align="inputAlign"
            checker
            label=""
          />
        </van-collapse-item>

        <!-- 单行文本--数字--数字范围 -->
        <van-field
          v-if="item.fieldType==='text' ||item.fieldType==='textarea' || item.fieldType==='number'|| item.fieldType==='numberRange' ||item.fieldType === undefined"
          :key="i"
          v-model="params[item.modelValue]"
          :name="item.prop"
          :type="item.fieldType||'text'"
          :input-align="inputAlign"
          placeholder="请输入"
          autocomplete="off"
          autosize
          clearable
          border
        />
        <!-- 隐藏域 -->
        <input v-else-if="item.fieldType==='hidden'" :key="i" :value="value" type="hidden">
        <!-- 下拉 -->
        <ibps-select
          v-else-if="item.fieldType==='select' || item.fieldType==='radio' || item.fieldType==='checkbox'"
          :key="i"
          v-model="params[item.modelValue]"
          :input-align="inputAlign"
          :name="item.prop"
          :value-key="item.valueKey||'val'"
          :options="item.options"
          placeholder="请选择"
          label=" "
        />

        <!-- 日期 -->
        <ibps-date-picker
          v-else-if="item.fieldType==='datePicker'"
          :key="i"
          v-model="params[item.modelValue]"
          placeholder="请选择"
          :input-align="inputAlign"

          :name="item.prop"
          :type="getFieldOptions(item,'datefmt_type','custom')"
          :format="getFieldOptions(item,'datefmt','yyyy-MM-dd')"
          clearable
          label=" "
        />
        <!-- 日期范围 -->
        <ibps-date-range
          v-else-if="item.fieldType==='dateRange'"
          :key="i"
          ref="daterange"
          v-model="params[item.modelValue]"
          :input-align="inputAlign"
          :type="getFieldOptions(item,'datefmt_type','custom')"
          :format="getFieldOptions(item,'datefmt','yyyy-MM-dd')"
          placeholder="请选择"
          label=" "
          @input="val=> dateInput(val, item)"
        />

        <!-- 自定义插槽 -->
        <template v-else>
          <slot :name="item.slotName" :item="item" />
        </template>
      </template>
    </van-collapse>

  </van-form>
</template>
<script>
import IbpsSelect from '@/components/ibps-select'
import IbpsChecker from '@/components/ibps-checker'
import IbpsDateRange from '@/components/ibps-date-range'
export default {
  components: {
    IbpsSelect,
    IbpsChecker,
    IbpsDateRange
  },
  props: {
    forms: {
      type: Array
    },
    inputAlign: {
      type: String,
      default: 'left'
    }

  },
  data() {
    const forms = this.forms
    const params = {}
    const datePrefix = 'daterange-prefix'
    const nameParams = {}
    const format = {}
    forms.forEach((v, i) => {
      const propType = typeof v.prop
      if (propType === 'string') {
        v.modelValue = v.prop
        params[v.prop] = ''
        if (v.name) {
          nameParams[v.prop] = v.name
        }
        if (v.format) {
          format[v.prop] = v.format
        }
      } else if (propType === 'object' && Object.prototype.toString.call(v.prop) === '[object Array]') {
        v.prop.forEach((vv, j) => {
          params[vv] = ''
          if (v.name) {
            nameParams[vv] = v.name[j]
          }
          if (v.format) {
            format[vv] = v.format
          }
        })
      }
      if (v.fieldType === 'dateRange') {
        const key = datePrefix + i
        params[key] = ''
        v.modelValue = key
      }
    })
    return {
      params: params,
      nameParams: nameParams,
      format: format,
      datePrefix: datePrefix,
      defaultData: {},

      activeNames: []
    }
  },
  computed: {
    fieldOptions() {
      return this.item.options || {}
    },
    /**
     * 单选、多选、下拉等选项
     */
    options() {
      return this.fieldOptions['options'] || []
    }
  },
  created() {
    this.defaultData = JSON.parse(JSON.stringify(this.params))
    this.getActiveNames()
  },
  methods: {
    getActiveNames() {
      this.activeNames = []
      this.forms.forEach((el, i) => {
        if (el.fieldType === 'checker') {
          this.activeNames.push(el.modelValue + i)
        }
      })
    },
    getFieldOptions(item, key, defaultVal) {
      if (!item) {
        return defaultVal
      }
      const fieldOptions = item.options || {}
      if (this.$utils.isEmpty(fieldOptions) || !fieldOptions[key]) {
        return defaultVal
      }
      return fieldOptions[key]
    },
    dateInput(date, form) {
      let dates = ['', '']
      if (date !== null) {
        if (date.length === 2) {
          dates = date
        }
      }
      this.params[form.modelValue] = dates

      this.params[form.prop[0]] = dates[0]
      this.params[form.prop[1]] = dates[1]
    },
    getData() {
      const data = {}
      const { params, nameParams, datePrefix, format } = this
      Object.keys(params).forEach(v => {
        if (v.indexOf(datePrefix) === -1) {
          const val = format[v] ? format[v](params[v], v) : params[v]
          if (this.$utils.isNotEmpty(val)) {
            const key = nameParams[v] ? nameParams[v] : v
            data[key] = val
          }
        }
      })
      return data
    },
    resetSearchForm() {
      this.$refs['daterange'] ? this.$refs['daterange'][0].resetDate() : null
      this.params = JSON.parse(JSON.stringify(this.defaultData))
    }
  }
}
</script>
<style lang="scss">
.ibps-search-form{
  .van-collapse-item .van-collapse-item__content{
    padding: 0;
  }
}
</style>
