<template>
  <div
    :style="{
      height: `${100 + (textDiv ? textDiv.clientHeight + 10 : 0)}px`,
    }"
    p-10
    bg-white
    w-500
    rounded-xl
    border="1px solid gray-200 "
  >
    <div>
      <div inline-flex text-size-6xl>
        與
        <div mx-5 inline-flex>{{ $props.customerName }}</div>
        進(jìn)行通話
      </div>
      <div text-gray-500 inline-flex float-right>{{ $props.callTime }}</div>
    </div>
    <div class="bg-[--td-brand-color-1]" float-left flex-center pl-9 pr-11 rounded-55 w-330 h-40 mt-10>
      <span w-50 inline-block mr-8> {{ transTime(audioCurrent) }} </span>
      <div class="progress" w-120 mx-10 my-0>
        <t-slider
          v-model="playProgress"
          :tooltip-props="{
            theme: 'light',
            content: transTime((changeVal * audioDuration) / 100),
          }"
          @change="change"
          @change-end="changeEnd"
        />
      </div>
      <span w-50 inline-block mr-6>{{ transTime(audioDuration) }}</span>
      <t-icon
        v-if="!playStatus"
        name="play-circle"
        class="color-[--td-brand-color-6]"
        w-34
        h-34
        ml-7
        cursor-pointer
        @click="onPlay"
      ></t-icon>
      <t-icon
        v-else
        class="color-[--td-brand-color-6]"
        w-34
        h-34
        ml-7
        cursor-pointer
        name="pause-circle"
        @click="onPause"
      ></t-icon>
    </div>
    <audio ref="audioRef" :src="url" @canplay="onCanplay" />
    <div ml-20 flex-center mt-10>
      <t-popup v-model:visible="speedVisible" placement="top" :width="50">
        <template #content>
          <div
            v-for="item in speedList"
            :key="item.value"
            mb-17
            cursor-pointer
            text-center
            @click="onChangeSpeed(item.value)"
          >
            <span>{{ item.label }}</span>
          </div>
        </template>
        <div inline ml-5 cursor-pointer>
          <span class="text-[var(--td-brand-color-6)]" cursor-pointer @click="onHandleSpeed"
            >{{ activeSpeed.toFixed(1) }}x</span
          >
          <div color-gray-6 text-12>倍速</div>
        </div>
      </t-popup>
      <div inline ml-20 flex-col-center cursor-pointer>
        <t-icon class="color-[var(--td-brand-color-6)]" ml-4 w-20 h-18 name="cloud-download"></t-icon>
        <div color-gray-6 text-12>下載</div>
      </div>
      <div inline ml-20 flex-col-center cursor-pointer @click="handleText">
        <t-icon class="color-[var(--td-brand-color-6)]" ml-5 w-20 h-18 name="translate"></t-icon>
        <div color-gray-6 text-12>轉(zhuǎn)文字</div>
      </div>
    </div>
    <div
      v-if="showText"
      ref="textDiv"
      class="bg-[var(--td-brand-color-1)]"
      p-10
      rounded-5
      mt-10
      max-h-190
      overflow-auto
      overflow-y-auto
    >
      {{ $props.text }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';
import { defineProps, onMounted, ref } from 'vue';

defineProps({
  customerName: {
    type: String,
    default: 'xxx',// 名字
  },
  callTime: {
    type: String,
    default: '2024-08-02 16:20:35',
  },
  url: {
    type: String,
    default: 'http://music.163.com/song/media/outer/url?id=1337065812.mp3',
  },
  text: {
    type: String,
    default: '默認(rèn)的內(nèi)容還可以吧我是默認(rèn)的語音轉(zhuǎn)文字內(nèi)容看看長度如何呢默認(rèn)的內(nèi)容還可以吧我是默認(rèn)的語音轉(zhuǎn)文字',
  },
});

const speedList = [
  {
    label: '2x',
    value: 2,
  },
  {
    label: '1.5x',
    value: 1.5,
  },
  {
    label: '1x',
    value: 1,
  },
  {
    label: '0.75x',
    value: 0.75,
  },
];

onMounted(() => {
  clearInterval(timeInterval.value);
});

const speedVisible = ref<boolean>(false); // 設(shè)置音頻播放速度彈窗
const audioRef = ref(); // 音頻標(biāo)簽對(duì)象
const activeSpeed = ref(1); // 音頻播放速度
const audioDuration = ref(0); // 音頻總時(shí)長
const audioCurrent = ref(0); // 音頻當(dāng)前播放時(shí)間
const playStatus = ref<boolean>(false); // 音頻播放狀態(tài)：true 播放，false 暫停
const playProgress = ref(0); // 音頻播放進(jìn)度
const timeInterval = ref(); // 獲取音頻播放進(jìn)度定時(shí)器
const showText = ref(false);
const textDiv = ref();
const changeVal = ref(0);
/** FUNCTION */
// 拖動(dòng)進(jìn)度條
const change = (val) => {
  changeVal.value = val;
};
const changeEnd = (val: number) => {
  if (audioDuration.value === 0) return;
  playProgress.value = val;
  audioRef.value.currentTime = (playProgress.value / 100) * audioDuration.value;
  audioCurrent.value = audioRef.value.currentTime;
};
// 文字展示
const handleText = async () => {
  showText.value = !showText.value;
};
// 音頻加載完畢的回調(diào)
const onCanplay = () => {
  audioDuration.value = audioRef?.value.duration || 0;
};
const onPlay = async () => {
  // 音頻播放完后，重新播放
  if (playProgress.value === 100) audioRef.value.currentTime = 0;

  await audioRef.value.play();
  playStatus.value = true;
  audioDuration.value = audioRef.value.duration;

  timeInterval.value = setInterval(() => {
    audioCurrent.value = audioRef.value.currentTime;
    playProgress.value = (audioCurrent.value / audioDuration.value) * 100;
    if (playProgress.value === 100) onPause();
  }, 100);
};
const onPause = () => {
  audioRef.value.pause();
  playStatus.value = false;
  clearInterval(timeInterval.value);
};
const onChangeSpeed = (value: number) => {
  activeSpeed.value = value;
  // 設(shè)置倍速
  audioRef.value.playbackRate = value;
  speedVisible.value = false;
};
const onHandleSpeed = () => {
  speedVisible.value = !speedVisible.value;
};
// 音頻播放時(shí)間換算
const transTime = (value: number) => {
  return `${Math.floor(value / 3600) > 9 ? Math.floor(value / 3600) : `0${Math.floor(value / 3600)}`}:${moment({
    m: moment.duration(value, 'seconds').minutes(),
    s: moment.duration(value, 'seconds').seconds(),
  }).format('mm:ss')}`;
};
</script>

<style lang="less" scoped>
.progress {
  ::v-deep .sp-slider__button-wrapper {
    width: 20px;
    height: 20px;
    margin-top: 8px;
  }
  ::v-deep .sp-slider__button {
    width: 12px;
    height: 12px;
    background-color: #4974f5;
  }
}
</style>

<script setup lang="ts">
import AudioBase from '@/layouts/components/baseComponents/AudioBase.vue';
</script>

<div bg-white p-10 rounded-5>
   播放組件：
   <audio-base></audio-base>
</div>