<script setup>
import { NButton, NSpace, NIcon } from "naive-ui";
import PlayCircle from '@/assets/svgs/PlayCircle.svg'
import {ref} from 'vue'
import sparkMD from 'spark-md5' 
import CryptoJS from 'crypto-js';
import md5 from 'crypto-js/md5'; 
import sha256 from 'crypto-js/sha256'; 
import { sha256 as jsSha256, sha224 } from 'js-sha256';
import { collapseLight } from 'naive-ui/lib/collapse/styles';

const showEditor = ref(false) //是否显示编辑框

const edit = () => {
  showEditor.value = true
  console.log('调用edit方法。')
}

const fileChange = (e) => {
  let file = e.target.files[0];
  let fileReader = new FileReader()
  fileReader.readAsArrayBuffer(file);
  fileReader.onload = e => {
    // const s_md5 = sparkMD.hashBinary(e.target.result);
    // console.log(s_md5,  sparkMD.hashBinary('1111'));
    // const c_md5 = md5(e.target.result)

    // var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
    // let  c_sha256 = sha256(wordArray)
    // console.log(c_sha256.toString())
    let s_sha256 = jsSha256(e.target.result)
    console.log(s_sha256)
    // let hash = CryptoJS.SHA256(wordArray).toString();
    // console.log(hash)

    // //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
    // var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
    // // //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
    // var hash = CryptoJS.SHA256(wordArray).toString();
    // console.log(hash)
  }

  // let files = e.target.files[0];
  // //生成实例
  //   let fileReads = new FileReader();
  // //开始读取文件
  // fileReads.readAsArrayBuffer(files);
  // //读取回调
  // fileReads.onload=function(){
  //   //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
  //   var wordArray = CryptoJS.lib.WordArray.create(fileReads.result);
  //   //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
  //   var hash = CryptoJS.SHA256(wordArray).toString();
  //   console.log(hash)
  // }

}

</script>
<template>
  <!-- <NSpace>
    <NButton>
      <template #icon>
        <n-icon>
          <PlayCircle/>
        </n-icon>
      </template>
      NIcon 按钮
    </NButton>
    <NButton>
      <template #icon>
        <n-icon>
          <svg-icon name="PlayCircle"></svg-icon>
        </n-icon>
      </template>
      svg-sprite-loader 按钮
    </NButton>
    <NButton text style="font-size: 40px">
        <n-icon>
          <svg-icon name="Dots" />
        </n-icon>
      svg-sprite-loader 按钮
    </NButton>
    <NButton>
      <template #icon>
        <n-icon>
          <svg-icon name="PlayCircle"></svg-icon>
        </n-icon>
      </template>
      svg-sprite-loader 按钮
    </NButton>
  </NSpace> -->
  <n-space>
    <n-button @click="edit">
      新增
    </n-button>
    <n-button>
      编辑
    </n-button>
    <n-button>
      保存
    </n-button>
  </n-space>
  <div class="edit" v-show="showEditor">
    <div class="title">标题哈啊哈</div>
    <div class="content">
      Content 编辑内容
    </div>
    <div class="footer">
      Footer 尾部
    </div>
  </div>
  <input type="file" id="file" @change="fileChange">
  
  <div class="max-w-sm my-3 mx-auto hover:bg-purple-900  hover:text-white hover:cursor-pointer
    border-gray-100 border px-2 py-3 
    text-xs bg-white 
    rounded-md shadow-md">
    这是一个测试
  </div>

</template>

<script>
export default {};
</script>

<style lang="less" scoped>

</style>>
