<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { PlayOne, PauseOne } from '@icon-park/vue-next'
import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
import { onHide } from '@dcloudio/uni-app'
import aTrumpet from '@/uni_modules/a-trumpet/components/a-trumpet/a-trumpet.vue'
import { useUserStore } from '@/store'

const props = defineProps<{
  extra: ITalkRecordExtraAudio
  data: ITalkRecord
  maxWidth?: Boolean
}>()

const userStore = useUserStore()
const talkParams = reactive({
  uid: computed(() => userStore.uid),
})

const audioContext = ref<any>(null)
const durationDesc = ref('-')
const state = reactive({
  isAudioPlay: false,
  progress: 0,
  duration: 0,
  currentTime: 0,
  loading: true,
})

// 监听其它音频播放事件
function onOtherAudioPlay(e) {
  if (e.detail !== props.data.msg_id && state.isAudioPlay) {
    audioContext.value.pause()
    state.isAudioPlay = false
  }
}

onMounted(() => {
  audioContext.value = uni.createInnerAudioContext()
  audioContext.value.src = props.extra.url

  audioContext.value.onCanplay(() => {
    state.duration = audioContext.value.duration
    durationDesc.value = formatTime(parseInt(audioContext.value.duration))
    state.loading = false
  })

  audioContext.value.onTimeUpdate(() => {
    if (audioContext.value.duration == 0) {
      state.progress = 0
    } else {
      state.currentTime = audioContext.value.currentTime
      state.progress =
        (audioContext.value.currentTime / audioContext.value.duration) * 100
    }
  })

  audioContext.value.onEnded(() => {
    state.isAudioPlay = false
    state.progress = 0
  })

  audioContext.value.onError((e) => {
    console.log('音频播放异常===>', e)
  })

  window.addEventListener('audio-play', onOtherAudioPlay)
})

onUnmounted(() => {
  window.removeEventListener('audio-play', onOtherAudioPlay)
  audioContext.value &&
    audioContext.value.destroy &&
    audioContext.value.destroy()
})

onHide(() => {
  if (audioContext.value && audioContext.value.pause) {
    audioContext.value.pause()
    state.isAudioPlay = false
  }
})

const onPlay = () => {
  if (state.isAudioPlay) {
    audioContext.value.pause()
    state.isAudioPlay = false
  } else {
    // 通知其它音频暂停
    window.dispatchEvent(
      new CustomEvent('audio-play', { detail: props.data.msg_id }),
    )
    audioContext.value.play()
    state.isAudioPlay = true
  }
}

const formatTime = (value: number = 0) => {
  if (value == 0) {
    return '-'
  }
  const minutes = Math.floor(value / 60)
  let seconds = value
  if (minutes > 0) {
    seconds = Math.floor(value - minutes * 60)
  }
  return `${minutes}'${seconds}"`
}
</script>
<template>
  <div
    class="audio-message"
    @click.stop="onPlay"
    :class="
      props?.data?.user_id == talkParams.uid
        ? 'justify-end py-[22rpx] pl-[30rpx] pr-[16rpx]'
        : 'justify-start py-[22rpx] pr-[30rpx] pl-[16rpx]'
    "
  >
    <a-trumpet
      v-if="props?.data?.user_id != talkParams.uid"
      :isPlay="state.isAudioPlay"
      color="#C1C1C1"
      :size="30"
    ></a-trumpet>
    <div
      :class="
        props?.data?.user_id == talkParams.uid ? 'mr-[8rpx]' : 'ml-[8rpx]'
      "
    >
      {{ Math.ceil(props?.extra?.duration / 1000) }}s
    </div>
    <a-trumpet
      v-if="props?.data?.user_id == talkParams.uid"
      :isPlay="state.isAudioPlay"
      color="#C1C1C1"
      :size="30"
      direction="left"
    ></a-trumpet>
  </div>
</template>
<style lang="less" scoped>
.audio-message {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
}

.im-message-audio {
  --audio-bg-color: #f5f5f5;
  --audio-btn-bg-color: #ffffff;

  width: 200px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--audio-bg-color);

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .play {
    width: 45px;
    height: inherit;
    flex-shrink: 0;

    .btn {
      width: 26px;
      height: 26px;
      background-color: var(--audio-btn-bg-color);
      border-radius: 50%;
      color: rgb(24, 24, 24);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .desc {
    flex: 1 1;
    height: inherit;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    .line {
      justify-content: space-between;
      height: 30px;
      width: 2px;
      background-color: rgb(40, 39, 39);
      margin-left: 3px;

      &:first-child {
        margin-left: 0;
      }

      &:nth-child(1) {
        height: 16px;
      }
      &:nth-child(2) {
        height: 10px;
      }
      &:nth-child(3) {
        height: 8px;
      }
      &:nth-child(4) {
        height: 6px;
      }
      &:nth-child(5) {
        height: 2px;
      }
      &:nth-child(6) {
        height: 10px;
      }
      &:nth-child(7) {
        height: 20px;
      }

      &:nth-child(8) {
        height: 16px;
      }
      &:nth-child(9) {
        height: 10px;
      }
      &:nth-child(10) {
        height: 13px;
      }
      &:nth-child(11) {
        height: 10px;
      }
      &:nth-child(12) {
        height: 8px;
      }
      &:nth-child(13) {
        height: 15px;
      }
      &:nth-child(14) {
        height: 16px;
      }
      &:nth-child(15) {
        height: 16px;
      }
      &:nth-child(16) {
        height: 15px;
      }
      &:nth-child(17) {
        height: 14px;
      }
      &:nth-child(18) {
        height: 12px;
      }
      &:nth-child(19) {
        height: 8px;
      }
      &:nth-child(20) {
        height: 3px;
      }
      &:nth-child(21) {
        height: 6px;
      }
      &:nth-child(22) {
        height: 10px;
      }
      &:nth-child(23) {
        height: 16px;
      }
    }

    .indicator {
      position: absolute;
      height: 70%;
      width: 1px;
      background-color: #9b9595;
    }
  }

  .time {
    width: 50px;
    height: inherit;
    font-size: 12px;
    flex-shrink: 0;
  }
}

html[theme-mode='dark'] {
  .im-message-audio {
    --audio-bg-color: #2c2c32;
    --audio-btn-bg-color: rgb(78, 75, 75);

    .btn {
      color: #ffffff;
    }

    .desc {
      .line {
        background-color: rgb(169, 167, 167);
      }
    }
  }
}
</style>
