<template>
  <el-form ref="form" :model="model" :rules="finalRules" label-position="right" :label-width="labelWidth">
    <template v-for="(group,idx) in conditionsOutput">
      <el-form-item :prop="group.key" :label="group.title" class="form-item-condition">
        <mx-condition-button-group v-if="!group.template" :condition="group" @conditionChanged="conditionChangedAction">
        </mx-condition-button-group>
        <slot name="group.template" :condition="group"></slot>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
/* NOTE	思路:	提供一套公用接口规范, 使实现了接口的任何对象都能成为筛选条件里的元素
        接口: mx-condition-object-base.js
        视图引擎: mx-condition-mixins-div.js
        数据引擎: mx-condition-mixins-data.js
        当前视图: 渲染conditionMixins.conditions条件组
        你也可以自己在其它组件中, 嵌入conditionMixins, 完全编写新的渲染逻辑	*/
import conditionDataMixins from './condition-mixins-data'
import conditionViewMixins from './condition-mixins-view'
import mxConditionButtonGroup from './condition-templete/mx-condition-button-group.vue'
import mxConditionDateRange from './condition-templete/mx-condition-date-range.vue'
import mxConditionCheckboxGroup from './condition-templete/mx-condition-checkbox-group.vue'

export default {
  name: 'mx-condition',
  mixins: [conditionDataMixins, conditionViewMixins],
  components: {
    mxConditionButtonGroup,
    mxConditionDateRange,
    mxConditionCheckboxGroup
  },
  props: {
    labelWidth: {
      type: String,
      default: '60px'
    }
  },
  mounted() {
  },
  data() {
    return {
      fillRequiresWhenInit: true
    }
  },
  methods: {
    conditionChangedAction(key, value) {
      this.conditionChanged(key, value)
    },
    _triggerInitChangedEvent(model) {
      this.$emit('query', model)
    },
    _triggerChangedEvent(model) {
      this.$emit('query', model)
    },
    _triggerInvalidChangedEvent() {
      this.$emit('invalid')
    },
    _triggerInitInvalidChangedEvent() {
      this.$emit('invalid')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
