<template>
  <el-dialog v-model="info.show" :title="info.title" :close-on-press-escape="false" :close-on-click-modal="false"
    align-center append-to-body :width="info.width" modal-class="choice-tool-param-dlg">
    <json-viewer :value="info.data" copyable boxed sort theme="my-json-view jv-light" />
    <template #footer>
      <div style="padding-right: var(--el-dialog-padding-primary);text-align: center;">
        <el-button type="primary" @click="info.show = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
const info = reactive({
  title: 'Json View',
  show: false,
  width: '960px',
  data: null
})

const showDialog = opt => {
  info.title = opt.title || info.title;
  info.width = opt.width || info.width;
  info.show = true;
  info.data = opt.data || {};

}
defineExpose({
  showDialog
})
</script>