<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
const router = useRouter()
let axa_id = router.currentRoute.value.query.axa_id
let voiceList = $ref([])
let one_info = $ref({})
let loading = $ref(true)
request({ url: '/aimooc/xnszr_audio/get_demo_text' }).then(res => {
  let demoList = res.data.data
  request({
    url: '/aimooc/xnszr_audio/detail', data: {
      axa_id: axa_id
    }
  }).then(res => {
    one_info = res.data.one_info
    let audioList = res.data.one_info.axa_sycj_json_v2 ? JSON.parse(res.data.one_info.axa_sycj_json_v2) : []
    if (audioList.length) {
      for (let item of audioList) {
        for (let demo of demoList) {
          if (demo.audioId == item.audioId) {
            demo.demoAudio = item.audio
            break
          }
        }
      }
      voiceList = demoList
    } else {
      voiceList = []
    }
    loading = false
  })
})
function handleBack() {
  router.back()
}
let audio = null

onMounted(() => {
  audio = document.getElementById('myAudio');
})

function playAudio(src) {
  // 如果音频已经在播放，则停止并重置
  if (audio.paused === false) {
    audio.pause();
    audio.currentTime = 0;
  }

  // 设置音频源并播放
  audio.src = src;
  audio.play();
}
</script>
<template>
  <div class="h-full flex flex-col">
    <el-scrollbar view-class="h-full flex flex-col">
      <div class="my-15px flex items-center justify-between">
        <div class="flex space-x-6">
          <el-icon class="cursor-pointer" size="29" @click="handleBack">
            <ArrowLeftBold />
          </el-icon>
          <h3 class="text-24px">
            {{ one_info.axa_name }}
          </h3>
        </div>
        <div class="flex items-center">

        </div>
      </div>
      <div>
        <el-table v-loading="loading" :data="voiceList" size="large">
          <el-table-column prop="text" label="声音名称" />
          <el-table-column label="播放">
            <template #default="scope">
              <img src="../../../../assets/szrdzgl-play.png" style="cursor: pointer;"
                @click="playAudio(scope.row.demoAudio)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
  </div>
  <audio id="myAudio" style="display: none;" preload="auto"></audio>
</template>
<route lang="json">{
  "meta": {
    "hidden": true
  }
}</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";
</style>
