<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-02-15 08:47:06
 * @LastEditors: wufz
 * @LastEditTime: 2022-07-07 09:15:47
-->
<script>
export default {
  name: `DxxFormItem`,
  // functional: true, //函数式组件
  props: ['field'],
  data() {
    return {
      className: null
    };
  },
  watch: {

    "$parent.data": {//深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        this.computedDetail()
        this.reserver24()
      },
      deep: true, //true 深度监听
      immediate: true
    }
  },
  created() {

    this.$nextTick(() => {
      // this.clearAll()
      this.computedDetail()
      this.reserver24()

    });

  },
  mounted() {

    if (this.$slots.default[0].elm.clientHeight > 40) {
      //如果样式等于null，则为表单，没经过样式处理，可加样式
      if (this.className == null) {
        this.className = 'dxx-form-textarea'
      }

    }
  },
  methods: {
    //清楚函数
    clearAll() {
      var parent = this.$parent
      var arr = parent.$children.filter(((x) => { return (x.$attrs.span == "12") }))
      arr.forEach((element, index) => {
        if (element.className && element.className.indexOf("dtgd") != -1) {
          element.$el.querySelector('.vxe-form--item-content').style.height = "32px"
        }

      })

    },
    //自动计算高度
    async computedDetail() {
      await this.clearAll()
      if (this.$parent.$attrs['is-detail']) {
        var parent = this.$parent

        var arr = parent.$children.filter(((x) => { return (x.$attrs.span == "12") }))
        if (arr) {
          arr.forEach((element, index) => {
            //两两分组
            if ((index) % 2 == 0) {
              if (arr[index + 1] && element.$el.clientHeight < arr[index + 1].$el.clientHeight) {
                element.$el.querySelector('.vxe-form--item-content').style.height = arr[index + 1].$el.clientHeight + 'px'
                //给动态改变的高度添加标识
                element.className = "dtgd"
              }
              if (arr[index + 1] && element.$el.clientHeight > arr[index + 1].$el.clientHeight) {
                //给动态改变的高度添加标识
                arr[index + 1].className = "dtgd"
                arr[index + 1].$el.querySelector('.vxe-form--item-content').style.height = element.$el.clientHeight + 'px'
              }
            }

          });
        }

      }

    },
    async reserver24() {
      await this.clearAll()
      var spanArr = this.$parent.$children
      var arr = spanArr.filter(((x) => { return (x.$attrs.span == "12") }))
      if (this.$parent.$attrs['is-detail']) {
        spanArr.forEach((element, index) => {
          var next = index + 1
          //这里加span为12为奇数才行，防止v-if加在formitem导致加载顺序乱了，出现误判情况
          if (index % 2 == 0 && arr.length % 2 != 0 && element.$attrs.span == '12' && spanArr[next] && spanArr[next].$attrs.span == '24' && spanArr[next].$attrs['title']) {
            element.className = "dxx-change vxe-col--24"
          }
        });
      }

    }
  },
  //建立虚拟 DOM
  render(createElement) {
    if (this.$parent.$attrs.hasOwnProperty('title-width-auto') && this.$parent.$attrs['title-width-auto']) {
      if (this.$attrs.title) {
        this.$attrs['title-width'] = (this.$attrs.title.length * 14 + 38) + 'px'
      }
    }
    let className = this.className ? this.className : ''

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

    return drawFromComponents;
  }
};
</script>

<style scoped>
</style>