# 表单模版

    <MyForm 
      ref="formCompEl" 
      :form-attr="formAttr" 
      :item-attr="itemAttr" 
      :rules="rules" 
      :types="types" 
      :def-value="defValue"
      @change="onchange">
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button> 
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
    </MyForm>

<template>
  <div class="form-components">
    <div v-if="formAttr.title" style="display: flex;">
      <el-divider 
        content-position="left" 
        class="title"
      >
        {{ formAttr.title }}
      </el-divider>
    </div>
    <el-form
      ref="formEl"
      :rules="rules"
      :model="form"
      :size="formAttr.size ? formAttr.size : 'small'"
      :label-width="formAttr.lableWidth ? formAttr.lableWidth : '150px'"
    >
      <template v-for="(item, index) in itemAttr">
        <div 
          :key="index" 
          class="box-item" 
          :style="'width:' + (item.width ? item.width : '49%')"
        >
          <el-form-item :prop="item.key" :label="item.label">
            <!-- 输入框 -->
            <div v-if="item.type === 'input'" :style="'width:' + item.inputWidth">
              <el-input
                v-model="form[item.key]"
                clearable
                :disabled="item.disabled"
                :maxlength="item.maxlength"
                :placeholder="item.placeholder"
              />
            </div>
            <!-- 多行文本框 -->
            <div 
              v-else-if="item.type === 'textarea'" 
              :style="'width:' + item.inputWidth"
            >
              <el-input
                v-model="form[item.key]"
                type="textarea"
                clearable
                :rows="item.rows"
                :maxlength="item.maxlength"
                :placeholder="item.placeholder"
              />
            </div>
            <!-- 单选框 -->
            <div 
              v-else-if="item.type === 'radio'" 
              :style="'width:' + item.inputWidth"
            >
              <el-radio-group 
                v-if="types[item.key]" 
                v-model="form[item.key]" 
                @change="onchange"
              >
                <el-radio
                  v-for="(type, indexRadio) in types[item.key]"
                  :key="indexRadio"
                  :label="type.value"
                >{{ type.label }}</el-radio>
              </el-radio-group>
            </div>
            <!-- 复选框 -->
            <div 
             v-else-if="item.type === 'checkbox'" 
             :style="'width:' + item.inputWidth"
            >
              <el-checkbox-group v-if="types[item.key]" v-model="form[item.key]">
                <el-checkbox
                  v-for="(type, indexCbox) in types[item.key]"
                  :key="indexCbox"
                  :label="type.value"
                >{{ type.label }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 下拉框 -->
            <div 
             v-else-if="item.type === 'select'" 
             :style="'width:' + item.inputWidth"
            >
              <el-select
                v-model="form[item.key]"
                :multiple="item.multiple"
                :placeholder="item.placeholder"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="(select, selectKey) in types[item.key]"
                  :key="selectKey"
                  :label="select.label"
                  :value="select.value"
                />
              </el-select>
            </div>
            <!-- 日期选择 -->
            <div v-else :style="'width:' + item.inputWidth">
              <el-date-picker
                v-model="form[item.key]"
                :type="item.type"
                :placeholder="item.placeholder"
                :disabled="item.disabled"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
                style="width: 100%;"
                :value-format="(item.valueFormat ? item.valueFormat : 'timestamp')"
              />
            </div>
          </el-form-item>
        </div>
      </template>
      <slot />
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'FormTempComponents',
  props: {
    formAttr: { type: Object, default: ()=> { title: '' } },
    itemAttr: { type: Array,  default: ()=> [] },
    rules: { type: Object, default: ()=> {} },
    types: {  type: Object, default: ()=> {} },
    defValue: { type: Object, default: ()=> {} }
  },
  data() {
    return { 
      form: {}
    }
  },
  watch: {
    defValue(v) {
      Object.keys(v).forEach(key => {
        this.$set(this.form, key, v[key])
      })
    }
  },
  created() {
    this.itemAttr.forEach(elem => {
      if (elem.type === 'checkbox') {
        this.$set(this.form, elem.key, [])
      }
    })
  },
  mounted() {
    if (JSON.stringify(this.defValue) !== '{}') {
      Object.keys(this.defValue).forEach(key => {
        this.$set(this.form, key, this.defValue[key])
      })
    }
  },
  methods: {
    onchange() {
      const newObj = JSON.parse(JSON.stringify(this.form))
      this.$emit('change', newObj)
    },
    submitForm() {
      const newFormObj = JSON.parse(JSON.stringify(this.form))
      const isValidate = JSON.stringify(this.rules)

      return new Promise((resolve, reject) => {
        if (isValidate !== '{}') {
          this.$refs['formEl'].validate((valid) => {
            if (valid) {
              resolve(newFormObj)
            } else {
              reject()
            }
          })
        } else {
          resolve(newFormObj)
        }
      })
    },
    resetForm() {
      // TODO
      Object.keys(this.form).forEach(key => {
        this.$set(this.form, key, null)
      })
      this.$emit('onreset')
    }
  }
}
</script>
<style scoped>
.form-components >>> .el-divider__text {
  font-size: 18px;
}
.form-components .box-item {
  display: inline-block;
}
</style>