<template>
  <div>
    <i class="icon-tubiao-242 iconfont" :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去掉了 */
.iconfont {
  cursor: pointer;
  position: relative;
  top: 1px;
  color: #349af3;
}

::v-deep .jsoneditor-vue {
  height: 100%;
}

.fullScreen {
  position: absolute;
  right: 5%;
  top: 22%;
  cursor: pointer;
  color: #fff;
}

::v-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>