<template>
  <div
    class="el-form-item"
    :class="[
      {
        'el-form-item--feedback': elForm && elForm.statusIcon,
        'is-error': validateState === 'error',
        'is-validating': validateState === 'validating',
        'is-success': validateState === 'success',
        'is-required': isRequired || required,
        'is-no-asterisk': elForm && elForm.hideRequiredAsterisk,
        'is-warning': validateState === 'warning',
        'more-margin': validateState === 'error' && onlyWarn
      },
      sizeClass ? 'el-form-item--' + sizeClass : '',
    ]"
    :style="{...spaceSize}"
  >
    <label-wrap :is-auto-width="labelStyle && labelStyle.width === 'auto'" :update-all="form.labelWidth === 'auto'">
      <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
        <span class="el-form-item__label__text">
          <slot name="label">{{ label + form.labelSuffix }}</slot>
        </span>
      </label>
    </label-wrap>
    <div class="el-form-item__content" :style="contentStyle">
      <slot></slot>
      <transition name="el-zoom-in-top">
        <slot v-if="validateState === 'error' && showMessage && form.showMessage && !inputHasHelper" name="error" :error="validateMessage">
          <div
            class="el-form-item__error"
            :class="{'el-form-item__error--inline': inputExtendable}"
          >
            {{ validateMessage }}
          </div>
        </slot>
      </transition>
      <!-- <div class="el-form-item__note">
        <slot name="note" v-if="!(validateState === 'error' && showMessage && form.showMessage)" />
      </div> -->
      <div class="el-form-item__waiting" v-if="waiting">
        <slot name="waiting" />
      </div>
      <div class="el-form-item__info" v-if="showInfo">
        <slot name="info"></slot>
      </div>
      <slot v-if="(validateState === 'warning'  || onlyWarn) && showMessage && form.showMessage && !inputHasHelper" name="warning" :warning="validateMessage">
        <div
          class="el-form-item__warning"
          :class="{'el-form-item__warning--inline': inputExtendable}"
          :style="{top: validateState === 'error' ? '145%' : '100%'}"
        >
          {{ warningMessage }}
        </div>
      </slot>
    </div>
  </div>
