<template>
  <div class="detailTable" :style="{ width: width }">
    <div class="label">{{ label }}</div>
    <div class="value" v-if="!hasValueSlot">
      {{ value || EMPTY }}
    </div>
    <div class="value" v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="DetailTable">
import { EMPTY } from '@/utils'
defineProps({
  label: {
    type: String,
    default: '',
    require: true
  },
  value: {
    type: [String, Number],
    default: ''
  },
  width: {
    type: String,
    default: '506.5px'
  }
})
const slots = toRefs(reactive(useSlots()))
const hasValueSlot = Object.keys(slots).includes('default')
</script>

<style lang="less" scoped>
.detailTable {
  box-sizing: border-box;
  border: 1px solid var(--td-gray-color-2);
  display: flex;
  margin-left: -1px;
  margin-top: -1px;

  & > div {
    padding: 8px 16px;
  }

  .label {
    min-width: 160px;
    color: var(--td-font-gray-2);
    background: var(--td-brand-color-12);
    border-right: 1px solid var(--td-gray-color-2);
  }

  .value {
    flex: 1;
    max-height: 640px;
    color: var(--td-font-gray-1);
    overflow: auto;
  }
}
</style>
