import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NImage } from 'naive-ui';
// import Vudio from 'vudio.js';

export default defineComponent({
  name: 'audio-player',
  props: {
    cover: {
      type: String,
      default: 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
    },
    content: {
      type: String,
      default: ''
    },
    previewDisabled: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    // const canvasEle: any = ref();
    // const audioEle: any = ref();

    // const vudio: any = ref();
    const audioForm = reactive({
      status: false
    });

    // 鼠标移上时
    // const onMouseover = (e: MouseEvent) => {
    //   console.log(e, 'onMouseover');
    //   audioForm.status = true;

    //   nextTick(() => {
    //     // onInit(audioEle.value, canvasEle.value);

    //     console.log(audioEle.value, 'onMouseout');

    //     setTimeout(() => {
    //       // console.log(audioEle.value, 'value');
    //       // audioEle.value.pause();
    //       // audioEle.value.load();
    //       // audioEle.value.currentTime = 0;
    //       // audioEle.value.muted = true;
    //       // audioEle.value.play();

    //     }, 10);
    //   });
    // };

    // // 鼠标移开时
    // const onMouseout = (e: MouseEvent) => {
    //   console.log(e, 'mouseover');
    //   audioForm.status = false;
    // };

    // const onInit = (audio: undefined, canvas: undefined) => {
    //   if (!vudio.value) {
    //     vudio.value = new Vudio(audio, canvas, {
    //       effect: 'waveform',
    //       accuracy: 256,
    //       width: 1024,
    //       height: 600,
    //       waveform: {
    //         maxHeight: 200,
    //         color: [
    //           [0, '#44D1FF'],
    //           [0.5, '#44D1FF'],
    //           [0.5, '#198CFE'],
    //           [1, '#198CFE']
    //         ],
    //         prettify: false
    //       }
    //     });
    //     vudio.value.dance();
    //   }
    // };
    return () => (
      <div
        class={[
          styles.audioContainer,
          audioForm.status ? styles.imgAnimated : ''
        ]}>
        <NImage
          class={[styles.cover, audioForm.status ? styles.imgHover : '']}
          lazy
          previewDisabled={true}
          objectFit="cover"
          src={props.cover}
        />

        {/* <div
          class={[
            styles.previewAudio,
            audioForm.status ? styles.previewAudioHover : ''
          ]}>
          <audio
            controls="true"
            muted="true"
            autoplay
            preload="auto"
            ref={(el: any) => (audioEle.value = el)}
            crossorigin="anonymous"
            src={props.content + '?time=1'}></audio>
          <canvas ref={(el: any) => (canvasEle.value = el)}></canvas>
        </div> */}
      </div>
    );
  }
});
