<template>
  <div
    class="search-form"
    :class="{ close: !search_open }"
  >
    <Form
      ref="form"
      class="form"
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
    >
      <el-col
        v-if="!isShowSpread||(search_open&&isShowSpread)"
        :span="4"
        :class="searchStyle"
      >
        <div
          class="search"
          :style="isShowSpread?'text-align:right':''"
        >
          <slot name="defineBtn" />
          <el-button
            type="primary"
            size="small"
            @click="searchSubmit"
          >查询</el-button>
          <!--  icon="el-icon-search" -->
          <el-button
            size="small"
            plain
            @click="reset"
          >重置</el-button>
          <el-button
            v-if="search_open&&isShowSpread"
            type="text"
            size="small"
            @click="searchOpenClose(false)"
          >收起<i class="el-icon-arrow-up" /></el-button>
        </div>
      </el-col>
    </Form>
    <div
      v-if="!search_open&&isShowSpread"
      class="search"
      :style="isShowSpread?'text-align:right':''"
    >
      <slot name="defineBtn" />
      <el-button
        type="primary"
        size="small"
        @click="searchSubmit"
      >查询</el-button>
      <!--  icon="el-icon-search" -->
      <el-button
        size="small"
        plain
        @click="reset"
      >重置</el-button>
      <el-button
        type="text"
        size="small"
        @click="searchOpenClose(true)"
      >展开<i class="el-icon-arrow-down" /></el-button>
    </div>
  </div>
</template>

<script>
import Form from '../form';
export default {
  components: {
    Form,
  },
  props: {
    formArr: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      search_open: false,
    };
  },
  computed: {
    isShowSpread() {
      return this.formArr.reduce((sum, item) => sum + item.span, 0) > 24;
    },
    searchStyle() {
      return this.formArr.length % 6 === 0 ? 'search-class' : '';
    },
  },
  watch: {},
  created() {},
  methods: {
    outOperation(val, index, prop, num) {
      this.$emit('outOperation', val, index, prop, num);
    },
    searchSubmit() {
      if (this.$refs.form.submitForm()) {
        this.$emit('searchSubmit', this.formData);
      } else {
        console.log('submitForm Error');
      }
    },
    reset() {
      this.$emit('reset');
    },
    resetForm() {
      this.$refs.form.resetForm();
    },
    searchOpenClose(boolean) {
      this.search_open = boolean;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-form {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--bg-color-2);
  padding: 8px;
  .form {
    flex: 1;
  }
  .search {
    width: 220px;
    padding:3px 8px 0 ;

  }
}
.search-class{
  float:right;
  .search{
    float:right
  }
}
.close {
  height: 50px;
  // overflow: hidden;
}
</style>
