<template>
  <div class="cryptojs-box">
    <div class="Encrypt-box">
      <h2>加密</h2>
      <textarea v-model="EncryptText" rows="6" />
      <br />
      <div class="btn" @click="EncryptFn">执行</div>
      <p>{{ showEncryptText }}</p>
    </div>
    <div>
      <h2>解密</h2>
      <textarea v-model="DecryptText" rows="6" />
      <br />
      <div class="btn" @click="DecryptFn">执行</div>
      <p>{{ showDecryptText }}</p>
    </div>
  </div>
</template>

<script>
import { Encrypt, Decrypt } from '@/utils/crypto';

export default {
  name: 'cryptojs',
  data() {
    return {
      EncryptText: '',
      showEncryptText: '',
      DecryptText: '',
      showDecryptText: '',
    };
  },
  methods: {
    EncryptFn() {
      if (this.EncryptText) {
        this.showEncryptText = Encrypt(this.EncryptText);
      }
    },
    DecryptFn() {
      if (this.DecryptText) {
        this.showDecryptText = Decrypt(this.DecryptText);
      }
    },
  },
};
</script>

<style scoped lang="less">
.cryptojs-box {
  text-align: center;

  .Encrypt-box {
    margin-bottom: 70px;
  }

  h2 {
    padding: 0;
    margin: 0;
  }

  textarea {
    width: 90%;

    padding: 0;
    border: 1px solid #00000030;
    margin: 40px 0 0 0;
    //height: 50px;
  }

  .btn {
    cursor: pointer;
    user-select: none;
    padding: 5px;
    border: 1px solid #000000;
    display: inline-block;
  }
}
</style>
