<template>
  <div class="cms-search-container" ref="cmsSearchContainer">
    <cms-query-form
      label-align="right" ref="queryFormRef" class="cms-search-form"
      :label-width="labelWidth"
      :form-model="queryParams"
      :form-rules="queryRules"
    >
      <el-row>
        <cms-query-item
          v-for="(item, index) in items"
          :prop="item.prop"
          :column="itemColumn"
          :key="index"
          :collapse.sync="collapse"
          :folding="index > (itemColumn ? itemColumn - 1 : 2)"
          :collapse-node="index > (itemColumn ? itemColumn - 1 : 2)"
          :label="item.label">
          <slot :name="item.prop"></slot>
        </cms-query-item>
        <cms-query-item
          v-for="(item, index) in extendTemplateFields"
          :prop="item.fieldKey"
          :column="itemColumn"
          :key="(index + items.length)"
          :collapse.sync="collapse"
          :folding="(index + items.length) > (itemColumn ? itemColumn - 1 : 2)"
          :collapse-node="(index + items.length) > (itemColumn ? itemColumn - 1 : 2)"
          :label="item.fieldName">
          <cms-extend-field-config
            v-model="queryParams[[item.fieldKey]]"
            :form-model="item"
            :field-name="'parameterValue'"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.fieldName"
            :constants="constants"
            :dictionary-config="dictionaryConfig"
            :props-config="item"/>
        </cms-query-item>
      </el-row>
    </cms-query-form>
    <div class="cms-search-tools">
      <cms-button-group size="small">
        <cms-button :disabled="disabled" size="small" @click="search" type="primary" icon="el-icon-search">
          {{ this.$t("common.button.search") }}
        </cms-button>
        <cms-button size="small" :disabled="disabled" @click="reset" icon="el-icon-s-promotion">
          <span>{{ $t("common.button.reset") }}</span>
        </cms-button>
        <cms-button
          :disabled="disabled"
          size="small"
          v-if="items.length > (itemColumn ? itemColumn : 3)"
          type="warning"
          @click.native="getFolding">
          <i style="font-weight: bold" :class="collapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          {{ collapse ? "收起" : "展开" }}
        </cms-button>
      </cms-button-group>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CmsQueryFormCondition",
    data() {
      return {
        collapse: false,
        collapseHeight: 0
      }
    },
    created() {

    },
    methods: {
      search() {
        this.$refs.queryFormRef.validate(valid => {
          if (valid) {
            this.$emit('search')
          }
          return false;
        })
      },
      reset() {
        this.$emit('reset')
      },
      validate(callback) {
        this.$refs.queryFormRef.validate(valid => {
          if (callback) callback(valid);
          return false;
        })
      },
      /**
       * 获取多条件展开
       */
      getFolding() {
        this.collapse = !this.collapse;
          const clientHeight = this.$refs.cmsSearchContainer.clientHeight;
          if (this.collapse) {
            this.collapseHeight = clientHeight - 58;
          } else {
            this.collapseHeight = this.collapseHeight - 2 * this.collapseHeight;
          }
          this.$emit('calculateTableHeight', this.collapseHeight, this.collapse);
      },
    },
    props: {
      constants: Object,
      dictionaryConfig: Array,
      /** 查询验证条件 */
      queryRules: {
        type: Object,
        default: () => {
          return {}
        },
      },
      queryParams: {
        type: Object,
        default: () => {
          return {}
        },
      },
      labelWidth: {
        type: String,
        default: () => {
          return '100px'
        }
      },
      disabled: Boolean,
      itemColumn: {
        type: Number,
      },
      items: {
        type: Array,
        default: () => {
          return []
        }
      },
      calculate: Function,
      extendTemplateFields: [],
    }
  }
</script>

<style scoped lang="scss">

  .cms-search-container {
    display: flex;
    width: 100%;
    padding-right: 5px;
    flex-direction: row;

    .cms-search-form {
      flex: 1;
    }

    .cms-search-tools {
      width: auto;
      margin-top: 10px;
    }
  }
</style>
