<!--
 * @FileDescription: JSON 预览组件
 * @Date: 2023-05-29
 * @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import ObjView from './element/ObjView.vue';
import ArrView from './element/ArrView.vue';
import HtmlView from './element/HtmlView.vue';

interface IDetailProps {
  data: any;
  mainColor?: string;
  objSideColor?: string;
  arrSideColor?: string;
  stringColor?: string;
  numberColor?: string;
  booleanColor?: string;
  nullColor?: string;
  otherColor?: string;
}
const props = withDefaults(defineProps<IDetailProps>(), {
  data: () => {
    return {};
  },
  mainColor: '#587498',
  objSideColor: '#3C7DC4', // 大括号颜色
  arrSideColor: '#a64942', // 中括号颜色
  stringColor: '#5A8F29',
  numberColor: '#b38766',
  booleanColor: '#FF8F00',
  nullColor: '#a2a9af',
  otherColor: '#2B2B2B',
});

function isObject(data: any) {
  const typeofs = Object.prototype.toString.call(data);
  if (typeofs === '[object Object]') {
    return true;
  } else {
    return false;
  }
}

function isArray(data: any) {
  const typeofs = Object.prototype.toString.call(data);
  if (typeofs === '[object Array]') {
    return true;
  } else {
    return false;
  }
}
</script>
<template>
  <template v-if="isObject(props.data)">
    <obj-view v-bind="props" />
  </template>
  <template v-else-if="isArray(props.data)">
    <arr-view v-bind="props" />
  </template>
  <template v-else>
    <html-view v-bind="props" />
  </template>
</template>

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