<template>
  <div class="kvBox" :style="kvBoxStyle">
    <table class="w-1/1 h-1/1 kvTable">
      <colgroup>
        <col class="kvKeyCol" />
        <col class="kvValueCol" />
      </colgroup>
      <tbody>
        <tr>
          <td class="kvKey kvKeyValue" colspan="1">{{ props.label }}</td>
          <td class="kvValue kvKeyValue" colspan="1">{{ props.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  fontFamily: {
    type: String,
    default: ''
  },
  fontSize: {
    type: Number,
    default: 15
  },
  textAlign: {
    type: String,
    default: 'left'
  },
  label: {
    type: String,
    default: ''
  },
  labelWidth: {
    type: Number,
    default: 50
  },
  value: {
    type: String,
    default: ''
  },
  valueWidth: {
    type: Number,
    default: 50
  },
  color: {
    type: String,
    default: ''
  },
  border: {
    type: Boolean,
    default: true
  },
  backgroundColor: {
    type: String,
    default: 'rgba(255, 255, 255, 0)'
  },
  borderColor: {
    type: String,
    default: ''
  },
  borderRadius: {
    type: Number,
    default: 0
  }
})

const kvBoxStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  border: `${props.border ? 1 : 0}px solid ${props.borderColor}`,
  borderRadius: `${props.borderRadius}px`
}))
</script>
<style scoped>
.kvBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.kvTable {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.kvKeyCol {
  width: v-bind('`${props.labelWidth}px`');
}

.kvValueCol {
  width: v-bind('`${props.valueWidth}px`');
}

.kvKeyValue {
  overflow: hidden;
  font-family: v-bind('`${props.fontFamily}`');
  font-size: v-bind('`${props.fontSize}px`');
  color: v-bind('`${props.color}`');
  text-align: v-bind('`${props.textAlign}`');
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kvKey {
  border-right: v-bind('`${props.border?1:0}px`') solid v-bind('`${props.borderColor}`') !important;
}
</style>
