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

<script>
import './_CmsQueryForm.less'
import { componentConfig } from '@/comps/mixin/component-config'

export default {
  mixins: [componentConfig],
  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>
