export default {
  props: {
    data: {
      type: Object,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      rules: {}
    }
  },
  computed: {
    formProps() {
      return {
        model: this.form,
        rules: this.rules,
        labelWidth: '100px'
      }
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          const fields = Object.keys(this.form)
          for (const field of fields) {
            this.form[field] = val[field]
          }
        }
      }
    }
  },
  methods: {
    onSubmit() {
      for (const key in this.form) {
        if (this.form[key] && typeof this.form[key] === 'string') {
          this.form[key] = this.form[key].trim()
        }
      }
      const form = JSON.parse(JSON.stringify(this.form))
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', form)
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$emit('cancel')
    },
    reset() {
      // eslint-disable-next-line babel/no-unused-expressions
      this.$refs.form && this.$refs.form.resetFields()
    }
  }
}