<!-- @desc:form组件的封装  @auth:周兴  @time:2022/11/15 13:01 -->
<template>
  <Form :ref="name" :model="model2" :rules="rulesI18n" @on-validate="onValidate">
    <DkRow style="padding-right: 20px">
      <slot></slot>
    </DkRow>
  </Form>
</template>

<script>
export default {
  name: 'DkForm',
  props: {
    //表单数据
    value: {
      type: Object,
      default: () => {
      }
    },
    //表单验证规则
    rules: {
      type: Object,
      default: () => {
      }
    },
    //表单的名称
    name: {
      type: String,
      default: 'dk-form'
    },
    //当前form中最大的label字数
    labelMaxWords: {
      type: Number,
      default: 4
    },
    // 栏目数（分成几栏）
    colCount: {
      type: Number,
      default: 4
    }
  },
  data() {
    const vm = window.vm;
    return {
      vm: vm,
      rulesI18n: {},//国际化表单校验规则
      model2: {},//内层表单数据
      labelWidthData: null,
      errorMessages: {}, // 错误信息
      items: []    //可输入的子组件
    }
  },
  watch: {
    model2(n, o) {
      this.$emit('input', n)
    },
    value(n, o) {
      this.model2 = n
    },
    rules(n, o) {
      this.setRule()
    },

  },
  provide() {
    return {
      colCount: this.colCount,
      rules: this.rules,
      labelWidth: () => this.labelWidthData,
      form: this,
    }
  },
  methods: {
    /**
     * @desc   : 聚焦到其下的第一个组件可以聚焦的组件上
     * @author : 周兴
     * @date   : 2023/1/13 10:15
     */
    focus() {
      if (this.items && this.items.length > 0 && this.items[0].focus) {
        this.items[0].focus();
      }
    },
    /**
     * @desc   : 清除校验信息
     * @author : 周兴
     * @date   : 2023/2/28 9:20
     */
    clearValidate() {
      if (this.items && this.items.length > 0) {
        this.items.forEach(it => {
          if(it.dkFormItem && it.dkFormItem.required){
            this.$nextTick(()=> {
              // 清除校验信息
              it.dkFormItem.clearValidate();
            })
          }
        })
      }
    },
    /**
     * @desc   : 移出掉规则
     * @author : 周兴
     * @date   : 2023/2/27 13:34
     */
    removeItemRule({prop}) {
      if (this.rulesI18n[prop]) {
        // 删除掉数据
        this.$delete(this.rulesI18n, prop);
      }
    },
    /**
     * @desc   : 根据formItem的必填项，给form设置规则
     * @author : 周兴
     * @date   : 2022/11/24 11:19
     */
    setItemRule({prop, rule}) {
      if (!this.rulesI18n[prop] || this.rulesI18n[prop].length == 0) {
        this.rulesI18n[prop] = [rule]
      } else {
        this.rulesI18n[prop].union([rule])
      }
    },
    /**
     * @desc   : 表单校验事件
     * @author : 周兴
     * @date   : 2022/11/15 13:02
     */
    onValidate(prop, status, error) {
      this.errorMessages[prop] = error;
      // this.$emit('onValidate',{	prop, status, error})
    },
    /**
     * @desc   : 手动表单校验
     * @author : 周兴
     * @date   : 2022/11/15 13:02
     */
    validate() {
      return new Promise((resolve => {
        this.$refs[this.name].validate((valid) => {
          resolve(valid)
        })
      }))
    },
    /**
     * @desc   : 计算label的宽度 （根据字体）
     * @author : 周兴
     * @date   : 2022/5/13 10:51
     */
    calcLabelWidth() {
      this.labelWidthData = this.labelMaxWords * 14 * (vm.$config.fontSize / 12)
    },
    /**
     * @desc   : 设置规则
     * @author : 周兴
     * @date   : 2022-06-18 10:00
     */
    setRule() {
      let rules = {...this.rules}
      for (let key in rules) {
        // 如果提示信息为空，才会给出提示
        if (!rules[key][0].message) {
          this.$set(rules[key][0], 'message', vm.$t('inputWords', {'search-name': (rules[key][0].label ? rules[key][0].label : vm.$t(key))}))
        }
      }
      this.rulesI18n = rules
    },
    /**
     * @desc   : 清空表单
     * @author : 周兴
     * @date   : 2023/3/7 10:59
     */
    resetFields(){
      this.$refs[this.name].resetFields()
    },
  },
  created() {
    // 给组件内属性赋值
    this.model2 = {...this.value}
    //计算label宽度
    this.calcLabelWidth();
    this.setRule()
  }
}
</script>
<style scoped>

</style>

