<template>
  <div class="g-container">
    <div class="book_introduction">
      <div class="back" @click="changeMode">
        <BackBar
          :style="{ pointerEvents: isBookDetail ? 'none' : 'auto' }"
          :leftText="isBookDetail ? '书本详情' : '系列书介绍'"
        />
      </div>
      <div class="book_content">
        <div class="bg_up">
          <!-- 左边 书籍封面 -->
          <div class="book_cover">
            <div class="cover">
              <span class="series">系列书</span>
              <img :src="bookDetails?.pictureUrl" />
            </div>
            <div class="cover_info">
              <div class="title">
                <div>{{ bookDetails?.enName }}</div>
                <div class="zn">{{ bookDetails?.znName }}</div>
                <div v-if="bookDetails?.author" class="author">
                  {{ bookDetails?.author }}
                </div>
              </div>
              <div class="book_type">
                <div v-if="bookDetails?.znTopic" class="box topic">
                  {{ bookDetails?.znTopic }}
                </div>
                <div v-if="bookDetails?.znStage" class="box stage">
                  {{ bookDetails?.znStage }}
                </div>

                <div v-if="bookDetails?.znType" class="box type">
                  {{ bookDetails?.znType }}
                </div>
              </div>
              <div class="book_num">
                <div class="column">
                  <div class="square">
                    <span class="label">蓝思值</span>
                    <span class="num">{{ bookDetails?.lexile ? bookDetails?.lexile : '/' }}</span>
                  </div>
                  <div class="square">
                    <span class="label">单词数</span>
                    <span class="num">{{ convertNumber(bookDetails?.wordCount) }}</span>
                  </div>
                </div>
                <div class="column column_1">
                  <div class="square">
                    <span class="label">句子数</span>
                    <span class="num">{{ convertNumber(bookDetails?.sentenceCount) }}</span>
                  </div>
                  <div
                    class="square square_key"
                    :style="{
                      cursor: bookDetails?.coreWordCount ? 'pointer' : 'default',
                    }"
                  >
                    <span class="label">核心词</span>
                    <span class="num">{{ convertNumber(bookDetails?.coreWordCount) }}</span>
                  </div>
                </div>
              </div>
              <div class="book_intro">
                <div class="label">简介：</div>
                <div
                  class="intro_text scroll-yellow"
                  @click="() => (isShowEnglish = !isShowEnglish)"
                >
                  {{ isShowEnglish ? bookDetails?.synopsis : bookDetails?.znSynopsis }}
                </div>
              </div>
            </div>
          </div>
          <!-- 右边 书页 -->
          <div class="book_pages">
            <div class="pages_box">
              <div class="pages_title">
                {{ isBookDetail ? '章节目录' : '系列书'
                }}<span class="pages_num"
                  >（共{{ bookPageList.length }}{{ isBookDetail ? '章节' : '本' }}）</span
                >
              </div>
              <div class="page_list_content hidden_scroll">
                <div class="page_list">
                  <template v-if="isBookDetail">
                    <div class="shelf_book_cover" @click="goBookDetail">
                      <div class="cover_pic">
                        <img :src="bookDataDetail.pictureUrl" />
                      </div>
                      <div class="book_title">
                        <span>{{ bookDataDetail.name }}</span>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <ReadBook
                      v-for="item in bookList"
                      :key="item.id"
                      :bookData="item"
                      isSeries
                      @change="isBookDetail = true"
                    ></ReadBook>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { convertNumber } from '@/utils/tool'
import ReadBook from '../read/components/ReadBook.vue'
import { useRouter } from 'vue-router'

import type { BookDetailType, BookPageRowType } from './interface'

const isBookDetail = ref(false) // 是否是书本详情
const bookDataDetail = ref({
  pictureUrl:
    'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/%5CA%5CBR140L_Building%20with%20Blocks%5Cpage_00%5Cpage-0_xlarge.jpg',

  name: '1.Little fox buys gloves 1231 qwe qwe qwe q',
})

// const bookPagesSrcollRef = ref(); // 书页盒子
const router = useRouter()

const bookId = ref<string>('') // 书籍id
const bookDetails = ref<BookDetailType>() // 书籍详情
const bookPageList = ref<BookPageRowType[]>([]) // 书页
const lastReadingHistoryId = ref() // 上次播放页id
const isLoading = ref(false) // 加载
// const playerStore = usePlayerStore();
const _coreWordList = ref<string[]>([])
const collect = ref({
  collectNum: 0,
  isCollect: 0, // 0未收藏 1已收藏
})
const showLoading = ref(true) // 骨架屏幕
const showSeletonTimer = ref() // 骨架屏定时器
const isPlay = ref(true)
// const bookPage = ref({
// 	size: 18,
// 	current: 1,
// 	totalPage: 1,
// 	total: 0,
// });
const isShowEnglish = ref(true) // 简介语言切换
const coreWordList = ref<{ col: string[] }[]>([]) // 核心词

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;
  // }
}

