<template>
  <el-dialog
    title="修改预览"
    :visible.sync="visibleDialog"
    width="80%"
    @close="close"
  >
    <div
      id="jsonEditor"
      style="height:500px"
    />
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        :size="$buttonSize"
        @click="handleSave"
      >保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';
export default {
  components: {
    // JSONEditor,
  },
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
    selectRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visibleDialog: false,
      editor: null,
      options: {
        mode: 'code',
        search: false,
        transform: false,
      },
    };
  },
  watch: {
    dialogShow: {
      handler(nv) {
        this.visibleDialog = nv;
        if (nv) {
          this.$nextTick(() => {
            const container = document.getElementById('jsonEditor');
            this.editor = new JSONEditor(container, this.options);
            this.editor.set(JSON.parse(this.selectRow.messageContent));
          });
        }
      },
    },
  },
  mounted() {},
  methods: {
    close() {
      console.log('关闭了');
      this.visibleDialog = false;
      this.editor.destroy();
      this.$emit('update:dialogShow', false);
    },
    handleSave() {
      this.$apis
        .messageSave({
          'queryParam.moduleName': 'pubSendExceptionManager',
          'queryParam.domain': JSON.stringify({
            id: this.selectRow.id,
            messageContent: this.editor.get(),
          }),
        })
        .then((res) => {
          this.$message.success('请求成功');
          this.close();
          this.$parent.queryPage();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.jsoneditor .jsoneditor-transform),
:deep(.jsoneditor .jsoneditor-repair),
:deep(.jsoneditor-menu a.jsoneditor-poweredBy) {
  display: none;
}
</style>
