<template>
  <section class="kf-panels">
    <span class="kf-p-label" :title="label">{{ label }}</span>
    <div class="kf-p-body">
      <input class="kf-p-body-value" :value="configValue" 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.value) {
    let time = new Date(parseInt(config.value.value));
    value = time.toLocaleString();
  }
  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;
}
</style>
