<template>
  <div v-if="IS_SIMPLE_TYPE">{{ value }}</div>
  <div v-else-if="IS_OPTION_TYPE">
    <p v-for="(cont, cindex) in optionValData" :key="cindex">{{ cont }}</p>
  </div>
  <div v-else-if="config.code === 'DATE'">{{ timestampFilter(value * 1) }}</div>
  <div v-else-if="IS_RADIO_WITH_INPUT">{{ radioWithInputVal }}</div>
  <div v-else>{{ value }}</div>
</template>

<script setup name="MetadataContent">
import { timestampFilter } from '@/utils/filter';
import { computed } from 'vue';

const props = defineProps({
  config: {
    type: Object,
    default() {
      return { code: '' };
    },
  },
  value: { type: [String, Number] },
});

const IS_RADIO_WITH_INPUT = computed(() => {
  return 'RADIO_WITH_INPUT' === props.config.code;
});
const IS_SIMPLE_TYPE = computed(() => {
  return ['NUMBER', 'TEXTAREA', 'TEXT'].includes(props.config.code);
});
const IS_OPTION_TYPE = computed(() => {
  return ['SINGLE_SELECT', 'MULTIPLE_SELECT', 'RADIO', 'CHECKBOX'].includes(
    props.config.code
  );
});
const optionValData = computed(() => {
  if (!IS_OPTION_TYPE.value || !props.config.options) return [props.value];
  const options =
    typeof props.config.options === 'string'
      ? JSON.parse(props.config.options)
      : props.config.options;
  let optionDict = {};
  options.forEach((item) => {
    optionDict[item.value] = item.label;
  });
  const isMultiple = ['MULTIPLE_SELECT', 'CHECKBOX'].includes(
    props.config.code
  );
  if (isMultiple) {
    const vals = props.value ? JSON.parse(props.value) : [];
    return vals.map((val) => optionDict[val]);
  } else {
    return [optionDict[props.value]];
  }
});

const radioWithInputVal = computed(() => {
  const options =
    typeof props.config.options === 'string'
      ? JSON.parse(props.config.options)
      : props.config.options;
  let optionDict = {};
  options.forEach((item) => {
    optionDict[item.value] = item.label;
  });
  const val = props.value ? JSON.parse(props.value) : { input: '', value: '' };
  return val.input || optionDict[val.value];
});
</script>
