<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-02-15 08:47:06
 * @LastEditors: lr
 * @LastEditTime: 2022-07-05 15:14:17
-->
<script>
import XEUtils from 'xe-utils'
export default {
  name: `DxxForm`,
  functional: true, //函数式组件
  props: {
    rules: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    }
  },
  //建立虚拟 DOM
  render(createElement, context) {

    let className = 'dxx-form'
    if (context.data.attrs.hasOwnProperty('is-detail') && context.data.attrs['is-detail']) {
      //加了:bordered="false"则不给详细加边框和背景，默认是添加
      if (context.data.attrs.hasOwnProperty('bordered') && (context.data.attrs['bordered'] == false)) {
        className = 'dxx-detail'
      } else {
        className = 'dxx-detail dxx-detail-border'
      }

      // console.log(context.data.attrs.hasOwnProperty('is-border'))
      context.props.titleAsterisk = false
    }
    else if (context.data.attrs.hasOwnProperty('is-filter') && context.data.attrs['is-filter']) {
      className = 'dxx-form dxx-filter'
    }
    //表单项非空格校验
    if (context.props.rules) {
      let rules = XEUtils.clone(context.props.rules, true)
      for (let key in rules) {
        /*  console.log(rules[key][0]);
           nocCheckSpace为自定义属性,当此值为true时，不进行非空格校验 */

        //nocCheckSpace为自定义属性,当此值为true时，不进行非空格校验
        if (rules[key] instanceof Array && rules[key].length != 0 && rules[key][0].required && !rules[key][0].noCheckSpace) {
          rules[key].push({
            validator: ({ itemValue }) => {
              //非空格校验仅适用于字符串
              if (typeof itemValue === 'string' && itemValue.trim().length == 0) {
                let msg = rules[key][0].message ? rules[key][0].message : '请输入非空格内容'
                return new Error(msg)
              }
            }
          })
        }
      }
      context.props.rules = rules
    }

    /* 编辑：dom表单元素 */
    let drawFromComponents = createElement(
      // 标签名称
      `vxe-form`,
      // 传递数据
      {
        ...context.data,
        props: {
          ...context.props
        },
        class: (context.data.staticClass || "") + " " + className + (context.data.class ? ' ' + context.data.class : ""), //自定义classs
        style: {
          ...context.data.staticStyle
        }
      },
      // 子节点数组，createElement...
      [
        context.slots().default
      ]
    );

    return drawFromComponents;
  }
};
</script>

<style scoped>
</style>