<template>
  <div>
    <van-nav-bar
      :title="detailData.axa_name"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <van-loading class="w-full text-center" v-if="loading" color="#FFFFFF" />
    <van-list v-else :finished="finished" finished-text="没有更多了">
      <template v-if="voiceList.length > 0">
        <van-cell
          :border="false"
          center
          v-for="item in voiceList"
          :key="item.audioId"
          :title="item.text"
        >
          <template #title>
            <van-text-ellipsis
              class="w-250px"
              :content="item.text"
              dots="......"
            >
              <template #action="{ expanded }">
                {{ expanded }}1111
                <van-icon color="#1989fa" v-if="expanded" name="arrow" />
                <van-icon color="#1989fa" v-else name="arrow-up" /> </template
            ></van-text-ellipsis>
          </template>
          <template #right-icon>
            <img
              @click="handlePlay(item)"
              class="w-25px h-25px"
              :src="!item.play ? img1 : img2"
              alt=""
            />
          </template>
        </van-cell>
      </template>
      <van-empty v-else description="暂无数据" />
    </van-list>
  </div>
</template>
<script setup lang='ts'>
import img1 from "~/assets/voice1.png";
import img2 from "~/assets/voice2.png";
const props = defineProps<{
  id: string;
}>();
console.log(props.id);

const router = useRouter();
function onClickLeft() {
  router.back();
}

let voiceList = $ref([]);
let detailData = $ref({});
let voiceJson = $ref([]);
let arr = $ref([]);
let loading = $ref(true);
request({
  url: "/aimooc/xnszr_audio/get_demo_text",
  data: {},
}).then((res) => {
  if (res.code == "1") {
    arr = res.data.data;
    getDetail();
  }
});
function getDetail() {
  request({
    url: "/aimooc/xnszr_audio/detail",
    data: {
      axa_id: props.id,
    },
  }).then((res) => {
    if (res.code == "1") {
      const { one_info } = res.data;
      detailData = one_info;
      voiceJson = one_info.axa_sycj_json_v2
        ? JSON.parse(one_info.axa_sycj_json_v2)
        : "";
      loading = false;
      if (voiceJson.length > 0) {
        arr.map((item) => {
          voiceJson.map((el) => {
            if (el.audioId == item.audioId) {
              voiceList.push({
                audioId: el.audioId,
                text: item.text,
                audio: el.audio,
                play: false,
              });
            }
          });
        });
      }
    }
  });
}

let mp3 = new Audio();
let playShow = $ref(true);
function handlePlay(item: any) {
  console.log(item);
  mp3.src = item.audio;
  if (!item.play) {
    item.play = true;
    mp3.play();
    mp3.addEventListener("ended", () => {
      item.play = false;
    });
  } else {
    item.play = false;
    mp3.pause();
  }
}
</script>

<style lang="scss" scoped>
:deep(.van-cell) {
  padding: 25px 37px 10px 26px;
  .custom-title {
    display: block;
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.01px;
  }
}
</style>