<script setup>

import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";

const props = defineProps({
  queryParams: {
    type: Object,
  },
  queryRef: {
    type: String,
    default: 'queryRef'
  },
  inline: {
    type: Boolean,
    default: false
  },
  showSearch: {
    type: Boolean,
  },
  labelWidth: {
    type: String,
    default: '68px'
  }
})
const emits = defineEmits(['search','refresh'])
const {proxy} = getCurrentInstance()
const formData = reactive({
  search: false
});
const handleQuery = () => {
  emits('search')
}
const resetQuery = () => {
  proxy.resetForm(props.queryRef)
  emits('refresh')
}
</script>

<template>
  <el-form
      :model="queryParams"
      :ref="queryRef"
      :inline="inline"
      v-show="showSearch"
      :label-width="labelWidth"
  >
    <el-row :gutter="16">
      <slot name="one"></slot>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" :xxl="6" style="padding-bottom: 10px;">
        <el-space>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" text @click="formData.search = !formData.search">
            <template #icon>
              <ArrowUp v-if="formData.search"/>
              <ArrowDown v-else/>
            </template>
            <template #default>{{ formData.search ? "收起" : "展开" }}</template>
          </el-button>
        </el-space>
      </el-col>
    </el-row>

    <el-row :gutter="16">
      <TransitionGroup name="other-search">
        <slot name="other" v-if="formData.search"></slot>
      </TransitionGroup>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">

</style>
