<!-- 表单 -->
<template>
  <ValidationObserver ref="observer">
    <el-form
      :model="model"
      ref="csForm"
      :size="$attrs['size']"
      :class="$attrs['class']"
      :label-width="$attrs['label-width']"
      autocomplete="off"
    >
      <el-form-item style="margin-bottom: 0; display: none">
        <el-input></el-input>
      </el-form-item>
      <slot></slot>
    </el-form>
  </ValidationObserver>
</template>
<script>
import { ValidationObserver } from 'vee-validate'

export default {
  name: 'csForm',
  components: {
    ValidationObserver
  },
  props: {
    model: {
      type: Object
    }
  },
  data() {
    return {}
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 发起验证，返回值是promise，支持异步调用的验证 */
    validate() {
      return this.$refs.observer.validate()
    },

    /* 重置验证 表单内所有验证重置 */
    resetValidate() {
      return this.$refs.observer.reset()
    },

    /* 重置表单，目前和重置验证效果相同，预期实现可清空表单已填写数据 */
    reset() {
      this.$refs.csForm.resetFields()
      return this.$refs.observer.reset()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped></style>
