<template>
  <div id="todoList">
    <van-search
      v-model="keywords"
      placeholder="请输入解析key"
      show-action
      @search="onSearch"
    >
      <i slot="left-icon" class="fa fa-search"></i>
      <div slot="action" class="font14" @click="onSearch">解析</div>
    </van-search>
    <h3>取到的Cookie:</h3>
    <p style="word-wrap:break-word;word-break: normal">{{oCookie}}</p>
    <h3>解析后的结果:</h3>
    <p style="word-wrap:break-word;word-break: normal;">{{decryptStr}}</p>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'

export default {
  name: 'CookieView',
  components: {
  },
  data() {
    return {
      keywords: '',
      oCookie: '',
      decryptStr: ''
    }
  },
  mounted() {
    // 设置标题栏关闭返回按钮
    this.$store.commit('setNavBar', {
      title: 'Cookie演示',
      show: true,
      leftArrow: true
    })
    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    window.addEventListener('popstate', this.onBrowserBack, false)
    // this.oCookie = document.cookie
    // this.$toast(document.cookie)
  },
  destroyed() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  methods: {
    onSearch() {
      if (this.keywords && this.keywords.length >= 16) {
        this.oCookie = ''
        this.decryptStr = ''
        this.GetQueryString()
      } else {
        this.$toast('请输入正确的key!!')
      }
    },
    // 获取cookie
    getCookie(cname) {
      let name = cname + '='
      let ca = document.cookie.split(';')
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i]
        while (c.charAt(0) === '') c = c.substring(1)
        if (c.indexOf(name) !== -1) {
          return c.substring(name.length, c.length)
        }
      }
      return ''
    },
    // 对解密后的数据进行分拆
    GetQueryString() {
      let str = this.getCookie('info')
      this.oCookie = str
      console.log(this.oCookie)
      console.log(str)
      if (!str) {
        this.$toast('获取Cookie失败~')
        return
      }
      this.decryptStr = this.Decrypt(str)
      // let tempArr = this.Decrypt(str).split('&')
      // for (let i = 0; i < tempArr.length; i++) {
      //   this.decryptStr += tempArr[i] + '\n'
      // let item = tempArr[i].split('=')
      // if (item[0].trim() === name) {
      //   return item[1]
      // }
      // }
    },
    // 解密
    Decrypt(str) {
      const key = CryptoJS.enc.Utf8.parse(this.keywords) // 十六位十六进制数作为秘钥 （由管理员提供）
      const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412') // 十六位十六进制数作为秘钥偏移量（固定值）
      let decrypt = CryptoJS.AES.decrypt(str, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
      return decryptedStr.toString()
    }
  }
}
</script>

<style lang="scss" scoped>
  #todoList{
    background: #19c2fa;
    .listContent {
      background: white;
      margin:0px 13px;
      padding: 2px 14px 2px 14px;
      /deep/ .van-row {
        padding-top: 6px;
        padding-bottom: 6px;
      }
    }
  }
</style>
