import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
// import 'plyr/dist/plyr.css';
// import Plyr from 'plyr';
import { NImage } from 'naive-ui';

export default defineComponent({
  name: 'audio-player',
  props: {
    cover: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    previewDisabled: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const audioForm = reactive({
      status: false
    });

    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 : ''
          ]}>
          <video
            style={{ width: '100%', height: '100%' }}
            src={props.content}
            ref={videoRef}
            muted
            playsinline="false"></video>
        </div> */}
      </div>
    );
  }
});
