<template>
<!--  <Form class="search-form" v-model="searchParams" :labelWidth="labelWidth">-->
  <el-form ref="form" :model="value" @submit.native.prevent
             class="search-form detail-form" :label-width="labelWidth"
             size="medium" :inline="inline" :disabled="disabled"
             label-suffix="：" >
    <slot name="searchFix" :params="value"></slot>
    <Transition name="fade">
      <div v-if="showHide && isOpen == 1">
        <slot name="search" :params="value"></slot>
      </div>
    </Transition>
    <Cell class="search-buttons">
      <el-button type="primary" icon="el-icon-search" pageSize="small" size="small" @click="search">{{ $t('common.search') }}</el-button>
      <el-button icon="el-icon-refresh" pageSize="small" size="small" v-if="showReset" @click="resetList">{{ $t('common.reset') }}</el-button>
    </Cell>
    <el-row>
      <div style="width: 100%;text-align: center" class="openHide">
        <el-button icon="el-icon-arrow-down" pageSize="small" size="small" v-if="showHide && isOpen == 0"
                   @click="searchHide">{{ $t('common.launch') }}
        </el-button>
        <el-button icon="el-icon-arrow-up" pageSize="small" size="small" v-if="showHide && isOpen == 1"
                   @click="searchHide">{{ $t('common.retract') }}
        </el-button>
      </div>
    </el-row>
  </el-form>

</template>

<script>
import Cell from "./items/Cell";
export default {
  name: "CardForm",
  components: {Cell},
  props: {
    inline: {
      type: Boolean,
      default: true,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    showHide: {
      type: Boolean,
      default: false
    },
    showReset: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '300px',
    },
    defaultParams: {
      type: Object,
      default: () => {
      },
      desc: '为查询表单设置默认值',
    },
    //搜索时不需要的参数
    delProp: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localParams: this.defaultParams, // 初始化本地属性
      searchParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        ...this.localParams
      },
      modalData: [],
      tempData: [],
      loading: false,
      selections: [],
      excludeData: [],
      delRows: [],
      visibleTable: true,
      highlightRow: '',
      searchParamsCache: null,
      scrollPosition: 0,// 存储滚动位置,
      //0收起 1展开
      isOpen: 0,
      response: null,
      visible: false,
    }
  },
  destroyed() {
    // 销毁enter事件
    // this.enterKeyupDestroyed();
  },
  methods: {
    changeLoading(item) {
      this.loading = item
    },
    searchHide() {
      this.isOpen = 1 - this.isOpen
      this.$emit("searchHide")
    },
    search() {
      this.value.pageNum = 1
      let searchQuery = JSON.parse(JSON.stringify(this.value))
      if (this.delProp && this.delProp.length > 0) {
        this.delProp.forEach(prop => {
          delete searchQuery[prop]
        })
      }
      this.$emit('getList',searchQuery);
    },
    resetList() {
      //重置
      this.$emit('resetList')
    },
    validate() {
      return this.$refs.form.validate()
    },
    resetFields() {
      return this.$refs.form.resetFields()
    },
    clearValidate() {
      return this.$refs.form.clearValidate()
    },
  }
}
</script>

<style lang="scss" scoped>
.openHide{

}
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.fade-leave-active .fade-enter-active{
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
  .search-form{
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px #CED6DD;
    padding: 15px 10px;
  }
.search-buttons {
  margin-left: 10px
}
  .openHide{
    button{

    }
  }
</style>
