<script lang="ts">
import { getPropByPath, omitObjectKeys } from '../../../utils/data'
import { YnetDescriptionsItemCtx } from '@/types/descriptions'
import { defineComponent, PropType, resolveComponent, createVNode } from 'vue-demi'

export default defineComponent({
  name: 'YnetDescriptions',
  props: {
    model: {
      type: Object,
      default: null
    },
    items: {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      type: Array as PropType<Array<YnetDescriptionsItemCtx<any>>>,
      default: () => []
    }
  },
  setup (props, { attrs, slots }) {
    return () => createVNode(resolveComponent('el-descriptions'), {
      ...attrs
    }, {
      ...slots,
      default: () => props.items.map(item => {
        const value = item.prop && getPropByPath(props.model, item.prop as string).v
        return (typeof item.show === 'function' ? item.show(item) : item.show) !== false
          ? createVNode(resolveComponent('el-descriptions-item'), omitObjectKeys(item, ['show', 'formatter']), {
            default: () => item.formatter ? item.formatter(props.model, item, value) : value
          })
          : null
      })
    })
  }
})
</script>
