<template>
  <div class="vue-form">
    <el-form v-bind="options" ref="form" :model="ruleForm" @submit.native.prevent v-on="$listeners">
      <template v-for="item in items">
        <el-form-item
          :key="item.model"
          :prop="item.model"
          :label="item.label"
          :label-width="item.labelWidth || item['label-width']"
          :required="item.required"
          :rules="item.rules"
          :size="item.size"
        >
          <template v-if="item.type === 'input'">
            <el-input
              v-bind="item.attrs"
              v-on="$listeners"
              v-model="ruleForm[item.model]"
              :placeholder="item.placeholder"
            ></el-input>
          </template>

          <template v-if="item.type === 'select'">
            <el-select
              v-bind="item.attrs"
              v-on="$listeners"
              v-model="ruleForm[item.model]"
              :placeholder="item.placeholder"
            >
              <el-option
                v-for="option in item.values"
                :label="option.label"
                :value="option.value"
                :key="option.value"
              ></el-option>
            </el-select>
          </template>

          <template v-if="item.type === 'radio'">
            <el-radio v-bind="item.attrs" :label="item.value">{{item.label}}</el-radio>
          </template>

          <template v-if="item.type === 'radioGroup'">
            <el-radio-group v-bind="item.attrs" v-on="$listeners" v-model="ruleForm[item.model]">
              <el-radio
                v-for="radio in item.values"
                :label="radio.value"
                :key="radio.value"
              >{{radio.label}}</el-radio>
            </el-radio-group>
          </template>

          <template v-if="item.type === 'datePicker'">
            <el-date-picker
              v-bind="item.attrs"
              v-on="$listeners"
              v-model="ruleForm[item.model]"
              :placeholder="item.placeholder"
            ></el-date-picker>
          </template>
        </el-form-item>
      </template>
      <el-form-item>
        <slot>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'EzjForm',
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    items: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      ruleForm: {}
    }
  },
  watch: {
    model: {
      immediate: true,
      deep: true,
      handler(value) {
        this.ruleForm = value
      }
    }
  },
  computed: {
    $form() {
      return this.$refs['form']
    }
  },
  methods: {
    validate() {
      return this.$form.validate(...arguments)
    },
    validateField() {
      return this.$form.validateField(...arguments)
    },
    resetFields() {
      return this.$form.resetFields(...arguments)
    },
    clearValidate() {
      return this.$form.clearValidate(...arguments)
    },
    onSubmit() {
      this.validate().then(() => {
        this.$emit('onSubmit', this.model)
      })
    }
  }
}
</script>
