import {
  PropType,
  Transition,
  computed,
  defineComponent,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './index.module.less';
import { NButton, NImage, NProgress, NSlider } from 'naive-ui';
// import { IMusicItem } from '../../type';
import icon_pre from '../../image/icon_pre.png';
import icon_next from '../../image/icon_next.png';
import icon_play from '../../image/icon_play.png';
import icon_pause from '../../image/icon_pause.png';
import { Button, Circle, Slider } from 'vant';
// import { getSecondRPM } from '/src/utils';
// import TheNoticeBar from '/src/components/TheNoticeBar';

// 秒转分
export const getSecondRPM = (second: number, type?: string) => {
  if (isNaN(second)) return '00:00';
  const mm = Math.floor(second / 60)
    .toString()
    .padStart(2, '0');
  const dd = Math.floor(second % 60)
    .toString()
    .padStart(2, '0');
  if (type === 'cn') {
    return mm + '分' + dd + '秒';
  } else {
    return mm + ':' + dd;
  }
};
export default defineComponent({
  name: 'playItem',
  props: {
    item: {
      type: Object as PropType<any>,
      default: () => ({})
    },
    show: {
      type: Boolean,
      default: false
    },
    playState: {
      type: String as PropType<'play' | 'pause'>,
      default: 'pause'
    },
    type: {
      type: String,
      default: ''
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    let timer = null as any;
    const audioData = reactive({
      isFirst: true,
      duration: 0.1,
      currentTime: 0
    });
    const audioRef = ref();

    /** 加载成功 */
    const onLoadedmetadata = () => {
      audioData.duration = audioRef.value?.duration;
      if (audioData.isFirst) {
        audioData.isFirst = false;
        return;
      }
      if (props.playState === 'play') {
        audioRef.value.play();
      }
    };
    /** 改变时间 */
    const handleChangeTime = (val: number) => {
      audioRef.value.pause();
      audioData.currentTime = val;
      clearTimeout(timer);
      timer = setTimeout(() => {
        audioRef.value.currentTime = val;
        if (props.playState === 'play') {
          audioRef.value.play();
        }
        timer = null;
      }, 300);
    };
    const time = computed(() => {
      return `${getSecondRPM(audioData.currentTime)} / ${getSecondRPM(
        audioData.duration
      )}`;
    });

    watch(
      () => props.playState,
      val => {
        if (val === 'play') {
          audioRef.value.play();
        } else {
          audioRef.value.pause();
        }
      }
    );

    return () => (
      <div
        class={[
          styles.container,
          // props.type === 'preview' && styles.previewcontainer,
          // props.type === 'modal' && styles.containerModal
          styles.containerModal,
          props.show ? styles.show : styles.hidden
        ]}>
        <div class={[styles.item]}>
          <div
            class={[
              styles.img,
              props.playState !== 'play' && styles.imgRotate
            ]}>
            <NImage
              lazy
              objectFit="cover"
              previewDisabled={true}
              src={'https://oss.dayaedu.com/klx/16983720423251690789356356.png'}
              onLoad={e => {
                (e.target as any).dataset.loaded = 'true';
              }}
            />

            <svg class={styles.svgcontainer}>
              <defs>
                <linearGradient id="GradientProgress">
                  <stop stop-color="#5BECFF" offset="0%" />
                  <stop stop-color="#259CFE" offset="100%" />
                </linearGradient>
              </defs>
            </svg>

            <Circle
              class={styles.progress}
              startPosition="bottom"
              currentRate={(audioData.currentTime / audioData.duration) * 100}
              // currentRate={90}
              strokeWidth={50}
            />
          </div>
          <div class={styles.title}>
            <div class={styles.titleName}>{props.item.name}</div>
          </div>

          <div class={styles.playBtns}>
            {/* <Button
              color="rgba(246,246,246,1)"
              round
              onClick={() => emit('change', 'pre')}>
            </Button> */}
            <img
              class={styles.btn1}
              src={icon_pre}
              onClick={(e: any) => {
                e.stopPropagation();
                emit('change', 'pre');
              }}
            />

            <div
              class={styles.playBtn}
              onClick={(e: any) => {
                e.stopPropagation();
                emit('change', props.playState === 'pause' ? 'play' : 'pause');
              }}>
              <img
                style={{
                  display: props.playState === 'pause' ? '' : 'none'
                  // transform: 'scale(1.5) translateX(1px)'
                }}
                src={icon_play}
              />
              <img
                style={{
                  display: props.playState === 'play' ? '' : 'none'
                  // transform: 'scale(1.5)'
                }}
                src={icon_pause}
              />
            </div>

            <img
              class={styles.btn1}
              src={icon_next}
              onClick={(e: any) => {
                e.stopPropagation();
                emit('change', 'next');
              }}
            />
            {/* <Button
              color="rgba(57,130,246,1)"
              class={styles.playBtn}
              round
              onClick={() =>
                emit('change', props.playState === 'pause' ? 'play' : 'pause')
              }>
              <img
                style={{
                  display: props.playState === 'pause' ? '' : 'none'
                  // transform: 'scale(1.5) translateX(1px)'
                }}
                src={icon_play}
              />
              <img
                style={{
                  display: props.playState === 'play' ? '' : 'none'
                  // transform: 'scale(1.5)'
                }}
                src={icon_pause}
              />
            </Button>
            <Button
              color="rgba(246,246,246,1)"
              round
              onClick={() => emit('change', 'next')}>
              <img src={icon_next} />
            </Button> */}
          </div>

          <div class={styles.timeWrap}>
            {/* <Slider
              step={0.01}
              class={styles.timeProgress}
              value={audioData.currentTime}
              max={audioData.duration}
              onUpdate:value={val => handleChangeTime(val)}
            /> */}
            <Slider
              step={0.01}
              class={styles.timeProgress}
              v-model={audioData.currentTime}
              max={audioData.duration}
              onUpdate:modelValue={val => {
                handleChangeTime(val);
              }}
              onDragStart={() => {
                // state.dragStatus = true;
              }}
              onDragEnd={() => {
                // state.dragStatus = false;
              }}
            />
            <div class={styles.time}>{time.value}</div>
            <audio
              ref={audioRef}
              src={props.item.url}
              onLoadedmetadata={onLoadedmetadata}
              onEnded={() => {
                emit('change', 'pause');
              }}
              onTimeupdate={() => {
                if (timer) return;
                audioData.currentTime = audioRef.value?.currentTime;
              }}></audio>
          </div>
        </div>
      </div>
    );
  }
});
