<template>
  <div class="cms-search-container">
    <cms-query-form
      label-align="right"
      size="small"
      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>
      </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,
    }
  },
  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;
    },
  },
  props: {
    /** 查询验证条件 */
    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 []
      }
    },
  }
}
</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>