<template>
  <el-drawer
      v-if="isShow"
      v-model="isJsonViewShow"
      title="Json数据预览"
      direction="rtl"
      :before-close="handleClose"
  >
    <json-viewer :value="jsonData" :expand-depth="4" copyable ></json-viewer>
  </el-drawer>
</template>

<script>
import JsonViewer from 'vue-json-viewer'

export default {
  data() {
    return {
      isJsonViewShow: true,
      jsonData: {},
    }
  },
  components: {
    JsonViewer
  },
  props: {
    isShow: Boolean,
    title: String,
    data: String,
    close: Function,
  },
  mounted() {
    if (this.data) {
      try {
        this.jsonData = JSON.parse(this.data)
      } catch (e) {
        this.$message({message: '数据格式错误', type: 'error'})
        this.handleClose()
      }
    } else {
      this.$message({message: '数据为空, 不支持预览', type: 'warning'})
      this.handleClose()
    }

  },
  methods: {
    handleClose() {
      this.close();
    }
  }
}
</script>

<style>

</style>