<template>
  <div class="">
    <el-popover width="600" trigger="hover">
      <template slot="reference">
        <el-button
          class="mx-10"
          type="primary"
          size="mini"
          icon="el-icon-search"
        >
          搜索条件
        </el-button>
      </template>


    <el-form
      ref="elFormRef"
      :inline="true"
      :model="model"
      class="filter"
      v-bind="$attrs"
      v-on="$listeners"
      @submit.native.prevent
    >
      <div class="flex-col form-popup-area">
        <el-row ref="customRowRef" :gutter="15" class="custom-row flex-1" flex>
          <slot></slot>
        </el-row>
        <slot name="footer">
          <div class="mt-10">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="query"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="reset">
              重置
            </el-button>
          </div>
        </slot>
      </div>
    </el-form>
  </el-popover>
  </div>
</template>

<script>
const SET_TING = {
  input: {
    group: 'quick',
    operation: 'LIKE',
    relation: 'OR',
  },
  'select,date,dateTime,checkbox,radio': {
    group: 'quick',
    operation: 'EQUAL',
    relation: 'OR',
  },
}
export default {
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
    queryText: {
      type: String,
      default: '查询',
    },
    resetText: {
      type: String,
      default: '重置',
    },
  },
  data() {
    return {
      config: {},
    }
  },
  methods: {
    handleData(data) {
      const res = {}
      const res_ = []

      Object.keys(data).forEach((key) => {
        res[key] = data[key]
        const item = this.config[key]
        const keys = Object.keys(SET_TING)
        let conf = {}
        keys.forEach((k) => {
          if (k.includes(item?.elType)) {
            conf = SET_TING[item.elType]
          } else {
            conf = SET_TING.input
          }
        })

        res_.push({
          ...conf,
          ...(item?.filterConfig || {}),
          value: data[key],
          property: key,
        })
      })

      return {res, res_}
    },
    query() {
      this.$refs.elFormRef.validate((valid) => {
        if (valid) {
          const {res, res_} = this.handleData(this.model)

          this.$emit('query', res_, res)
        }
      })
    },
    reset() {
      const data = this.handleData(this.model)
      this.$emit('reset', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.form-popup-area {
  min-height: 100px;
}
.form-panl {
  max-height: 46px;
  transition: max-height 0.5s;
  overflow: hidden;
  &.auto-h {
    max-height: 100vh;
  }
}

.more-btn {
  i {
    transition: transform 0.5s;
    transform: rotate(0deg);
    &.rotate {
      transform: rotate(-180deg);
    }
  }
}
</style>
