<template>
  <div id="searchForm">
    <el-row :gutter="20">
      <el-col :span="splitSpan">
        <cptFormRender :formItemList="itemList.slice(0,3)" :searchObject="searchInfo" :labelWidth="labelWidth">
          <div v-for="(item,index) in slotList" :key="index" :slot="item">
            <slot :name="item"></slot>
          </div>
        </cptFormRender>
      </el-col>
      <el-col :span="24-splitSpan">
        <div class="btn-group">
          <el-button size="small" type="primary" @click="search(1)">查询</el-button>
          <el-button size="small" @click="resetSearch">重置</el-button>
          <el-button size="small" v-if="multiSearch" @click="showSearch=!showSearch">
            {{showSearch?'收起':'展开'}}
            <i class="el-icon-arrow-up" v-if="showSearch"></i>
            <i class="el-icon-arrow-down" v-else></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <el-row v-if="showSearch" :gutter="20">
        <el-col :span="splitSpan">
          <cptFormRender :formItemList="itemList.slice(3)" :searchObject="searchInfo" :labelWidth="labelWidth">
            <div v-for="(item,index) in slotList" :key="index" :slot="item">
              <slot :name="item"></slot>
            </div>
          </cptFormRender>
        </el-col>
      </el-row>
    </el-collapse-transition>
  </div>
</template>

<style lang="less" scoped>
  .btn-group {
    /*text-align: right;*/
    padding-left: 10px;
  }
</style>

<script>
    import cptFormRender from './cptFormRender'
    export default {
        name: 'enoSearchForm',
        data() {
            return {
                searchInfo: {},
                showSearch: !this.multiSearch,
                slotList:[]
            }
        },
        components: {
            cptFormRender,
        },
        props: {
            itemList: {
                type: Array,
                require: true,
            },
            onQuery: Function,
            multiSearch: {
                type: Boolean,
                default: false,
            },
            labelWidth: {
                type: String,
                default: '100px',
            },
            sliceIndex: {
                type: Number,
                default: 3,
            },
            splitSpan: {
                type: Number,
                default: 18,
            },
        },
        mounted() {
            let searchInfo = sessionStorage.getItem('record_searchInfo')
            if(searchInfo){
                this.searchInfo = JSON.parse(searchInfo)
            }
            this.search();
            this.itemList.forEach(item=>{
              if(item.type=='custom'&&item.slotName){
                this.slotList.push(item.slotName)
              }
            })
        },
        methods: {
            search: function (pageNumber, pageSize) {
                if (pageNumber) {
                    this.$store.commit('updatePageIndex', pageNumber)
                }
                if (pageSize) {
                    this.$store.commit('updatePageSize', pageSize)
                }
                this.$store.commit('updateSearchInfo', {
                    ...this.searchInfo,
                    current: this.$store.state.pageIndex,
                    size: this.$store.state.pageSize,
                })
                if (this.onQuery && this.onQuery.constructor === Function) {
                    this.onQuery({
                        ...this.searchInfo,
                        current: this.$store.state.pageIndex,
                        size: this.$store.state.pageSize,
                    })
                }
            },
            resetSearch: function () {
                this.searchInfo = {}
                this.search(1, 10)
            },
        },
    }
</script>
