<script>
/**
 * 在el-form上扩展了一个validateScroll方法
 * 使用方法和validate一样，校验失败时会平滑聚焦到第一个校验失败的组件
 * utils/validate有一些常用的验证规则，直接放到rules数组里使用，rules: {value: [validate.phone]}
 */
import { Form } from 'element-ui'
export default {
  name: 'ElForm',
  extends: Form,
  methods: {
    validateScroll(callback) {
      return new Promise((resolve, reject) => {
        this.validate((valid, rules) => {
          if (valid) {
            resolve(true)
          } else {
            const ruleKey = Object.keys(rules)[0]
            const field = this.fields.find((item) => {
              return ruleKey === item.prop
            })
            try {
              field.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
            } catch (e) {
              console.error(e)
            }
            reject(false)
          }
          if (callback) {
            callback(valid, rules)
          }
        })
      })
    }
  }
}
</script>
