<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline" @keyup.enter.native="handleSearchQuery(field)">
      <a-row :gutter="24" v-if="queryInfo && queryInfo.length > 0">
        <template v-for="(item, index) in queryInfo">
          <template v-if="item.view === 'datetime' && item.mode !== 'single'">
            <a-col :sm="24" :md="12" :lg="11" :xl="10"
                   :key="'query' + index"
                   v-show="item.hidden !== '1' || showMoreQueryParams">
              <online-query-form-item
                :item="item"
                :query-param="queryParam"
                :dict-options="dictOptions"/>
            </a-col>
          </template>
          <template v-else>
            <a-col :sm="24" :md="8" :lg="7" :xl="6"
                   :key="'query' + index"
                   v-show="item.hidden !== '1' || showMoreQueryParams">
              <online-query-form-item
                :item="item"
                :query-param="queryParam"
                :dict-options="dictOptions"/>
            </a-col>
          </template>
        </template>
        <a-col :sm="24" :md="8" :lg="7" :xl="6">
          <div class="table-page-search-submitButtons table-operator">
            <a-button type="primary" icon="search" @click="handleSearchQuery">查询</a-button>
            <a-button type="primary" icon="reload" @click="handleSearchReset">重置</a-button>
            <a-button type="link" @click="handleToggleSearch">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>

import OnlineQueryFormItem from './OnlineQueryFormItem'
import {getAction} from "@/api/manage";

export default {
  name: 'CgformAutoListQueryParams',
  inject : ["handleSearchQuery", "handleSearchReset"],
  components : {
    OnlineQueryFormItem : OnlineQueryFormItem
  },
  props : {
    url : {
      type : Object,
      required : true
    },
    queryParam : Object,
    dictOptions : Object
  },
  data : function() {
    return {
      queryInfo : [],
      showMoreQueryParams : false
    };
  },
  watch : {
    "url.getQueryInfo" : {
      immediate : true,
      handler : function() {
        this.initial();
      }
    }
  },
  methods : {
    initial : function() {
      this.loadQueryInfo();
      this.showMoreQueryParams = false;
    },
    loadQueryInfo : function() {
      let self = this;
      getAction(this.url.getQueryInfo).then(function(data) {
        if (data.success) {
          self.queryInfo = data.result;
        } else {
          self.$message.warning(data.message);
        }
      });
    },
    handleToggleSearch : function() {
      this.showMoreQueryParams = !this.showMoreQueryParams;
    }
  }
}
</script>

<style scoped>

</style>