<template>
  <div>
    <i class="el-icon-s-management icon" :title="title" @click="openDialog" />
    <el-dialog
      class="configuration"
      :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
        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 () {
        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: 20%;
    cursor: pointer;
    color: #fff;
  }
  /deep/ .jsoneditor-modes {
    display: none !important;
  }
  /deep/.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;
  }
  .configuration {
    color: white;
    margin-top: 6vh;
    /deep/.el-dialog {
      background-color: #031a46 !important;
      border: 1px solid #5f82c7;
      .el-dialog__header {
        .el-dialog__title {
          color: white !important;
        }
        .el-dialog__headerbtn {
          top: 20px;
        }
      }
    }
  }
</style>