<template>
  <div class="xd-json-view">
    <template v-if="show">
      <json-viewer
        v-if="level>0"
        :value="list"
        :expand-depth="Number(level)"
      ></json-viewer>
      <json-viewer v-else :value="list"></json-viewer>
    </template>
    <template v-else>
      <json-viewer :value="list" :expanded="true"></json-viewer>
    </template>
  </div>
</template>

<script>
  /**
   * @description 单选-二选一插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://www.npmjs.com/package/vue-json-viewer
   *
   * @property {Number|String|Boolean} defaultValue 已经选中数据 （选填） 默认：''
   *  defaultValue其值:1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2]
   * @property {Object| Array| null} list 列表显示数据 （必选） 默认：null
   * @property {Number | String} typeValue 返回值类型 值： 1=>（Y,N） 2=> [true|false]  3=>[1,0] 4=>[1, 2] 默认:1
   */

  import JsonViewer from 'vue-json-viewer';

	export default {
		name: "XdJsonView",
    components: {
      JsonViewer
    },
    props:{
			data:{
				type: Object | Array | String | Number | Boolean | Function,
        required: true
      },
      show:{
				type: Boolean,
        default: false,
      },
      level: {
				type: Number|String,
				default: 0,
      }
    },
    data(){
			return {
				list: null,
      }
    },
    created(){
			this.list = this.data;
    },
    watch:{
      data(val){
				this.list = val;
      }
    }
	}
</script>

<style scoped lang="scss">
  .xd-json-view {
    & ::v-deep {
      & .jv-code.open {
        padding: 10px 0 20px;
      }
      & .jv-container .jv-code {
        overflow: hidden;
        padding: 0;
        line-height: 20px;
      }
    }
  }
</style>
