<template>
  <div
    :class="{
      [$style.required]: field.required,
    }"
  >
    <component
      :is="formItemData.component"
      v-if="formItemData.transient"
      v-bind="formItemData.inputProps"
    />
    <sd-form-item
      v-else
      v-bind="formItemData"
      :class="{
        [$style.required]: field.required,
      }"
    />
  </div>
</template>

<script>
import runtimeUtil from '../../runtime-util'
import components from './_import-components/sd-component-render-import'

export default {
  name: 'SdComponentRender',
  components,
  props: {
    field: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    formItemData() {
      const {
        name,
        attrFD: { cid, transient },
      } = this.field
      const item = {
        cid,
        transient,
        name,
        ...this.field.attrFD.formItemProps,
        component: runtimeUtil.getRender(cid),
        componentForDisplay: runtimeUtil.getRender(cid, true),
      }
      // 隐藏label的处理
      if (this.field.attrFD.hideLabel) {
        item.label = null
      }
      return item
    },
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.required {
  :global(.sd-no-label:not(.sd-readonly)) {
    margin-right: 10px;
    &::after {
      position: absolute;
      top: 10px;
      right: -10px;
      color: $label-required-color;
      content: '*';
    }
  }
}
</style>
