<!--表格自定义列设置的抽屉弹框组件-->
<template>
  <el-row>
    <el-form id="searchForm" ref="searchForm" :model="model" :rules="rules" :inline="true" @keyup.enter.native="search">
      <slot />
      <slot name="buts" />
      <el-button v-show="collapsiable" type="text" @click="shiftCollapsiable">
        <span>
          {{ fold ? '收起' : '展开搜索' }}
          <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
        </span>
      </el-button>
    </el-form>
  </el-row>
</template>
<script>
export default {
  name: 'SearchFoldForm',
  props: {
    // 最大展示数，默认3个，超过则隐藏，为0时不限制
    maxShow: {
      type: Number,
      default: 3
    },
    model: {},
    rules: {}
  },
  data() {
    return {
      collapsiable: false,
      fold: false
    }
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowCtrol()
    }
  },
  methods: {
    validate(fn) {
      this.$refs.searchForm.validate((valid) => {
        return fn(valid)
      })
    },
    // 清除校验规则
    resetFields() {
      this.$refs.searchForm.resetFields()
    },
    shiftCollapsiable() {
      this.fold = !this.fold
      this.minShowCtrol()
    },
    minShowCtrol() {
      const group = window.document.querySelectorAll('#searchForm .el-form-item.el-form-item--medium')
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.style = !this.fold ? 'display:none' : 'display:inline-block'
          }
        })
        this.collapsiable = true
      } else {
        this.collapsiable = false
      }
    },
    search() {
      this.$emit('search')
    }
  }
}
</script>
