<!--
 * @FileDescription: JSON 文本 预览组件
 * @Date: 2023-05-29
 * @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
interface IDetailProps {
  data: any;
  isLast?: boolean;
  mainColor?: string;
  objSideColor?: string;
  arrSideColor?: string;
  stringColor?: string;
  numberColor?: string;
  booleanColor?: string;
  nullColor?: string;
  otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
  data: () => {
    return {};
  },
  isLast: true,
});

function htmlTranslate(value: any) {
  const typeofs = Object.prototype.toString.call(value);
  if (typeofs === '[object String]') {
    return `"${value}"`;
  } else if (typeofs === '[object Null]') {
    return 'null';
  } else {
    return value;
  }
}
function getColor(value: any) {
  const typeofs = Object.prototype.toString.call(value);
  switch (typeofs) {
    case '[object Number]':
      return props.numberColor; // NaN Infinity 也是Number类型

    case '[object String]':
      return props.stringColor;

    case '[object Boolean]':
      return props.booleanColor;

    case '[object Null]':
      return props.nullColor;

    default:
      return props.otherColor;
  }
}
</script>
<template>
  <span style="font-family: 'Gill Sans', sans-serif">
    <span :style="{ color: getColor(props.data) }">
      {{ htmlTranslate(props.data) }}</span
    >
    <span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
  </span>
</template>

<style lang="scss" scoped></style>