<template>
  <span>
    <el-button type="primary" class="button-sty" @click="show"> 查看模板json </el-button>
    <el-dialog :visible="visible" :maskClosable="false" @cancel="hideModal">
      <!-- <el-spin :spinning="spinning" style="min-height: 100px"> -->
      <el-input type="textarea" :rows="2" style="width: 40vw" v-model:value="jsonOut" />
      <!-- </el-spin> -->
      <template slot="title">
        <div>
          <div style="margin-right: 20px">JSON</div>
          <el-switch
            active-text="tid模式"
            inactive-text="默认"
            v-model:checked="tidMode"
            @change="onModeChange"
          />
          <el-switch
            active-text="美化"
            inactive-text="压缩"
            v-model:checked="beautify"
            @change="onModeChange"
          />
        </div>
      </template>
      <template slot="footer">
        <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
      </template>
    </el-dialog>
  </span>
</template>

<script>
export default {
  name: "JSONView",
  props: {
    template: {
      type: Object,
    },
  },
  data() {
    return {
      visible: false,
      spinning: true,
      jsonOut: "",
      tidMode: false,
      beautify: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    hideModal() {
      this.visible = false;
    },
    show() {
      this.visible = true;
      this.spinning = true;
      setTimeout(() => {
        let json = this.tidMode ? this.template.getJsonTid() : this.template.getJson();
        let beautify = this.beautify ? 2 : 0;
        this.jsonOut = JSON.stringify(json, null, beautify);
        this.spinning = false;
      }, 500);
    },
    onModeChange() {
      this.show();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-modal-body {
  padding: 0px;
}

::v-deep .ant-modal-content {
  margin-bottom: 24px;
}
</style>
