<template>
  <div class="g-container">
    <div class="book_introduction">
      <BackBar :leftText="name" />
      <div class="book_content">
        <div class="bg_up">
          <div
            class="arrow left-arrow"
            :style="{
              background: `url(${OSS_URL}/xuexiaole_clinet/normalMode/Left_Arrow.png) 100% / contain no-repeat`,
            }"
            @click="changePage(-1)"
          ></div>
          <!-- 左边 书籍封面 -->
          <div class="book_cover"></div>
          <!-- 右边 书页 -->
          <div class="book_pages">
            <sentence></sentence>
          </div>
          <div
            class="arrow right-arrow"
            :style="{
              background: `url(${OSS_URL}/xuexiaole_clinet/normalMode/Right_Arrow.png) 100% / contain no-repeat`,
            }"
            @click="changePage(1)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import sentence from './components/sentence.vue'

const OSS_URL = `${import.meta.env.VITE_OSS_URL}`

const bookId = ref<string>('') // 书籍id
const lastReadingHistoryId = ref() // 上次播放页id
const isLoading = ref(false) // 加载
// const playerStore = usePlayerStore();
const isPlay = ref(true)

const name = computed(() => {
  return '书名-章节名'
})
// const bookPage = ref({
// 	size: 18,
// 	current: 1,
// 	totalPage: 1,
// 	total: 0,
// });
const isShowEnglish = ref(true) // 简介语言切换

async function fetchGetBookDetails() {
  // try {
  //     const res: any = await getBookDetailApi({ bookId: bookId.value });
  //     if (res.code === 200) {
  //         bookDetails.value = res.data;
  //         playerStore.bookDetails = res.data;
  //         arrange();
  //     }
  // } catch (err) {
  //     console.log(err);
  // } finally {
  //     isLoading.value = false;
  // }
}

const bookList = ref([
  {
    id: 123,
    lexile: 1,
    alreadyReadPageNum: 0,
    alreadyReadPercent: 0,
    enName: 'Building with Blocks',
    pictureUrl:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/%5CA%5CBR140L_Building%20with%20Blocks%5Cpage_00%5Cpage-0_xlarge.jpg',
    znName: '搭积木',
  },
])

function changePage(flag: number) {
  if (flag > 0) {
    console.log('下一页')
  } else {
    console.log('上一页')
  }
}

// 返回按钮
// 获取书本全部页
async function getAllBookContentDetailFun() {
  // const res = await getAllBookContentDetail({
  //     bookId: bookId.value,
  // });
  // // 重新整理一下数据
  // res.data.forEach((item: any) => {
  //     if (item.voiceList.length > 0) {
  //         item.newVoiceList = playerStore.OrganizeData(item);
  //     } else {
  //         item.newVoiceList = {
  //             sentenceList: [],
  //             voiceWordList: [],
  //         };
  //     }
  // });
  // bookPageList.value = res.data;
  // playerStore.AllBookPages = res.data;
}

function fetch() {}
onMounted(() => {})
</script>

<style lang="scss" scoped>
.g-container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  @include main_bg;

  .book_introduction {
    margin: auto;
    padding-top: 2.67vh;
    padding-left: 64px;
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    max-height: 160vh;
    .back {
      cursor: pointer;
      width: max-content;
    }

    .book_content {
      position: relative;
      width: 100%;
      height: 100%;

      .bg_up {
        margin-top: 1.67vh;
        display: flex;
        justify-content: space-between;
        width: 1792px;
        height: 85.33vh;
        box-sizing: border-box;
        // overflow: hidden;
        position: relative;

        .book_cover {
          position: relative;
          display: flex;
          flex-direction: column;
          padding-bottom: 2.67vh;
          width: 50%;
          background-color: #fff;
          border-radius: 3.33vh 1.67vh 1.67vh 3.33vh;

          align-items: center;
          text-align: center;
          box-sizing: border-box;
        }

        .book_pages {
          // width: 800px;
          width: 50%;
          background-color: #fff;
          border-radius: 1.67vh 3.33vh 3.33vh 1.67vh;
          display: flex;
          flex: 1;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            height: 82.5vh;
            width: 2px;
            background: repeating-linear-gradient(
              to bottom,
              #7a7ff550 0%,
              #7a7ff550 1%,
              #fff 1%,
              #fff 2%
            );
            left: -1px;
            top: 1.5vh;
            z-index: 9;
          }
        }
        .arrow {
          cursor: pointer;
          position: absolute;
          z-index: 9;
          left: -40px;
          height: 5.33vh;
          width: 64px;
          top: 50%;
          transform: translateY(-50%);
          &.right-arrow {
            left: 98.6%;
          }
        }
      }
    }
  }
}
</style>
