<template>
  <section class="kf-panels">
    <span :title="label" class="kf-p-label">{{ label }}</span>
    <div class="kf-p-body">
      <input :value="configValue" class="kf-p-body-value" readonly />
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted, toRefs, watch, ref } from 'vue';

const props = defineProps(['config', 'confData', 'label']);
const { config, confData, label } = toRefs(props);

onMounted(() => {
});

const getValue = () => {
  let value = '';
  if (config.value.unit) {
    value = config.value.value + config.value.unit;
  } else {
    if (config.value.enumItems) {
      config.value.enumItems.forEach(item => {
        if (item.value == config.value.value) {
          value = item.label?.zhCN;
        }
      });
    } else {
      value = config.value.value;
    }
  }
  return value;
};

const configValue = ref(getValue());

watch(props, () => {
  configValue.value = getValue();
}, { deep: true });
</script>

<style lang="scss" scoped>
.kf-p-body-value {
  width: 65%;
  height: 30px;
  padding: 5px 8px;
  background-color: rgba(6, 241, 162, 0.05);
  border: 1px solid rgba(6, 241, 162, 0.15);
  border-radius: 3px;
  color: inherit;
  cursor: auto;
}
</style>
