<template>
  <!-- 左边 书籍封面 -->
  <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>
</template>

<script lang="ts" setup>
import { convertNumber } from '@/utils/tool'
import type { BookDetailType } from '../interface'

const props = withDefaults(
  defineProps<{
    bookDetail: BookDetailType | undefined
  }>(),
  {
    bookDetail: () => ({}),
  },
)

const bookDetails = ref<BookDetailType>() // 书籍详情
const isShowEnglish = ref(false)

onMounted(() => {
  setTimeout(() => {
    // isPlay.value = playerStore.playShow;
  }, 300)
  bookDetails.value = props.bookDetail
})
</script>

<style lang="scss" scoped>
.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;
      }
    }
  }
}
</style>