</template>
<script>
import AsyncValidator from 'async-validator'
import emitter from 'modesign-ui/src/mixins/emitter'
import objectAssign from 'modesign-ui/src/utils/merge'
import { noop, getPropByPath } from 'modesign-ui/src/utils/util'
import LabelWrap from './label-wrap'
export default {
  name: 'ElFormItem',

  componentName: 'ElFormItem',

  mixins: [emitter],

  provide() {
    return {
      elFormItem: this,
    }
  },

  inject: ['elForm'],

  props: {
    label: String,
    labelWidth: String,
    prop: String,
    required: {
      type: Boolean,
      default: undefined,
    },
    rules: [Object, Array],
    error: String,
    validateStatus: String,
    for: String,
    inlineMessage: {
      type: [String, Boolean],
      default: '',
    },
    showMessage: {
      type: Boolean,
      default: true,
    },
    size: String,
    visibleInfo: {
      type: Boolean,
      default: false
    },
    itemSpace: {
      type: String | Number,
      default: ''
    }
  },
  components: {
    // use this component to calculate auto width
    LabelWrap,
  },
  watch: {
    error: {
      immediate: true,
      handler(value) {
        this.validateMessage = value
        this.validateState = value ? 'error' : ''
      },
    },
    validateStatus(value) {
      this.validateState = value
    },
  },
  computed: {
    showInfo() {
      return this.visibleInfo || (this.elForm || {}).visibleInfo
    },
    inputExtendable() {
			// (typeof this.inlineMessage === 'boolean' ? this.inlineMessage : (this.elForm && this.elForm.inlineMessage) || false)

      return this.elForm&&this.elForm.extenable
    },
    labelFor() {
      return this.for || this.prop
    },
    labelStyle() {
      const ret = {}
      if (this.form.labelPosition === 'top') return ret
      const labelWidth = this.labelWidth || this.form.labelWidth
      if (labelWidth) {
        ret.width = labelWidth
      }
      return ret
    },
    contentStyle() {
      const ret = {}
      const label = this.label
      if (this.form.labelPosition === 'top' || this.form.inline) return ret
      if (!label && !this.labelWidth && this.isNested) return ret
      const labelWidth = this.labelWidth || this.form.labelWidth
      if (labelWidth === 'auto') {
        if (this.labelWidth === 'auto') {
          ret.marginLeft = this.computedLabelWidth
        } else if (this.form.labelWidth === 'auto') {
          ret.marginLeft = this.elForm.autoLabelWidth
        }
      } else {
        ret.marginLeft = labelWidth
      }
      return ret
    },
    form() {
      let parent = this.$parent
      let parentName = parent.$options.componentName
      while (parentName !== 'ElForm') {
        if (parentName === 'ElFormItem') {
          this.isNested = true
        }
        parent = parent.$parent
        parentName = parent.$options.componentName
      }
      return parent
    },
    fieldValue() {
      const model = this.form.model
      if (!model || !this.prop) {
        return
      }

      let path = this.prop
      if (path.indexOf(':') !== -1) {
        path = path.replace(/:/, '.')
      }

      return getPropByPath(model, path, true).v
    },
    isRequired() {
      let rules = this.getRules()
      let isRequired = false

      if (rules && rules.length) {
        rules.every(rule => {
          if (rule.required) {
            isRequired = true
            return false
          }
          return true
        })
      }
      return isRequired
    },
    _formSize() {
      return this.elForm.size
    },
    elFormItemSize() {
      return this.size || this._formSize
    },
    sizeClass() {
      return this.elFormItemSize || (this.$ELEMENT || {}).size
    },
    spaceSize() {
      return {
        marginBottom: parseFloat(this.elForm.itemSpace || this.itemSpace) + 'px'
      }
    }
  },
  data() {
    return {
      validateState: '',
      validateMessage: '',
      validateDisabled: false,
      validator: {},
      isNested: false,
      computedLabelWidth: '',
      inputHasHelper: false,
      waiting: false,
      isValType: false,
      onlyWarn: false,
      warningMessage: ''
    }
  },
  methods: {
    validate(trigger, callback = noop) {
      this.validateDisabled = false
      const rules = this.getFilteredRule(trigger)
      if ((!rules || rules.length === 0) && this.required === undefined) {
        callback()
        return true
      }

      this.validateState = 'validating'

      const descriptor = {}
      if (rules && rules.length > 0) {
        rules.forEach(rule => {
          delete rule.trigger
        })
      }
      descriptor[this.prop] = rules

      const validator = new AsyncValidator(descriptor)
      const model = {}

      model[this.prop] = this.fieldValue
      this.waiting = true
      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
        this.isValType = false
        this.onlyWarn = false
        const minLength = rules && rules.find(e => e.minLength) ? rules.find(e => e.minLength).minLength : null
        const maxLength = rules && rules.find(e => e.maxLength) ? rules.find(e => e.maxLength).maxLength : null
        const validateType = rules && rules.find(e => e.validateType === 'warning') ? rules.find(e => e.validateType === 'warning').validateType : ''
        if ((minLength && model[this.prop].length < minLength) || (maxLength && model[this.prop].length > maxLength)) {
          this.isValType = true
        }
        if (validateType && model[this.prop].toString() && errors) {
          this.onlyWarn = true
        }
        this.validateState = !errors ? 'success' : ((!this.isValType && this.onlyWarn) ? 'warning' : 'error')
        if (errors && !this.isValType && this.onlyWarn) {
          this.validateMessage = ''
          this.warningMessage = errors[0].message
        } else if (errors && this.isValType && this.onlyWarn) {
          this.validateMessage = (minLength && model[this.prop].length < minLength) ?
          `字符数最少为${minLength}` :
          (maxLength && model[this.prop].length > maxLength) ?
          `字符数最多为${minLength}` : ''
          this.warningMessage = errors[0].message
        } else {
          this.validateMessage = errors ? errors[0].message : ''
          this.warningMessage = ''
        }
        this.waiting = false

        callback(this.validateMessage || this.warningMessage, invalidFields, {onlyWarn: this.onlyWarn, isValType: this.isValType})
        this.elForm && this.elForm.$emit('validate', this.prop, !errors ? true : (this.onlyWarn ? true : false), this.validateMessage || null)
      })
    },
    clearValidate() {
      this.validateState = ''
      this.validateMessage = ''
      this.validateDisabled = false
    },
    resetField() {
      this.validateState = ''
      this.validateMessage = ''

      let model = this.form.model
      let value = this.fieldValue
      let path = this.prop
      if (path.indexOf(':') !== -1) {
        path = path.replace(/:/, '.')
      }

      let prop = getPropByPath(model, path, true)

      this.validateDisabled = true
      if (Array.isArray(value)) {
        prop.o[prop.k] = [].concat(this.initialValue)
      } else {
        prop.o[prop.k] = this.initialValue
      }

      // reset validateDisabled after onFieldChange triggered
      this.$nextTick(() => {
        this.validateDisabled = false
      })

      this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue)
    },
    getRules() {
      let formRules = this.form.rules
      const selfRules = this.rules
      const requiredRule = this.required !== undefined ? { required: !!this.required } : []

      const prop = getPropByPath(formRules, this.prop || '')
      formRules = formRules ? prop.o[this.prop || ''] || prop.v : []

      return [].concat(selfRules || formRules || []).concat(requiredRule)
    },
    getFilteredRule(trigger) {
      const rules = this.getRules()

      return rules
        .filter(rule => {
          if (!rule.trigger || trigger === '') return true
          if (Array.isArray(rule.trigger)) {
            return rule.trigger.indexOf(trigger) > -1
          } else {
            return rule.trigger === trigger
          }
        })
        .map(rule => objectAssign({}, rule))
    },
    onFieldBlur() {
      this.validate('blur')
    },
    onFieldChange() {
      if (this.validateDisabled) {
        this.validateDisabled = false
        return
      }

      this.validate('change')
    },
    updateComputedLabelWidth(width) {
      this.computedLabelWidth = width ? `${width}px` : ''
    },
    addValidateEvents() {
      const rules = this.getRules()

      if (rules.length || this.required !== undefined) {
        this.$on('el.form.blur', this.onFieldBlur)
        this.$on('el.form.change', this.onFieldChange)
      }
    },
    removeValidateEvents() {
      this.$off()
    },
  },
  mounted() {
    if (this.prop) {
      this.dispatch('ElForm', 'el.form.addField', [this])

      let initialValue = this.fieldValue
      if (Array.isArray(initialValue)) {
        initialValue = [].concat(initialValue)
      }
      Object.defineProperty(this, 'initialValue', {
        value: initialValue,
      })

      this.addValidateEvents()
    }
    const defaultItem = this.$slots.default
    if (defaultItem && defaultItem[0] && defaultItem[0].elm.className && defaultItem[0].elm.className.includes('el-input')) {
      this.inputHasHelper = defaultItem[0].componentInstance.helper
    }
  },
  beforeDestroy() {
    this.dispatch('ElForm', 'el.form.removeField', [this])
  },
}
</script>
