<!--
 * @Author: xiejiang
 * @Date: 2022-03-21 09:38:54
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-05 14:36:49
 * @Description: 详情页字段label
-->
<template>
  <div class="info-label w-full flex">
    <div v-if="$slots.label" class="info-label__label">
      <slot name="label" />
    </div>
    <div v-else class="info-label__label" v-text="labelText"></div>
    <div class="info-label__value" v-if="!hasValueSlot">
      {{ value || EMPTY }}
    </div>
    <div class="info-label__value" v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="info-label">
import { EMPTY } from '@/utils'
const props = defineProps({
  label: {
    type: String,
    default: '',
    require: true
  },
  value: {
    type: [String, Number],
    default: ''
  },
  showSuffix: {
    type: Boolean,
    default: true
  },
  suffix: {
    type: String,
    default: '：'
  }
})
const labelText = computed(() => {
  return props.showSuffix ? props.label + props.suffix : props.label
})
const slots = toRefs(reactive(useSlots()))
const hasValueSlot = Object.keys(slots).includes('default')
</script>
<style>
.info-wrap-more {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
}

.info-wrap-more .info-label {
  width: 20%;
}
</style>
<style lang="less" scoped>
.info-label {
  box-sizing: border-box;
  font-size: 14px;

  &__label {
    color: var(--td-font-gray-3);
    margin-right: 24px;
  }

  &__value {
    color: var(--td-font-gray-1);
    white-space: normal;
    word-wrap: break-word;
  }
}
</style>
