<!--
 * @Author: your name
 * @Date: 2021-05-12 17:39:58
 * @LastEditTime: 2021-05-18 09:43:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /ipublishment-ssr-web/components/Icon.vue
-->
<template>
  <div class="ipub-form-item">
    <slot name="label">
      <div v-if="label"
           :class="ipubClass">
        {{label}} <font v-if="required"
              class="key-color">*</font>
      </div>
    </slot>
    <div>
      <slot></slot>
    </div>
    <div class="ipub-p5 key-color ipub-form-item-message">{{validateMsg}}</div>
  </div>
</template>

<script>
import check from '../../../src/utils/check'
import { isNumber } from '../../../src/utils/utils'
import emitter from '../../../src/mixin/emitter'
export default {
  name: 'IpubFormItem',
  mixins: [emitter],
  provide () {
    return {
      ipubFormItem: this
    };
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default () {
        return []
      }
    }
  },
  inject: ['ipubForm'],
  data () {
    return {
      __rules: [],
      required: false,
      validateMsg: '',
      validateStatus: false,
      ipubClass: 'ipub-form-item__label mar-b-10 ipub-p2 fw-bd'
    }
  },
  watch: {
    rules (val) {
      this.__rules = val || []
    },
    'ipubForm.rules': {
      handler () {
        this.getRule()
        this.validateMsg = ''
        this.validateStatus = false
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    if (this.prop) {
      this.dispatch('IpubForm', 'ipub.form.addField', [this])
    }
  },
  methods: {
    getRule () {
      if (this.ipubForm.rules) {
        this.__rules = this.ipubForm.rules[this.prop] || []
      }
      if (this.rules) {
        this.__rules = this.rules.length ? this.rules : (this.__rules || [])
      }
      this.required = this.__rules.some(item => {
        return item.required
      })
    },
    validate (triggar) {
      if (!this.ipubForm.model || !this.prop) {
        return
      }
      this.validateStatus = false
      this.validateMsg = ''
      const val = this.ipubForm.model[this.prop]
      this.validateStatus = this.__rules.some(item => {
        if (triggar) {
          item.triggar = item.triggar || 'blur'
          const isTriggar = item.triggar === triggar || item.triggar.includes(triggar)
          if (!isTriggar) {
            return false
          }
        }
        if ((item.required && (!val && val !== false && val !== 0)) ||
          (item.enum && !item.enum.includes(val)) ||
          (item.len && val && val.length !== item.len) ||
          (isNumber(val) && (item.min || item.min === 0) && val < item.min) ||
          (isNumber(val) && (item.max || item.max === 0) && val > item.max) ||
          (item.min && val && val.length < item.min) ||
          (item.max && val && val.length > item.max) ||
          (item.pattern && !item.pattern.test(val)) ||
          (val && item.type && check[item.type] && !check[item.type](val))
          || (item.fun && !item.fun(val))) {
          this.validateMsg = item.message
          return true
        }
      })
      return this.validateStatus
    }
  },
  beforeDestroy () {
    this.dispatch('IpubForm', 'ipub.form.removeField', [this]);
  }
}
</script>

<style lang="scss">
.ipub-form-item {
  margin-bottom: 20px;
  position: relative;
  .ipub-form-item-message {
    position: absolute;
    bottom: -12px;
    left: 0;
    font-size: 12px;
    line-height: 12px;
  }
}
</style>
