<template>
  <div class="dynamic-data">
    <span class="info-label">{{ config.label }}：</span>
    <span class="info-value">{{ getModelValue() || '-' }}</span>
  </div>
</template>
<script setup>
import { onMounted, ref, inject, toRaw } from 'vue'

const formData = inject('formData')

const props = defineProps({
  config: {
    type: Object,
    default: () => ({})
  }
})

const getModelValue = () => {
  if (props.config.value !== null && props.config.value !== undefined && props.config.value !== '') return props.config.value
  if (typeof props.config.value == 'function') return props.config.value(formData.value)

  if (!props.config.prop) {
    console.error('请配置prop属性', toRaw(props.config))
    return null
  }
  const keys = props.config.prop?.split('.')
  let current = formData.value
  for (const key of keys) {
    if (typeof current != 'object' || !current[key]) return null
    current = current[key]
  }

  return current
}
</script>
<style scoped lang="scss">
.dynamic-data {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;

  & + .dynamic-data {
    margin-top: 10px;
  }

  &.margin {
    margin-top: 10px;
  }

  .info-label {
    white-space: nowrap;
    flex-shrink: 0;
    color: #909399;
    font-size: 14px;
  }

  .info-value {
    flex: 1;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
}
</style>
