<template>
  <el-row class="JNPF-common-search-box" :gutter="16" v-if="searchList.length">
    <!--    <ColumnFilter @onAddSearchChange="SearchFilterChange" ref="ColumnFilter" v-if="setSeachFlag"></ColumnFilter>-->
    <el-form @submit.native.prevent>
      <el-col :span="relationSpan" v-for="(item, index) in searchList" :key="index">
        <el-form-item :label="item.__config__.label" v-show="index < 3 || (index >= 3 && showAll)">
          <!--          设置搜索过滤器-->
          <template>
            <template v-if="item.__config__.viewDataType === 'STRING'">
              <template>
                <el-input v-model="item.value" :placeholder="item.__config__.label" clearable class="item"> </el-input>
              </template>
            </template>
            <template v-else-if="item.__config__.viewDataType === 'NUMBER'">
              <template>
                <num-range v-model="item.value"></num-range>
              </template>
            </template>
            <template v-else-if="item.__config__.viewDataType === 'DATETIME'">
              <el-date-picker v-model="item.value" value-format="timestamp" :format="getformat(item.format)" start-placeholder="开始日期" end-placeholder="结束日期" class="item" type="daterange" />
            </template>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">{{ $t('common.search') }} </el-button>
          <el-button icon="el-icon-refresh-right" @click="reset()">{{ $t('common.reset') }} </el-button>
          <template v-if="searchList.length > 3">
            <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll"> 展开 </el-button>
            <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else> 收起</el-button>
          </template>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { deepClone } from '@/utils'
import { dyOptionsList, useDateList, useInputList, useSelectList } from '@/components/Generator/generator/comConfig'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
import ColumnFilter from '@/components/ColumnFilter/index'

export default {
  props: ['list'],
  components: { ColumnFilter },
  data() {
    return {
      showAll: false,
      setSeachFlag: false,
      searchList: [],
      commonList: ['comSelect', 'depSelect', 'posSelect', 'userSelect', 'dicSelect'],
      useInputList,
      useDateList,
      useSelectList,
      selectSearchId: null,
      relationSpan: 12
    }
  },
  watch: {
    list: {
      handler: function (val) {
        this.searchList = deepClone(val)
        // this.buildOptions(this.searchList)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    if (window.innerWidth < 767) {
      this.relationSpan = 24
    }
    this.search()
  },
  methods: {
    getformat(format) {
      let str
      if (format === 'yyyy_MM_ddhh$mm$ss') {
        str = 'yyyy-MM-dd HH:mm:ss'
      } else {
        str = 'yyyy-MM-dd'
      }
      return str
    },
    buildOptions(componentList) {
      componentList.forEach((cur) => {
        const config = cur.__config__
        if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
          let isTreeSelect = config.jnpfKey === 'treeSelect' || config.jnpfKey === 'cascader'
          if (config.dataType === 'dictionary') {
            if (!config.dictionaryType) return
            getDictionaryDataSelector(config.dictionaryType).then((res) => {
              isTreeSelect ? (cur.options = res.data.data.list) : (cur.__slot__.options = res.data.data.list)
            })
          }
          if (config.dataType === 'dynamic') {
            if (!config.propsUrl) return
            previewDataInterface(config.propsUrl).then((res) => {
              isTreeSelect ? (cur.options = res.data.data) : (cur.__slot__.options = res.data.data)
            })
          }
        }
      })
    },
    search() {
      let arr = []
      for (let i = 0; i < this.searchList.length; i++) {
        const e = this.searchList[i]
        if (e.value) {
          let obj = {}
          if (Array.isArray(e.value)) {
            if (e.value.length) {
              obj.cubeColumnId = e.__vModel__
              obj.function = e.__config__ && e.__config__.viewDataType === 'STRING' ? (e.function = 'like') : e.__config__.viewDataType === 'NUMBER' ? (e.function = 'between') : 'between'
              obj.values = e.value
              arr.push(obj)
            }
          } else {
            obj.cubeColumnId = e.__vModel__
            obj.function = e.__config__ && e.__config__.viewDataType === 'STRING' ? (e.function = 'like') : e.__config__.viewDataType === 'NUMBER' ? (e.function = 'between') : 'between'
            obj.values = [e.value]
            arr.push(obj)
          }
        }
      }
      let json = JSON.stringify(arr) === '[]' ? [] : JSON.stringify(arr)
      this.$emit('search', json)
    },
    //排空
    filterNullArr(values) {
      try {
        return values
          .map((o, i) => {
            if (o !== '') {
              return o
            }
          })
          .filter((l) => l !== undefined)
      } catch {
        return values
      }
    },
    reset() {
      this.searchList = deepClone(this.list)
      this.search()
    },
    treeReset() {
      this.searchList = deepClone(this.list)
    }
  }
}
</script>
<style lang="scss" scoped>
.elSearchIcon {
  cursor: pointer;
  position: absolute;
  top: -4px;
  right: -20px;
}
</style>
