<template>
  <div>
    <!-- 头部导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>小工具</el-breadcrumb-item>
      <el-breadcrumb-item>kdsp解密</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <p>请输入待解密的数据：</p>
      <vue-json-editor v-model="toBeDecrupt" :mode="'code'" :showBtns="false" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave" />
      <el-button type="primary" @click="decryptKdspData">开始解密</el-button>
      <p>解密后的数据为：</p>
      <vue-json-editor v-model="decryptResult" :mode="'code'" :showBtns="false" lang="zh" @json-change="onJsonChange" @json-save="onJsonSave" />
    </el-card>
  </div>
</template>

<script>
import { kdspDecrypt } from '@/api/effect'
import vueJsonEditor from 'vue-json-editor'
export default {
  data() {
    return {
      queryInfo: {
        data: ''
      },
      toBeDecrupt: '',
      decryptResult: ''
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    decryptKdspData() {
      this.queryInfo.data = JSON.stringify(this.toBeDecrupt)
      kdspDecrypt(this.queryInfo).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.decryptResult = JSON.parse(resp.data.data)
        }
      })
    },
    onJsonChange() {},
    onJsonSave() {}
  }
}
</script>

<style lang="less" scoped>
.el-button {
  margin-top: 20px;
}
.jsoneditor-outer {
  height: 500px;
}
</style>