// 书本详情界面返回系列书介绍
function changeMode() {
  isBookDetail.value = false
}

// 整理数据
function arrange() {
  lastReadingHistoryId.value = bookDetails.value!.lastReadingHistory
    ? bookDetails.value!.lastReadingHistory.id
    : ''
  _coreWordList.value = bookDetails.value!.coreWordList
    ? bookDetails.value!.coreWordList.split(',')
    : []
}

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: '搭积木',
  },
])

// 返回按钮
// 获取书本全部页
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() {
  showLoading.value = true
  Promise.all([fetchGetBookDetails(), getAllBookContentDetailFun()])
    .then(() => {
      console.log('加载完')
      showSeletonTimer.value = setTimeout(() => {
        showLoading.value = false
      }, 500)
    })
    .catch(error => {
      console.log('error', error)
    })
}

// onLoad(option => {
//     bookId.value = option.id;
//     fetch();
// });
const Reading = ref()

function goBookDetail() {
  console.log('书籍详情')
  router.push('/subject/happyRead/classicRead/readDetail')
}
onMounted(() => {
  setTimeout(() => {
    // isPlay.value = playerStore.playShow;
  }, 300)

  bookDetails.value = {
    id: '1744315688400502786',
    sort: 1,
    category: 2,
    enName: 'Building with Blocks',
    znName: '搭积木',
    author: '天南·第一剑修',
    synopsis:
      'Building with blocks can be so much fun! Students can easily relate to the main character in Building with Blocks as she creates buildings, vehicles, animals, and more with her blocks. High-frequency words, colorful illustrations, and repetitive phrases help support early emergent readers. Students will also have the opportunity to connect to prior knowledge and to classify information as they read.',
    znSynopsis:
      '用积木搭建是一件非常有趣的事情！学生们可以很容易地与《搭积木》中的主人公产生共鸣，因为她用积木创造了建筑物、交通工具、动物等。高频词汇、色彩鲜艳的插图和重复的短语有助于支持早期启蒙阅读。学生还将有机会在阅读过程中联系已有知识并对信息进行分类。',
    topic: 'Realistic',
    type: 'Fiction',
    stageId: '2',
    wordCount: 32,
    coreWordCount: 17,
    sentenceCount: 14,
    lexile: 'BR140L',
    level: 'A',
    pictureUrl:
      'https://reading-1313840333.cos.ap-guangzhou.myqcloud.com/%5CA%5CBR140L_Building%20with%20Blocks%5Cpage_00%5Cpage-0_xlarge.jpg',
    status: 0,
    delFlag: 0,
    seriesBook: 0,
    znTopic: '现实',
    znStage: '一年级',
    znType: '小说',
    hit: '880',
    alreadyReadPageNum: 0,
    totalPageNum: 0,
    alreadyReadPercent: 0,
    adminCensorFlag: 1,
    pageBookList: null,
    collectNum: 4,
    isCollect: 0,
    lastReadingHistory: null,
    coreWordList:
      'Building,plane,castle,tree,I,maze,house,picture,boat,horse,not,Written,build,duck,Writing,thing,you',
  }
  for (let index = 0; index < 50; index++) {
    bookList.value.push({
      id: 123,
      lexile: 1,
      alreadyReadPageNum: 0,
      alreadyReadPercent: 100,
      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: `搭积木${index}`,
    })
  }
})
</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;

        .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;

          .cover {
            margin: 2.33vh 0 0.67vh 0;
            width: 240px;
            height: 26.67vh;
            border: 0.33vh solid #90fcf7;
            border-radius: 2.5vh;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0.33vh 0.5vh #00000030;
            .series {
              position: absolute;
              top: -0.33vh;
              left: -4px;
              z-index: 9;
              font-size: 1.33vh;
              width: 102px;
              height: 3.33vh;
              text-align: center;
              line-height: 3.33vh;
              border-bottom-right-radius: 20px;
              background-color: #90fcf7;
            }

            img {
              width: 100%;
              max-height: 100%;
              object-fit: contain;
              border-radius: 2.5vh;
            }
          }

          .cover_info {
            padding: 0 32px 0 64px;
            width: 100%;
            // height: 480px;
            overflow-y: scroll;
            box-sizing: border-box;

            &::-webkit-scrollbar {
              background-color: transparent;
              width: 0;
            }

            .title {
              font-size: 2.33vh;
              line-height: 3.5vh;
              margin-top: 1.33vh;
              font-family: $font-special;
              color: $font-color;
              .zn {
                font-size: 2vh;
              }
              .author {
                font-size: 1.67vh;
                line-height: 2.5vh;
                font-weight: 500;
                font-family: OPPOSans;
                color: rgba(0, 0, 0, 0.65);
              }
            }

            .book_type {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              margin: 0.67vh 0 0 0;

              .box {
                padding: 0.25vh 16px;
                margin: 0 16px 1.33vh 0;
                font-size: 1.67vh;
                font-family: $font-special;
                border-radius: 0.67vh;
                white-space: nowrap;

                &:last-child {
                  margin-right: 0;
                }

                &::after {
                  content: '';
                  position: absolute;
                  left: 3.994px;
                  top: 50%;
                  transform: translateY(-50%);
                  display: inline-block;
                  width: 5px;
                  height: 0.42vh;
                  border-radius: 50%;
                }
              }

              .topic {
                position: relative;
                color: #99d609;
                background-color: #ebf6c3;
                border-bottom: 0.17vh solid #99d609;

                &::after {
                  background-color: #99d609;
                }
              }

              .stage {
                position: relative;
                color: #18bacc;
                background-color: #cef1ea;
                border-bottom: 0.17vh solid #18bacc;

                &::after {
                  background-color: #18bacc;
                }
              }

              .type {
                position: relative;
                color: #ffa51f;
                background-color: #fcedc8;
                border-bottom: 0.17vh solid #ffa51f;

                &::after {
                  background-color: #ffa51f;
                }
              }
            }

            .book_num {
              display: flex;
              width: 100%;
              justify-content: center;
              font-size: 1.67vh;
              font-family: $font-special;
              height: 8.67vh;
              color: $font-color;

              .column {
                .square {
                  margin: 0 72px 0.67vh 0;
                  border: 0.17vh solid #8fcc00;
                  border-radius: 0.67vh;
                  line-height: 3vh;
                  display: flex;
                  position: relative;

                  .label {
                    position: absolute;
                    top: -0.08vh;
                    left: -2px;
                    width: 112px;
                    border-radius: 0.67vh;
                    background: #ddff8c;
                    border: 0.17vh solid #8fcc00;
                  }

                  .num {
                    margin-left: 112px;
                    width: 124.006px;
                  }
                }
              }

              .column_1 {
                .square {
                  margin-right: 0;
                }
              }
            }

            .book_intro {
              display: flex;
              text-align: left;
              color: $font-color;

              .label {
                line-height: 3.5vh;
                font-family: $font-special;
                font-size: 2.33vh;
                white-space: nowrap;
              }

              .intro_text {
                font-size: 1.83vh;
                font-family: $font-special;
                max-height: 33.33vh;
                overflow-y: auto;
                cursor: pointer;
              }
            }
          }
        }

        .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;
          }

          .pages_box {
            margin: 3.33vh 0 0 40px;
            // height: 100%;
            display: flex;
            flex: 1;
            flex-direction: column;

            // background-color: yellow;

            .pages_title {
              margin-bottom: 2vh;
              font-size: 2.33vh;
              font-family: $font-special;
              color: #66600c;

              .pages_num {
                font-size: 1.67vh;
                color: #817d3d;
              }
            }

            .page_list_content {
              display: flex;
              flex: 1;
              // background-color: red;
              width: 100%;
              overflow-y: scroll;
              max-height: 74.17vh;
            }

            // .pages_srcoll {
            // 	width: 100%;

            // ::-webkit-scrollbar {
            // 	width: 12.006px;
            // }
            .page_list {
              .book_title {
                padding: 0 16px;
                font-family: $font-special;
                color: $font-color;
                font-size: 1.67vh;
                line-height: 2.33vh;
                text-align: center;

                span {
                  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
                  -webkit-box-orient: vertical; /* 垂直排列子元素 */
                  overflow: hidden;
                  -webkit-line-clamp: 2;
                  max-height: 4.67vh;

                  text-overflow: ellipsis;
                }
              }
            }

            :deep(.page_list) {
              display: flex;
              flex-wrap: wrap;
              .shelf_book_cover {
                height: 26.67vh;
                width: 240px;
                position: relative;
                margin-right: 24px;
                border: 0.33vh solid #90fcf7;
                border-radius: 2.5vh;
                box-sizing: border-box;
                background-color: #f2fffe;
                overflow: hidden;
                cursor: pointer;
                &:nth-child(n) {
                  margin-top: 0;
                  margin-right: 48px;
                }
                &:nth-child(3n) {
                  margin-right: 0;
                }
                &:nth-child(n + 4) {
                  margin-top: 2vh;
                }
                .cover_pic {
                  height: 21.5vh;
                }
                .lexile {
                  display: none;
                }

                .cover_pic {
                  width: 100%;
                  border-bottom: 0.33vh solid #90fcf7;
                  position: relative;

                  img {
                    width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                  }
                }
              }
            }

            // }
          }
        }
      }
    }
  }
}
</style>
