<!--
传入record数据，通过判断record.type，来渲染对应的组件
  -->
<template>
  <component
    :is="customComponent"
    :record="record"
    :style="{
      margin:
        record.margin && record.margin.length > 0
          ? record.margin.join('px ') + 'px'
          : '0px',
      borderRadius:
        (record.itemBorderRadius ? record.itemBorderRadius : 0) + 'px',
      backgroundColor: record.backgroundColor ? record.backgroundColor : '',
    }"
    :disabled="disabled"
    :preview="preview"
    :is-drag-panel="isDragPanel"
    :select-item="selectItem"
    :prop-prepend="propPrepend"
    :models.sync="models"
    @handleSelectItem="handleSelectItem"
    @handleFocus="handleFocus"
    @handleBlur="handleBlur"
  >
    <!-- 递归传递插槽！！！ -->
    <template v-for="slot in Object.keys($slots)" :slot="slot">
      <slot :name="slot" :record="record" />
    </template>
  </component>
</template>
<script>
import ItemList from './index.js'

import { dynamicFun, dynamicVoidFun } from '../../utils/index.js'
export default {
  name: 'NgFormItemNode',
  inject: {
    // 自定义组件
    customComponents: {
      from: 'customC',
      default: () => []
    }
  },
  props: {
    // 表单数组
    record: {
      type: Object,
      required: true
    },
    // form-item 宽度配置
    models: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否预览结果表单
    preview: {
      type: Boolean,
      default: false
    },
    // 是否拖拽面板引用
    isDragPanel: {
      type: Boolean,
      default: false
    },
    selectItem: {
      type: Object
    },
    propPrepend: {
      type: String
    }
  },
  data() {
    return {
      items: ItemList
    }
  },
  computed: {
    customComponent() {
      // 判断是否自定义组件
      if (this.customComponents && this.customComponents.length > 0) {
        const cs = this.customComponents.filter(
          (t) => t.type == this.record.type
        )

        if (cs && cs.length > 0) {
          return cs[0].component
        }
      }

      const selectItemType = this.record.type
      // 将数组映射成json
      if (this.items && this.items.length > 0) {
        for (let i = 0; i < this.items.length; i++) {
          const itemList = this.items[i]

          if (itemList.list && itemList.list.length > 0) {
            const fs = itemList.list.filter((t) => t.type == selectItemType)
            if (fs && fs.length > 0) {
              return fs[0].component
            }
          }
        }
      }
      return null
    },
    // 数据监听中要监听的数据，先通过计算属性计算 然后通过watch监听变化
    listenModelValue() {
      if (
        !this.isDragPanel &&
        this.record.options &&
        this.record.options.listenModel &&
        this.record.options.listenModelData
      ) {
        const lmodels = this.record.options.listenModelData.split(',')
        const vs = []
        for (let i = 0; i < lmodels.length; i++) {
          // 判断类型 vtype=1 本地搜索 vtype=2 远程过滤
          const ld = lmodels[i]
          if (ld && ld.trim()) {
            // local script
            vs.push(this.models[ld.trim()])
          }
        }
        return vs.join(',')
      }
      return null
    }
  },
  watch: {
    // 组件数据监听
    listenModelValue: {
      handler(val, oldVal) {
        if (
          this.isDragPanel ||
          (!val && !oldVal) ||
          !this.models ||
          !this.record.options ||
          !this.record.options.listenModel ||
          !this.record.options.listenModelData ||
          !this.record.options.listenModelScript
        ) { return }

        // 2023-09-10 lyf 确保当前组件的model在models中已经被挂载在执行
        if (
          !Object.prototype.hasOwnProperty.call(this.models, this.record.model)
        ) {
          return
        }

        // console.log('this.record.options.listenModelScript' , this.record.options.listenModelScript)
        // 解决 初始化加载数据 被计算数据监听造成数据变化
        // const ify = JSON.stringify(val)
        // if (this.copyLstenModel != ify) {
        //  this.copyLstenModel = ify
        dynamicVoidFun(
          this.record.options.listenModelScript,
          this.models,
          undefined,
          undefined,
          undefined,
          this
        )

        // }

        // console.log("this.models" , this.models)
      }
      // immediate: true
    }
  },
  created() {},
  methods: {
    handleSelectItem(item) {
      this.$emit('handleSelectItem', item)
    },
    handleFocus(e) {
      if (!this.record || !this.record.options) return
      // 判断是否有监听
      const focusEventScript = this.record.options.focusEvent

      if (!focusEventScript) return

      dynamicVoidFun(
        focusEventScript,
        this.models,
        undefined,
        undefined,
        undefined,
        this
      )
    },
    handleBlur(e) {
      if (!this.record || !this.record.options) return
      // 判断是否有监听
      const blurEventScript = this.record.options.blurEvent

      if (!blurEventScript) return

      dynamicVoidFun(blurEventScript, this.models)
    }
  }
}
</script>
