<template>
  <el-card class="box-card">
    <el-card style="background: rgb(217, 236, 255)">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">接口加解密：</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">简介：接口加解密分为： 前端请求参数加解密 和 后端返回结果加解密。</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">- 支持国密SM、AES加密算法。前端修改:/utils/encrypt.js文件</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">- 前端请看：/utils/encrypt.js、 /api/demo/apiEncrypt.js 等文件</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">- 后端请看：@ApiEncrypt 和 @ApiDecrypt 注解，具体请看 ruoyi-common 中的 com.ruoyi.common.apiencrypt 包</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">- demo请看：前端：/views/demo/api-encrypt 目录，后端 请看：项目的：com.ruoyi.demo.controller.AdminApiEncryptController</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-collapse v-model="activeNames" >
        <el-collapse-item title="一、请求加密" name="1">
          <el-form ref="form" :model="requestForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="requestForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="requestForm.age"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="requestFormSubmit">测试 请求加密</el-button>
            </el-form-item>
          </el-form>

        </el-collapse-item>

        <el-collapse-item title="二、返回加密" name="2">
          <el-form ref="form" :model="reponseForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="reponseForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="reponseForm.age"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reponseFormSubmit">测试 返回加密</el-button>
            </el-form-item>
          </el-form>

        </el-collapse-item>
        <el-collapse-item title="三、请求和返回都加密" name="3">
          <el-form ref="form" :model="requestReponseForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="requestReponseForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="requestReponseForm.age"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="requestReponseFormSubmit">测试 请求和返回加密</el-button>
            </el-form-item>
          </el-form>

        </el-collapse-item>

      </el-collapse>

    </el-card>

  </el-card>

</template>
<script>
  import { reactive, ref } from 'vue';
  import { testRequestEncrypt, testResponseEncrypt, testDecryptAndEncrypt, testArray } from '@/api/demo/apiEncrypt';
  import { encryptData } from '@/utils/encrypt';

export default {
    data() {
      return {
        requestForm: {"":""},
        reponseForm: {"":""},
        requestReponseForm: {"":""}
      }
    },
    methods: {
      requestFormSubmit() {
        // 请求参数加密
        let requestEncryptFormStr = JSON.stringify(this.requestForm);
        console.log(" ---加密前--->" + requestEncryptFormStr)
        let requestEncryptFormEncryptStr = encryptData(this.requestForm);
        console.log(" ---加密后--->" + requestEncryptFormEncryptStr)

        testRequestEncrypt(this.requestForm).then(response => {
             console.log(" ---响应参数--->" + response.data)
        });
      },

      reponseFormSubmit() {
        // 响应参数加密
        let requestEncryptFormStr = JSON.stringify(this.reponseForm);
        console.log(" ---请求参数--->" + requestEncryptFormStr)
        testResponseEncrypt(this.reponseForm).then(response => {
          // 此时 response中 存在接口返回的加密数据 和 响应处解密后的数据
          console.log(" ---响应参数--->" + JSON.stringify(response))
        });
      },

      requestReponseFormSubmit() {
        // 请求参数加密
        let requestEncryptFormStr = JSON.stringify(this.requestReponseForm);
        console.log(" ---加密前--->" + requestEncryptFormStr)
        let requestEncryptFormEncryptStr = encryptData(this.requestReponseForm);
        console.log(" ---加密后--->" + requestEncryptFormEncryptStr)

        testDecryptAndEncrypt(this.requestReponseForm).then(response => {
             // 此时 response中 存在接口返回的加密数据 和 响应处解密后的数据
             console.log(" ---响应参数--->" + JSON.stringify(response))
        });

      },

      requestReponseSubmit(){
        console.log('submit!');
      },

    }
  }

</script>
