<script setup lang="ts">
import dataList from "@/data/data";
import { Exhibition, Paragraph, Part, useStore } from "@/store/index";
import { showToast } from "vant";
import AudioBoxVue from "@/components/AudioBox.vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

const currentP = ref();
const getAssetURL = (image: string) => {
  return new URL(`../../assets/img/${image}`, import.meta.url).href;
};

// 查看全部
const goBack = () => {
  router.push({
    path: "/exhibitionList",
  });
};

// 上一个
const prev = () => {
  // 当前段落下标
  let indexPP = store.currentPart.paragraphs.findIndex((item: Paragraph) => {
    return item.paragraphName == currentP.value.paragraphName;
  });
  // 当前Part的下标
  let indexP = store.currentScene.parts.findIndex((item: Part) => {
    return item.partName == store.currentPart.partName;
  });
  //console.log(indexPP, indexP);
  if (indexPP === 0 && indexP == 0) {
    showToast("暂无更多");
  } else if (indexPP === 0 && indexP != 0) {
    //console.log("切换");
    // 当前段落为part第一章，则part - 1, 段落为part - 1的最后一个段落
    indexP -= 1;
    indexPP = store.currentScene.parts[indexP].paragraphs.length - 1;
    //console.log(indexP, indexPP);
  } else {
    // 当前章节的非第一段落
    indexPP -= 1;
  }
  // 更新仓库章节
  store.currentPart = store.currentScene.parts[indexP];
  // 更新仓库段落
  store.currentParagraph = store.currentPart.paragraphs[indexPP];
  currentP.value = store.currentParagraph;
};

// 下一个
const next = () => {
  // 当前段落下标
  let indexPP = store.currentPart.paragraphs.findIndex((item: Paragraph) => {
    return item.paragraphName == currentP.value.paragraphName;
  });
  // 当前Part的下标
  let indexP = store.currentScene.parts.findIndex((item: Part) => {
    return item.partName == store.currentPart.partName;
  });
  //console.log(indexPP, indexP);
  if (
    indexPP === store.currentPart.paragraphs.length - 1 &&
    indexP == store.currentScene.parts.length - 1
  ) {
    showToast("暂无更多");
  } else if (
    indexPP === store.currentPart.paragraphs.length - 1 &&
    indexP != store.currentScene.parts.length - 1
  ) {
    //console.log("切换");
    // 当前段落为part最后一章，则part + 1, 段落为part + 1的第一个段落
    indexP += 1;
    indexPP = 0;
    //console.log(indexP, indexPP);
  } else {
    // 当前章节的非第一段落
    indexPP += 1;
  }
  // 更新仓库章节
  store.currentPart = store.currentScene.parts[indexP];
  // 更新仓库段落
  store.currentParagraph = store.currentPart.paragraphs[indexPP];
  currentP.value = store.currentParagraph;
};

const audiobox = ref(null);
watch(currentP, () => {
  console.log(audiobox.value);
  if (audiobox.value == null) {
    return;
  } else {
    audiobox!.value.clear();
  }
});

onMounted(() => {
  // 跳转进入(传入段落名和段落编号)
  const sName = route.query.sName;
  const pNumb = route.query.pNum;
  console.log(route.query.sName, route.query.pNum);
  if (sName != "" && pNumb) {
    const s = dataList.find((item: Exhibition) => {
      // return item.name == sName;
      return item.name.indexOf(sName) != -1 || sName.indexOf(item.name) != -1;
    });
    // console.log(dataList);
    // console.log(s);
    // 遍历所有的part
    s?.parts.forEach((item: Part) => {
      const res = item.paragraphs.find((p: Paragraph) => {
        return p.paragraphName.indexOf(pNumb) != -1;
      });
      if (res) {
        store.currentParagraph = res;
        store.currentPart = item;
        store.currentScene = s;
        return;
      }
    });
  }
  currentP.value = store.currentParagraph;
});

const htmlD = ref("<div>献给所有为了梦想狂奔的人</div><br />你好");
</script>

<template>
  <div class="all" v-if="currentP">
    <div class="content">
      <div class="top-img">
        <img :src="getAssetURL(`home/${store.currentScene.coverImg}`)" alt="" />
      </div>
      <div class="content-box">
        <div class="content-title">{{ currentP.paragraphName }}</div>
        <div class="p">
          <div v-html="currentP.contentText"></div>
        </div>
      </div>
      <div class="control-box">
        <!-- <audio :src="currentP.audioUrl"></audio> -->
        <div class="control-top">
          <div class="top-audio">
            <!-- <audio id="audiom" :src="currentP.audioUrl" preload="meta"></audio> -->
            <AudioBox :audioUrl="currentP.audioUrl" ref="audiobox" />
            <!-- <audioPlayer :audioUrl="currentP.audioUrl" /> -->
          </div>
        </div>
        <div class="control-bottom">
          <div class="bottom-left" @click.stop="prev()">
            <img :src="getAssetURL('left.png')" alt="" />
          </div>
          <div class="bottom-center" @click.stop="goBack()">查看全部</div>
          <div class="bottom-right" @click.stop="next()">
            <img :src="getAssetURL('right.png')" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.all {
  width: 100%;
  height: 100%;
  padding: 5% 5% 0 5%;
  overflow: hidden;

  .content {
    width: 100%;
    height: 100%;
    background: url(/src\assets\img\contentBg.png);
    background-size: 100% 100%;
    border-radius: 8px 8px 0 0;
    position: relative;
    .top-img {
      width: 100%;
      // height: 30vh;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      }
    }
    .content-box {
      width: 100%;
      height: 55vh;
      overflow: auto;
      padding: 5%;
      .content-title {
        text-align: center;
        font-size: 1.1rem;
        font-weight: bold;
        text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
      }
      .p {
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: 6px;
        font-weight: 500;
        white-space: pre-wrap;
        margin-top: 10px;

        .html-box {
          div {
            text-indent: 2em;
          }
        }
      }
    }

    .control-box {
      width: 100%;
      position: absolute;
      bottom: 0;

      .control-top {
        height: 7vh;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-content: center;
        position: relative;
        z-index: 10;

        .top-audio {
          width: 90%;
          height: 60%;
          margin: auto;
        }
      }
      .control-bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.6);

        div {
          width: 33%;
          height: 60px;
          background: rgba(0, 0, 0, 0.8);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1rem;
          color: white;
          font-weight: bold;
          letter-spacing: 2px;

          img {
            width: 7vw;
          }
        }
      }
    }
  }
}
</style>
