<!-- 表单 -->
<template>
  <ValidationObserver ref="observer">
    <van-form ref="csFrom" @submit="onSubmit">
      <slot></slot>
      <div style="margin: 16px">
        <slot name="button"></slot>
        <van-button round block type="primary" native-type="submit" v-if="!disableSave"> 提交 </van-button>
      </div>
    </van-form>
  </ValidationObserver>
</template>
<script>
import { ValidationObserver } from 'vee-validate'

export default {
  name: 'csForm',
  components: { ValidationObserver },
  props: {
    // 禁用保存按钮
    disableSave: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /** 表单提交 */
    onSubmit() {
      this.validate().then(valid => {
        if (!valid) {
          this.$emit('submit', false)
          let errors = this.$refs.observer.errors
          console.error('表单验证失败：', errors)
          return
        }
        this.$emit('submit', true)
        console.log('表单验证成功')
      })
    },

    /** 发起验证，返回值是promise，支持异步调用的验证 */
    validate() {
      return this.$refs.observer.validate()
    },

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

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