<script setup>
import { NButton, NSpace, NIcon } from "naive-ui";
import PlayCircle from '@/assets/svgs/PlayCircle.svg'
import ChevronForward from "@/assets/svgs/ChevronForward.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>
  <n-button circle>
    <template #icon>
      <svg-icon name="HeartOutline" />
    </template>
  </n-button>
  <n-button
        text
        icon-placement="right"
        size="large"
        type="primary"
        style="font-size: 1.3em; margin-top: 6px"
      >
        <template #icon>
          <n-icon>
            <svg-icon name="ChevronForward" class="" />
          </n-icon>
        </template>
        最新音乐
      </n-button>
  
  <svg-icon name="Play" class="text-xl md:text-3xl text-blue-500" />
  <svg-icon name="ChevronForward" class="mx-1 text-orange-500" />
  <n-icon class=" text-red-500">
    <PlayCircle />
  </n-icon>

</template>

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

<style lang="less" scoped>

</style>
