<template>
  <el-form
      :model="form"
      v-bind="$attrs"
      label-width="auto"
      ref="formInstance"
      class="search-form"
      @submit.prevent="getValues"
  >
    <el-row>
      <el-col
          v-for="(item, index) in filterConfig"
          :span="5"
          :offset="index == 0 || index / 4 ==1 ? 0 : 1"
          :key="item.prop"
      >
        <el-form-item
            v-bind="item"
            :key="item.prop"
        >
          <template #default>
            <component
                :is="item.component"
                v-bind="item.props || {}"
                v-on="item.on || {}"
                v-model="form[item.prop]"
                @keyup.enter.native="getValues"
                @change="elChange"
            >
            </component>
          </template>
        </el-form-item>
      </el-col>
<!--      class="btn-col"-->
      <el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
        <el-form-item>
          <el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
            {{ showMore ? '收起' : '展开' }}
          </el-button>
          <el-button @click="getValues" color="#DED0B2" :icon="Search">搜索</el-button>
          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import {Refresh, Search} from '@element-plus/icons-vue'

const props = defineProps({
  searchConfig: {
    type: Array,
    default: []
  },
  //搜索参数
  searchProp: {
    type: String,
    default: ''
  },
  //搜索值
  searchValue: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['getInstance', 'search'])

const form = ref({})
const formInstance = ref(null)

const showMore = ref(false)

const filterConfig = computed(() => {
  const arr = props.searchConfig.filter(item => {
    if (item.prop) return true
  })
  return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
})
const setForm=(prop,value)=>{
  form.value[prop]=value
  return form.value;
}
// 搜索功能表单元素默认值
// const setDefaultFormValues = () => {
//   filterConfig.value.forEach(item => {
//     form.value[item.prop] = item.props?.defaultValue || null
//   })
// }

watchEffect(() => {
  if (filterConfig.value.length) {
    // setDefaultFormValues()
  }
  if(props.searchProp&&props.searchValue){
    setForm(props.searchProp,props.searchValue)
  }
})

const elChange = () => {
  setTimeout(() => {
    getValues()
  }, 500)
}

const getValues = () => {
  emits('search', form.value)
  return form.value
}

//重置
const handleReset = () => {
  form.value = {}
  // setDefaultFormValues()
  emits('search', form.value)
}

onMounted(() => {
  emits('getInstance', Object.assign({}, unref(formInstance), {
    getValues,
    handleReset,
  }))
})

</script>

<style lang="scss" scoped>
.search-form {
  padding-top: 18px;
}

.btn-col {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

</style>
<style lang="scss">
.search-form{
  //绘制下拉选择框远程搜索时右侧的箭头
  .el-select {
    .el-select__wrapper {
      .el-select__suffix::before {
        content: "";
        width: 6px;
        height: 6px;
        border: solid #a8abb2;
        border-width: 0 0 1px 1px;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }

    .is-focused {
      .el-select__suffix::before {
        margin-top: 10px;
        transform: translate(-50%, -50%) rotate(-225deg) !important;
      }
    }
  }

}
</style>
