<template>
  <el-row>
    <el-form
      style="margin: 10px 5px 0 8px"
      size="small"
      ref="cms-query-form"
      class="cms-query-form"
      :model="formModel"
      :inline="true"
      :label-position="labelAlign"
      v-bind="$attrs"
      v-on="listeners"
      :label-width="labelWidth"
      :rules="formRules"
    >
      <slot></slot>
    </el-form>
  </el-row>
</template>

<script>
import "./_CmsQueryForm.less";

export default {
  props: {
    formRules: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      },
    },
    size: {
      type: String,
      default: () => {
        return "";
      },
    },
    labelAlign: {
      type: String,
      default: () => {
        return "right";
      },
    },
  },
  computed: {
    /**
     * 主题大小
     * @returns {any}
     */
    themeSize() {
      return this.$store.state.app.themeSize;
    },
  },
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  methods: {
    searchEvent() {
      this.$emit("submit", this);
    },
    resetEvent() {
      this.$emit("reset", this);
    },
    validate(callback) {
      this.$refs['cms-query-form'].validate((valid) => {
        if (callback) callback(valid);
      });
    },
    getRef() {
      return this.$refs["cms-query-form"];
    },
  },
};
</script>
