<!--
 * @FileDescription: JSON 数组 预览组件
 * @Date: 2023-05-29
 * @LastEditTime: 2023-05-29
-->
<script setup lang="ts">
import { ref } from 'vue';
import ObjView from './ObjView.vue';
import HtmlView from './HtmlView.vue';
import { isObject, isArray, isLastArr } from '../utils';

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,
});

const show = ref(true);

function clickStart() {
  show.value = !show.value;
}
</script>
<template>
  <div style="font-family: 'Gill Sans', sans-serif; position: relative">
    <div :style="{ color: arrSideColor }" class="obj-side-start">
      <q-icon
        :name="show ? 'bi-dash-square' : 'bi-plus-square'"
        @click="clickStart"
        class="icon-action"
      />
      &nbsp;[
    </div>

    <div style="padding-left: 16px" v-show="show">
      <template v-for="(m, n) in props.data" :key="n">
        <div v-if="isObject(m) && Object.keys(m).length > 0">
          <obj-view
            v-bind="props"
            :data="m"
            :is-last="isLastArr(n, props.data)"
          />
        </div>
        <div v-else-if="isArray(m) && m.length > 0">
          <arr-view
            v-bind="props"
            :data="m"
            :is-last="isLastArr(n, props.data)"
          />
        </div>
        <div v-else>
          <html-view
            v-bind="props"
            :data="m"
            :is-last="isLastArr(n, props.data)"
          />
        </div>
      </template>
    </div>
    <div v-show="!show" class="hide-text" :style="{ color: arrSideColor }">
      ...
    </div>

    <div class="obj-side-end" v-show="show">
      <span :style="{ color: arrSideColor }">]</span>
      <span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.obj-side-start {
  // padding: 0 8px;
  .icon-action {
    &:hover {
      cursor: pointer;
    }
  }
}
.obj-side-end {
  // padding: 0 8px;
}
.hide-text {
  position: absolute;
  top: 0;
  left: 46px;
  &::after {
    position: absolute;
    content: ']';
    right: -8px;
  }
}
</style>
