<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-02-15 08:47:06
 * @LastEditors: wufz
 * @LastEditTime: 2023-01-12 14:30:05
-->
<script>
import XEUtils from 'xe-utils'
import formComponents from "./formComponents"
export default {
  name: `DxxSelect`,
  //继承表单父组件
  extends: formComponents,
  // functional: true, //函数式组件
  props: [],
  //建立虚拟 DOM
  render: function (createElement) {
    // let _this = Object.entries(this)

    let defaultArr = {
      clearable: true
    }
    for (let key in this._props) {
      if (!XEUtils.isNull(this._props[key]) && !XEUtils.isUndefined(this._props[key])) {
        defaultArr[key] = this._props[key]
      }
    }

    //创建数组接收父节点中的插槽节点
    const vnodeArr = [];
    // console.log(this.$slots.default);
    let showData = null
    if (this.$slots.default) {
      this.$slots.default.forEach((item, index, arr) => {
        // 将标签内的虚拟dom中的prop数据存储起来
        if (item.componentOptions && (item.componentOptions.tag == 'dxx-option' || item.componentOptions.tag == 'vxe-option')) {
          vnodeArr.push(item.componentOptions.propsData);
        }
      });
      showData = vnodeArr.find((item) => { return item.value === this.$attrs.value })
    }

    //详细：dom输出值
    let drawText = createElement(`span`, {}, [showData ? showData.label : ''])

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

    return this.isDetail ? drawText : drawFromComponents;
  }
};
</script>

<style scoped>
</style>