<template>
  <div>
    <i class="el-icon-s-management icon" :title="title" @click="openDialog" />
    <el-dialog
      :key="key"
      :title="title"
      :inner-dialog="true"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      append-to-body
      @cancel="cancel"
    >
      <vue-json-editor
        id="minejson"
        v-model="resultInfo"
        :mode="'code'"
        lang="zh"
        @json-change="onJsonChange"
        @json-save="onJsonSave"
        @has-error="onError"
      />
      <el-tooltip
        content="全屏缩放"
        effect="dark"
        placement="bottom"
        fullscreen
        class="fullScreen"
      >
        <i class="el-icon-full-screen" @click="enLarge" />
      </el-tooltip>
      <template slot="footer">
        <div class="dialog-footer flex flex-pack-center">
          <el-button
            type="primary"
            class="confirmBtn"
            @click="onJsonSave"
          >保存</el-button>
          <el-button
            type="primary"
            class="cancelBtn"
            @click="cancel"
          >关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  components: {
    vueJsonEditor
  },
  props: {
    title: {
      type: String,
      default: '配置参数'
    },
    resultInfos: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeNames: [],
      resultInfo: {},
      tmpResultInfo: {},
      dialogVisible: false,
      hasJsonFlag: true,
      key: 0,
      isEnlarge: false
    }
  },
  watch: {
    resultInfos: {
      handler: function(val) {
        ++this.key
        this.resultInfo =
          this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
        this.tmpResultInfo = this.resultInfo
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    this.resultInfo =
      this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
  },

  methods: {
    onJsonChange(value) {
      // 只有在格式正确的时候进入此事件
      this.hasJsonFlag = true
    },
    onJsonSave() {
      const value = this.resultInfo
      console.log(this.resultInfo, 'resultInfo')
      if (this.hasJsonFlag === false) {
        this.$message.error({ message: 'json格式验证失败', showClose: true })
        // alert("json验证失败")
        return false
      } else {
        this.dialogVisible = false
        this.$emit('getJsonString', JSON.stringify(value))
        return true
      }
    },
    onError(value) {
      this.hasJsonFlag = false
    },
    openDialog() {
      this.dialogVisible = true
    },
    cancel() {
      console.log(this.tmpResultInfo, 'tmpResultInfo')
      this.resultInfo = this.tmpResultInfo
      this.dialogVisible = false
    },
    // 放大
    enLarge() {
      const fullarea = document.getElementById('minejson')
      if (fullarea.requestFullscreen) {
        fullarea.requestFullscreen()
      } else if (fullarea.webkitRequestFullScreen) {
        fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等)
      } else if (fullarea.mozRequestFullScreen) {
        fullarea.mozRequestFullScreen() // moz内核(firefox)
      } else if (fullarea.msRequestFullscreen) {
        fullarea.msRequestFullscreen() // IE11、edge
      }
      this.isEnlarge = true
    }
  }
}
</script>

<style scoped lang="scss">
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.icon {
  color: #349af3;
}
/deep/ .jsoneditor-vue {
  height: 100%;
}
.fullScreen {
  position: absolute;
  right: 5%;
  top: 22%;
  cursor: pointer;
  color: #fff;
}
/deep/ .jsoneditor-modes {
  display: none !important;
}
.jsoneditor-poweredBy {
  display: none !important;
}
.jsoneditor-menu {
  background-color: #9c9e9f !important;
  border-bottom: 1px solid #9c9e9f !important;
}
.jsoneditor {
  border: 1px solid #9c9e9f !important;
}
.el-collapse {
  border: 0;
}
.el-collapse-item__header {
  height: 44px;
}
</style>