<template>
  <a-form
    v-if="isopen"
    v-bind="formItemLayout"
    :class="$style.antAdvancedSearchForm"
    :form="form"
    @submit="handleSearch"
  >
    <slot name="search"></slot>
    <a-row>
      <a-col :class="$style.searchbutton" :span="24">
        <a-button @click="closefilter">
          关闭
        </a-button>
        <a-button @click="handleReset">
          清空
        </a-button>
        <a-button type="primary" html-type="submit">
          查询
        </a-button>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import components from './_import-components/sd-super-search-form-import'

export default {
  name: 'SdSuperSearchForm',
  components,
  props: {
    isopen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      form: this.$form.createForm(this, { name: 'advanced_search' }),
    }
  },
  computed: {
    count() {
      return this.expand ? 11 : 7
    },
  },
  methods: {
    handleSearch(e) {
      e.preventDefault()
      this.form.validateFields((error, values) => {
        if (error) {
          // eslint-disable-next-line no-console
          console.log('高级查询出现错误')
        } else {
          this.$emit('search-submit', values)
        }
      })
    },

    handleReset() {
      this.form.resetFields()
    },

    closefilter() {
      this.$emit('superBtnClick')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.ant-advanced-search-form {
  padding: 24px;
  margin: 15px 0;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  :global(.ant-form-item) {
    display: flex;
  }
  :global(.ant-form-item-control-wrapper) {
    flex: 1;
  }
  .searchbutton {
    text-align: right;
    :global(.ant-btn) {
      margin-right: 16px;
    }
  }
}
</style>
